AJAX wrong response

Question

I'm using jQuery in our Java project and 3 AJAX requests to refresh 3 columns. The problem is if you click something before the response received that sometimes one of the JSPs meant to return response in a particular DIV, overwrites the entire page and has beeing returned as a new page. I use AJAX Queue plugin which should cancel the requests in the queue, but I think it isn't working..

I make this AJAX request 3 times in a queue:

$('#col<%=col%>')
    .html("<div style='float: left; width: 100%'><img src='css/ajax-loader2.gif' /></div>");
var url='CoreFetchCategoryHandler.jsp';
ajaxManager.add({
    success: function(html) {
        $('#col<%=col%>').html(html);
    },
    type: "POST",
    url: url,
    data: "<%=baseString%><%=keywordsString%>category=<%=columnnCategory%>&showItems=30",
    cache: true,
    error: function(a, b) {},
    abort: function() {
        $.manageAjax.clear("cacheQueue", true)
    }
});

Can anybody help me with this? Thanks!

Answer 1

I would suggest you take more control of your requests rather than (or as well as?) using the Queue plugin.

Have a look at the ajaxStart(), ajaxStop() and ajaxComplete() functions. As soon as you start an Ajax request (using ajaxStart()), perhaps set a flag if necessary that you can check before the other columns' data is loaded or refreshed. This event fires whenever an AJAX request begins and there is none already active. Using this approach, you can enable or disable your click events or the DOM elements attached to them so that users are forced to wait until an Ajax request is complete before they can initiate the next one.

Similarly, the ajaxStop() function fires whenever all AJAX requests have ended. This way, you can exert more granular control over the order in which your data is loaded.