how to stop ajax call and start a new one with new parameters?

Question

I've made an ajax call with a jQuery.everyTime() function. I got a combo box where i select some graph names and dynamically calls to an ajax function, returns a json and creates the chart in the View every 10 seconds.

Everything goes fine but when i select another graph name and click in the function, i don't only have the new graph but i got the old one as well (as a request), so every time i click in a new one (let's say 8 names) i would get 8 requests simultaneously and ofc the latest will be shown (but if you check in firebug you will see the 8 requests).

This is my ajax function:

var selected = $("#name_list :selected").val();

    $(".title_graph").text(selected);

    var j = jQuery.noConflict();
    j("#hour").everyTime(10000,function(i){
        j.ajax({
          type: "GET",
          url: "getchartdata?graphName=" + selected +"&subgroup=hour",
          cache: false,
          success: function(jsonData){
              var data = eval(jsonData);
              drawChart(data, data[0][0], data[0][1]);
          }
        })
    });

I would like to cancel previus ajax calls without having to refresh the page. Am i able to do that? like put some kind of "stop" at the very beginning of the function, don't really know. I've seen ajaxName.abort() solution, but i believe it couldn't be applied to what i need.

Thanks in advance.

ADDED:

This is how it looks now with Travis' suggestion:

function getChartsByGraphName() {
    var selected = $("#name_list :selected").val();
    var ajaxCallHour;
    $(".title_graph").text(selected);

    var j = jQuery.noConflict();
    j("#hour").everyTime(10000,function(i){
        ajaxCallHour && ajaxCallHour.abort();
        ajaxCallHour = j.ajax({
          type: "GET",
          url: "getchartdata?graphName=" + selected +"&subgroup=hour",
          cache: false,
          success: function(jsonData){
              var data = eval(jsonData);
              drawChart(data, data[0][0], data[0][1]);
          }
        })
    });
    }

But it's still sending old ajax requests.

possible duplicate of [Abort Ajax requests using jQuery](http://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery) — Makoto, Apr 27 '13 at 20:20

score 2 · Accepted Answer · edited May 23 '17 at 12:18

2

See this answer: Abort Ajax requests using jQuery

Create a variable outside of your everyTime that stores the xhr, then stop it before issuing a new one.

var xhr;

j("#hour").everyTime(10000,function(i){
    xhr && xhr.abort();
    xhr = j.ajax();
});

edited May 23 '17 at 12:18

Community

1
1

answered Apr 25 '13 at 20:25

Travis Watson

1,729
1
18
25

why do you add the double && in there? xhr && xhr.abort(); or was it a typo error ? didn't work :( keeps sending the old ajax requests – msqar Apr 25 '13 at 20:42
@msqar, If the xhr variable doesn't have a value yet (on the first execution of your `everyTime` function), invoking the `abort()` method will throw an error. That's just a quick way to ensure there is an object before attempting to abort the request. Can you edit your question and put your new code at the bottom? **Leave your first code for history.** – Travis Watson Apr 25 '13 at 21:05
Done mate, i've updated my question with the current function. @Travis – msqar Apr 26 '13 at 14:17
@msqar, Okay perhaps I misunderstood. Once an AJAX request is initiated, there is no easy way to stop it from hitting the server, or to stop the server from processing it. The only thing you can do is stop the web browser from listening to the response (which means your `success()` handler will never fire. – Travis Watson Apr 26 '13 at 15:25
Ohhhh :'( so how do i do that @Travis ? do you know? how can i stop the web browser from listening? – msqar Apr 26 '13 at 15:27
@msqar, that's what the `.abort()` does. Your `.success()` callback should not fire if the `.abort()` **for that request** is invoked before completion. Now, if you look at your code, notice the earliest the abort can occur is 10,000 milliseconds, or 10 full seconds after your initial request. Unless you have a very slow server, or an incredibly difficult request, it will almost definitely complete well before you have a chance to abort it. Also, I don't know how that `everyTime` plugin is working, but if you're calling `getChartsByGraphName()` multiple times, you're probably in trouble. – Travis Watson Apr 26 '13 at 15:37
Exactly @Travis, i'm calling getChartsByGraphName() every time I select another option in the combo with the graph names. So i get a request stack D: imagine that currently, this function has 3 ajax calls for hour, day and month statistics, so all is multiplied by 3. If i call 10 times to the javascript function i would get 30 ajax parallel calls D: What do you suggest me to do? :/ – msqar Apr 26 '13 at 15:40
@msqar, move the `var ajaxCallHour;` outside your function, put the `abort` line just inside your function. Also, I don't see why you're using `everyTime`... what does that get you? Can you remove that and unwrap that code? – Travis Watson Apr 26 '13 at 16:52
i made another approach :) and it works now ^_^ just made the page reload, not a big deal. Thanks for all your help Travis! – msqar Apr 26 '13 at 18:20

how to stop ajax call and start a new one with new parameters?

1 Answers1