I recently implemented an ajax call using the jQuery.everyTime() function. The setup involves a combo box where users can select different graph names, triggering dynamic calls to an ajax function that returns JSON data and populates a chart in the View every 10 seconds.
While everything seems to be working smoothly, I encountered an issue when selecting a new graph name. Instead of just retrieving the new graph data, the old one is also requested simultaneously. This results in multiple requests being sent out, with only the latest one actually being displayed (although all previous requests are visible in Firebug).
This is the code snippet for 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 am looking for a way to cancel the previous ajax calls without having to refresh the page. Is there a method to achieve this, such as adding a "stop" at the beginning of the function? I have come across suggestions like using ajaxName.abort(), but it doesn't seem applicable to my specific case.
Thank you in advance for any insights or assistance.
UPDATE:
Following Travis' suggestion, here is the updated version of the code:
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]);
}
})
});
}
However, the issue of sending old ajax requests still persists.