ajax async solution

Question

I send several ajax request at a time. But as you know that the result arrival time isn't related with the time you send request. Now, this make a problem to me.

Here's what I face now.

When I click the TAB button made with HTMLElement, it sends ajax call.

If I click the tab just after clicking other tab. two request goes together and I can't know which one could response to me first. but unfortunately last one sometime arrive earlier than the first ajax request.

then, it occur my html markup messy, so my question is is there any way to make ajax call arrive in regular sequence.

initialize : function() { //<!-- this function call AJAX request
    this.getActivatedDeviceList();
    this.getDeActivatedDeviceList();
    this.getLostOrStolenDeviceList();
    this.getWaitingDeviceList();
},

getActivatedDeviceList : function() {
    var url = "/monitor/device/getActivatedDeviceJson/" + TopMenu.CURRENT_TAB + "/";
    this.loadTemplateAndFillUp(url, "#activatedDeviceTemplate", "#activatedDevice");
},

getDeActivatedDeviceList : function() {
    var url = "/monitor/device/getDeactivatedDeviceJson/" + TopMenu.CURRENT_TAB + "/";
    this.loadTemplateAndFillUp(url, "#deactivatedDeviceTemplate", "#deactivatedDevice");
},

getLostOrStolenDeviceList : function() {
    var url = "/monitor/device/getLostOrStolenDeviceJson/" + TopMenu.CURRENT_TAB + "/";
    this.loadTemplateAndFillUp(url, "#lostOrStolenDeviceTemplate", "#lostOrStolenDevice");
},

getWaitingDeviceList : function() {
    var url = "/monitor/device/getWaitingDeviceJson/" + TopMenu.CURRENT_TAB + "/";
    this.loadTemplateAndFillUp(url, "#waitingDeviceTemplate", "#waitingDevice");
},

loadTemplateAndFillUp : function(url, templateElement, appendElement) {
    $.ajax({ //<!--This ajax call fires upon initialize function
          url : url,
          dataType : 'json',
          beforeSend : function(xhr) {
              $(appendElement).children(".zoom").attr("src", "/monitor/img/icon/loading.gif");
          },
          complete : function(xhr) {
              setTimeout(
                  function() {
                      $(appendElement).children(".zoom").attr("src", "/monitor/img/btn/btn_zoom.png")
                  }, 
                  500
              );

              $(appendElement).find("table.dataBoxTable").tableScroll({height:DeviceManager.TABLE_HEIGHT});
              DeviceManager.columnAutoFit(appendElement);
              DeviceManager.addListenerAndHandler();
          },
          success : function(data) {
              $(templateElement).tmpl(data).appendTo(appendElement); //<!--This jquery template get messed up by ajax arrival order.
          },
          async: true
    });
},

I hope you could understand my English. thank you very much.

I don't want to use async: false because I can't see loading image.. — Patrick Jeon, May 17 '12 at 11:41
You may try this http://stackoverflow.com/questions/446594/kill-ajax-requests-using-javascript-using-jquery Killing the last request and call ajax again — sathish, May 17 '12 at 11:48

score 1 · Accepted Answer · answered May 17 '12 at 13:25

Client side: Have a counter in the client side i.e say ajaxCounter = 0; and on ajax call increment the counter and then send the counter as parameter to the call.

Now as there are two calls made then ajaxCounter is 2

Server side: Always return the ajaxCounter received as the parameter. So for the 1st ajax call the returned will be 1. So for the 2nd ajax call the returned will be 2.

Client side: In the client side check whether the ajaxCounter == counterReturnedFromClient. If it is equal execute the complete method otherwise ignore.

thanks you ! instead using counter i used ID generate to identifying last ajax call. — Patrick Jeon, May 18 '12 at 01:36

ajax async solution

1 Answers1