$.done() code gets executed before $.when()

Question

In my project I m using 2 versions of JQuery.js, so I resolved the conflict using $.noConflict() for my latest version of JQuery to variable named jq172. Now I have used jq172.when().done()construct to show loading status image until all ajax request are processed completely. The code is as follows.

jq172.when(
    DisplayPOXOrderStatistics(fromDate, toDate), 
    DisplayPOXCompletedOrdersData(fromDate, toDate),
    DisplayPOXCompletedOrderPieChart(fromDate, toDate),
    DisplayCurrentYearlyTrends())
      .done(function (a1,a2,a3,a4) 
        { 
           $("#loading").hide(); 
        });

where functions in the jq172.when() are coded as follows,

 function DisplayPOXOrderStatistics(fromDate, toDate) {        
    return $.ajax({
        type: "POST",
        url: '@Url.Action("DisplayPOXOrderStatistics", "Home")',
        dataType: "json",
        data: { FromDate: fromDate, ToDate: toDate },
        success: function (data) {application code.....}
    });        
}
function DisplayPOXCompletedOrdersData(fromDate, toDate) {
    return $.ajax({
        type: "POST",
        url: '@Url.Action("DisplayPOXCompletedOrders", "Home")',
        data: { FromDate: fromDate, ToDate: toDate },
        dataType: "json",
        success: function (data) { some code....}
    });
    }

& rest 2 functions are coded in the same way as above Now my code in .done() to hide loading image dive should be executed after all 4 ajax call is finished, but currently it gets executed immediately after function call is dispatched. Can anybody figure out the problem in my code. Thanks in Advance...

Here is the definition of rest 2 functions..

function DisplayPOXCompletedOrderPieChart(fromDate, toDate) {
    return $.ajax({
        type: "POST",
        url: '@Url.Action("POXCompletedOrderPieChart", "Home")',
        data: { FromDate: fromDate, ToDate: toDate },
        dataType: "json",
        success: function (data) {
            $('#POXCompletedOrdersPie').empty();
            var dataSet = [];
            var isDataAvailable = false;
            for (var i = 0; i < data.length ; i++) {
                var newElement = { label: data[i].Name, data: parseFloat(data[i].ColumnValue), color: Color[i] };
                dataSet.push(newElement);
                if (newElement.data > 0)
                    isDataAvailable = true;
            }
            if (dataSet.length != 0 && isDataAvailable) {
                $.plot($("#POXCompletedOrdersPie"), dataSet, {
                    series: {
                        pie: {
                            show: true
                        }
                    },
                    legend: {
                        show: false
                    }
                });
            }
            else {
                $("#POXCompletedOrdersPie").empty();
                $("#POXCompletedOrdersPie").append("<html><p> <b>" + "@Html.Raw(VirtuOxAdvDME.Dashboard_PieChart_POXCompletedOrder_NoData)" + "</b> </p><html>");
            }
        }
    });        
}

function DisplayCurrentYearlyTrends() {
    $("#DisplayCurrentYear").html($('#selectCurrentYear option:selected').text());
    return $.ajax({
        url: '@Url.Action("DisplayCurrentYearlyTrends", "Home")',
        data: { selectedCurrentYear: $('#selectCurrentYear option:selected').text() },
        type: 'POST',
        dataType: 'json',
        success: function (data) {
            var DataValues = [], TickData = [];
            var i = undefined;
            $.each(data, function (index, item) {
                i = (index + 1) * 2;
                DataValues.push({ data: [i, item.Value], color: Color[i] });
                DataValues.push([i, item.Value]);
                TickData.push([i, item.MonthName]);
            });
            $.plot($("#CurrentYearlyTrendsBar"), [{ data: DataValues, color: "#3D69AA" }],
                    {
                        series: { bars: { show: true } },
                        bars: {
                            barWidth: 1.5,
                            align: "center"
                        },
                        xaxis: {
                            ticks: TickData,
                            axisLabelUseCanvas: true,
                            labelAngle: -90,
                        },
                        yaxis: { axisLabelUseCanvas: true },
                        grid: { hoverable: true }
                    });
            $("#CurrentYearlyTrendsBar").UseTooltip();
        }
    });        
}

