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));
}
}
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?