javascriptradajaxmanager

Queuing or allowing multiple AJAX requests in Javascript?


I've got the following scenario:

User has the ability to drag-and-drop a control onto the page. The 'dropping' client-side event initaties an ajaxRequest like so:

function OnClientDropping(sender, eventArgs) {
    var sourceItem = eventArgs.get_sourceItem();
    var droppedID = eventArgs.get_htmlElement().id;

    if (droppedID.indexOf("RadDockZone") != -1) {
        if ($find(droppedID).get_docks().length == 0) {
            var eventData = {};
            eventData["sourceItemText"] = sourceItem.get_text();
            eventData["sourceItemValue"] = sourceItem.get_value();
            eventData["listBoxID"] = sender.get_id();

            $find(ajaxManagerID).ajaxRequestWithTarget(droppedID, $.toJSON(eventData));
    }
}

Now, while this ajaxRequest is processing, the user still has full control over their mouse. It would not be an uncommon scenario for them to wish to drag-and-drop another control onto the page while this event is still processing.

Currently, if they do just that, the first event gets cancelled and then the second event runs successfully. I was wondering how I could queue these events up?

I tried simply wrapping the above code in "$.queue($find(ajaxManagerID).....)", but I did not notice any changes in how my project ran.

What's the proper way to support this scenario?

if (queue.length == 0) {
    queue.push(uniqueDockZoneID);
    queue.push(eventData);
    $find(ajaxManagerID).ajaxRequestWithTarget(uniqueDockZoneID, $.toJSON(eventData));
}
else {
    queue.push(uniqueDockZoneID);
    queue.push(eventData);
}

function endRequest(sender, eventArgs) {

    if (queue.length > 0) {
        queue.shift(); //Remove the ID of the control we just finished.
        queue.shift(); //Remove the data for the control we just finished.
    }

    //If we've got more ajax requests queued up.
    while (queue.length > 0) {
        uniqueDockZoneID = queue.shift();
        data = queue.shift();
        $find(ajaxManagerID).ajaxRequestWithTarget(uniqueDockZoneID, $.toJSON(data));
    }
}

Solution

  • Why don't you just add the uniqueId and the dockZoneID into an array and then remove each item from the array as the associated ajax request gets completed?