Question

I have multiple user controls loading asynchronously on my page, using pagemethods. Some dropdownlists cause asynchronous callbacks of those usercontrols, and the user controls are reloaded with modified content. We had our reasons for doing it this way.

However, currently our users have to wait for those user controls to load before they can change their selection in the dropdownlists. In an attempt to provide a better user experience, I’m attempting to abort previous, yet-to-be-loaded, requests.

I’m attempting to maintain a global js array of outstanding asynchronous request executors, in order to ensure that only the latest request for each user control is loaded. In other words, I want to cancel previous requests for a specific usercontrol which have yet to load and give priority to the latest request for that usercontrol.

The problem I have is that by the time execution of my OnSuccess function happens, the global array is undefined.

Am I going about this in the wrong way? What is it that I don’t know?

Any help would be much appreciated.

This is a pared down example of my code:

var outstanding_requests; 

$.fn.remove_or_item = function (val, col) { 
    var arr1 = $(this); 
    var arr2 = new Array(); 
    $.each(arr1, function (k, v) { 
        if (v[col] != val) { arr2.push(v); } 
        else if (v[1].get_started()) { v[1].abort(); } 
    }); 
    return arr2; 
}

$.fn.find_or_item = function (val, col) { 
    var item; 
    var arr1 = $(this); 
    $.each(arr1, function (k, v) { 
        if (v[col] == val) { item = v; return false; } return true; 
    }); 
    return item; 
}

function RunMyPageMethod(panelname) {
    var request; //current request object
    if (outstanding_requests == undefined) { outstanding_requests = new Array(); }
    outstanding_requests = $(outstanding_requests).remove_or_item(panelname, 0);
    request = PageMethods._staticInstance.LoadUserControl(panelname, PageMethodSuccess, PageMethodFailure);
    outstanding_requests.push([panelname, request.get_executor()]);
}

function PageMethodSuccess(result, userContext, methodName) {
    var panelname = result.split("|")[0];
    //here outstanding_requests is undefined
    if($(outstanding_requests).find_or_item(panelname,0))
    {
        outstanding_requests = $(outstanding_requests).remove_or_item(panelname, 0);
        //load usercontrol
    }
}

Answer 1

Arrays are pass by reference in js. This has the benefit of allowing me to see the array in the state it was in when I hit the OnSuccess function, not the state it was in when I called the pagemethod. At least I think that’s why it works. I needed the reference to the array passed into the OnSuccess function. I ended up doing this with the last two functions shown above, which worked nicely..

function RunMyPageMethod(panelname) {
    var request; //current request object
    if (outstanding_requests == undefined) { outstanding_requests = new Array(); }
    outstanding_requests = $(outstanding_requests).remove_or_item(panelname, 0);
    request = PageMethods._staticInstance.LoadUserControl(panelname,function(result,userContext,methodName){ PageMethodSuccess(result,userContext,methodName,outstanding_requests); }, PageMethodFailure);
    outstanding_requests.push([panelname, request.get_executor()]);
}

function PageMethodSuccess(result, userContext, methodName, outstanding_requests) {
    var panelname = result.split("|")[0];
    if($(outstanding_requests).find_or_item(panelname,0))
    {
        outstanding_requests = $(outstanding_requests).remove_or_item(panelname, 0);
        //load usercontrol
    }
}