Question

I have a report in our internal system that can return anywhere from 1 days data to a full years. Because of this, the report can take 0.5 seconds or over 45 seconds to generate everything.

The report lets you modify a bunch of filters, all which when modified, fire off an ajax request very simply:

var ax = $.ajax({
    type: "GET",
    url: "/blah",
    data: values,
    success: function(data) { .. }
});

Now, the problem comes when our wonderful user states "Oh wait! I want this to be from February, not January!". But, a request is already happening since January is a lot of data! So, the user switches the date option to February and I can see the Javascript console sending out a second request. Now we have two going and it’s a race!

/report/?start_date=January (Still Loading…)

/report/?start_date=February (Hey, I’m here now too!)

Then, usually the smaller one will load sooner, but then the other one loads and it over-writes the one they already had .. hmm 🙂

I’ve tried using ax.abort() placed after the declaration of the ax variable as mentioned here but it doesn’t seem to be working.

So now I wonder, what am I missing? I just want to kill the current request (client side, I know I can’t do anything about it on the server side) as soon as the user changes some options so I don’t have 2 or more requests going at the same time. Setting async: false is not an option as it just locks the user out.

Thanks in advance for your help.

Answer 1

You may take a look at the ajaxmanager plugin.