Is there a reason you're not keeping it simple? I mean, you specifically want to use two versions of jquery in the same line of code? — Daedalus, Sep 05 '13 at 07:19
if you use latest version of jQuery whether it is working.... like `$.when` instead of `jq172.when` — Arun P Johny, Sep 05 '13 at 07:21
@Daedalus & Arun; Actually old version of jquery is in use from other scripts & on removing old version I m getting script errors. So I kept the both .js & resolved the conflict using var jq172=$.noConflict(); — Shaggy, Sep 05 '13 at 09:03
Try `jq172.ajax()` instead (though I would expect `when` to work with any promises). What is the other jQuery's version? — Bergi, Sep 05 '13 at 09:26
@Bergi, the older version I m using is 1.4.4 & later is 1.7.2. Do I need to replace all $ operators to jq172 in the current context? — Shaggy, Sep 05 '13 at 09:44
@Shaggy: Not all of them, only the promise-related functions. See my answer :-) — Bergi, Sep 05 '13 at 09:47

score 1 · Accepted Answer · answered Sep 05 '13 at 09:36

1

Probably your $.ajax calls (from the old jQuery version) do not return jqXHR objects which implement the Promise interface, a feature that was introduced with v1.5. when would see the objects as plain values then and resolve immediately.

To fix this, use jq172.ajax() instead, or use a (single) up-to-date jQuery and update your legacy code.

answered Sep 05 '13 at 09:36

Bergi

630,263
148
957
1,375

Thans for suggestion, I switch to latest version of jquery with jquery migration script. Now I m getting $.browser is undefined error in my jquery.jqGrid.js & jquery.flot.js file; so I m searching for alternative for that. I will be thank full to you if you could suggest me something for this new problem. Then I can check out my original problem of $.when().done(). – Shaggy Sep 06 '13 at 06:54
Check http://stackoverflow.com/questions/15540835/jquery-browser-script-or-shim-for-backwards-compatibility-of-plugins-with-1-9-1 for a quick'n'dirty fix, but you should avoid browser detection. – Bergi Sep 06 '13 at 09:40
Thanks for your kind support; your solution works for me. The $.browser is undefined error was not the problem of switching to latest version of jquery as I included migration script of jquery; I was getting that error because my team mate updated the layout page of project to include script bundle of all jquery versions. I removed the script bundle & all is working fine now. Thanks... – Shaggy Sep 10 '13 at 09:42

Parv Sharma · Answer 2 · 2013-09-05T07:58:22.660

0

this is from the jquery site

in the multiple-Deferreds case where one of the Deferreds is rejected, jQuery.when immediately fires the failCallbacks for its master Deferred. Note that some of the Deferreds may still be unresolved at that point. If you need to perform additional processing for this case, such as canceling any unfinished ajax requests, you can keep references to the underlying jqXHR objects in a closure and inspect/cancel them in the failCallback.

check your ajax calls and make sure no one is getting rejected.
You can do this in the developers console->network tab
generally becomes accessible after pressing F12.

edited Sep 05 '13 at 07:58

answered Sep 05 '13 at 07:29

Parv Sharma

12,581
4
48
80

Hi Parv, none of the ajax request is rejected. All are getting executed & working fine with data manupulation in sucess function. – Shaggy Sep 05 '13 at 08:54
can you please post the code for DisplayCurrentYearlyTrends() and that of DisplayPOXCompletedOrderPieChart() – Parv Sharma Sep 05 '13 at 09:15
Please have look at edited question for function definitions. – Shaggy Sep 05 '13 at 09:45

$.done() code gets executed before $.when()

2 Answers2