Cancel setInterval for ajax on button click

Question

I have a series of buttons and foreach button I have a seperate .click(function() {

ie

$("#approved").button().click(function() {
$("#waiting_approval").button().click(function() {
$("#department_waiting_approval").button().click(function() {
$("#department").button().click(function() {

I have the setInterval for ajax which refreshes the data in that div. The problem i face is once the user clicks on a different button I would like to stop the current button click ajax call and start the new one.

Hope this makes sense, thanks in advance.

$("#approved").button().click(function() {

setInterval(function(){
    $.ajax({
  type: "GET",
  url: "holidays/academic_days.php?userid='+$('#approved_list').attr('class')",
  dataType: "html",
  success: function(data) {
    jQuery("#approved_list").fadeOut( 10 , function() {
        jQuery(this).html( data);
        $('#approved_list').show();  
    $('#waiting_approval_list').hide();
            $('#department_waiting_approval_list').hide();
            $('#department_logs').hide();
    }).fadeIn( 100 );

  }
 })
}, 100);

});

http://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery — CD.., Sep 20 '12 at 11:11

score 1 · Answer 1 · answered Sep 20 '12 at 11:11

setInterval function returns a handler for that interval object which can later be used to clear that interval using clearInterval for example:

    var handler = setInterval(function(){
      console.log('interval');
    },1000);

    setTimeout(function(){
      clearInterval(handler);
    },5000);

score 1 · Accepted Answer · edited Sep 20 '12 at 12:09

1

This may be helpful:

var thisInterval;
$("#approved").button().click(function() {

   thisInterval=setInterval(function(){
        $.ajax({
      type: "GET",
      url: "holidays/academic_days.php?userid='+$('#approved_list').attr('class')",
      dataType: "html",
      success: function(data) {
        jQuery("#approved_list").fadeOut( 10 , function() {
            jQuery(this).html( data);
            $('#approved_list').show();  
        $('#waiting_approval_list').hide();
                $('#department_waiting_approval_list').hide();
                $('#department_logs').hide();
        }).fadeIn( 100 );

      }
     })
    }, 100);

    });

Make cancel button like this.

$("#cancel").button().click(function() {clearInterval(thisInterval)}

edited Sep 20 '12 at 12:09

Codded

1,256
14
42
74

answered Sep 20 '12 at 11:13

vusan

5,221
4
46
81

Thanks not working quite as expected. Do you know how I can setInterval on a certain part of the ajax success data like (#somediv). So the button would load the whole thing but then setInterval ona certain div and it would just keep loading that div on interval until another button is clicked. – Codded Sep 20 '12 at 12:10
Wasn't we were doing the same thing? It would just keep loading that div on interval until another button(#cancel) is clicked. – vusan Sep 20 '12 at 12:22
I mean the button would load #approved_list and then do the ajax call. Within that call setinterval for #somediv that is nested in the original #approved_list. Therefor it would load #approved_list on button click and only refresh #somediv on interval – Codded Sep 20 '12 at 13:21

Cancel setInterval for ajax on button click

2 Answers2