stop ajax jquery load on submit

Question

I have a jquery ex like this..

jQuery(document).ready(function() {
   var refreshId = setInterval(function() {
      jQuery("#results").load('random.php?randval='+ Math.random()+'&hours='+jQuery('#hours').val()+'&mins='+jQuery('#mins').val()+'&seconds='+jQuery('#seconds').val());
      jQuery("#time_spent").val(jQuery("#results").html());
   }, 1000);
});

and a submit button like this

<input type="submit" name="submit" value="Stop" id="submit" />

Now if the submit button is clicked the ajax jquery load should be stopped atonce since the time interval is 1 second.

How to do . please help thanks Haan

Hi, you can format your source-code by putting four spaces at the beginning of each line *(it can be done using the `{}` button on top of the editor)* -- I've done it for you, this time ;; for more informations about formating, see http://stackoverflow.com/editing-help — Pascal MARTIN, Mar 30 '11 at 11:10

score 3 · Answer 1 · answered Mar 30 '11 at 11:14

3

It sounds like you're doing an Ajax refresh on a timer, but when a form is submitted, you want to cancel the refreshing. If that's the case, when your form is submitted, you'll want to use clearInterval() to cancel the timer.

$('form').submit(function(){
    clearInterval(refreshId);
});

Or you might be able to get away with doing this right in the submit button, depending on the scope of refreshId.

<input onclick="clearInterval(refreshId);return(true);" type="submit" name="submit" value="Stop" id="submit" />

answered Mar 30 '11 at 11:14

Dutchie432

28,798
20
92
109

Looking at your sample and the question again I think you have definitely got a better grasp of what the OP is asking for. Pretty difficult question to decipher. Up vote! – Treffynnon Mar 30 '11 at 11:15
@decipher: thanks a lot. works perfect. but gettin a warning like this. "refreshId is not defined" - how to solve this – hjaffer2001 Mar 30 '11 at 12:25

cander · Answer 2 · 2011-03-30T13:52:11.310

1

If you want to prevent #result from being updated after submitting the form, you should use a callback from the get request and check if you should update #result before putting the ajax result into it.

var refreshId = -1;
jQuery(document).ready(function() {
  var stop = false;
  refreshId = setInterval(function() {
      var data = {
        randval: Math.random(),
        hours: jQuery('#hours').val(),
        mins: jQuery('#mins').val(),
        seconds: jQuery('#seconds').val()
      };

     jQuery.get('random.php', data, function(data){
       if (!stop) {
        jQuery("#results").html(data);
        jQuery("#time_spent").val(data);
       };
     });

  }, 1000);

  jQuery('form').submit(function(){
    stop = true;
    clearInterval(refreshId);
  });

});

edited Mar 30 '11 at 13:52

answered Mar 30 '11 at 11:38

cander

822
1
7
10

thanks a lot. this too works perfect. but gettin a warning like this. "refreshId is not defined" - how to solve this – hjaffer2001 Mar 30 '11 at 12:26
sorry, I forgot to consider the scope. This happens because the `refreshId` variable does not exist in the scope that `clearInterval(refreshId)` is executing in. Moving the refreshId definition outside the `jQuery(document).ready(function() { })` scope should fix this. see changes above – cander Mar 30 '11 at 13:52

score 1 · Accepted Answer · answered Mar 30 '11 at 11:40

How about checking if some variable is true before doing some ajax stuff.

Javascript:

      <script type="text/javascript">
      function stopWorking()
      {
            running = false;
      }
        $(document).ready(function() 
        {
            running = true;
            var refreshId = setInterval(function() {
               if(running!=false)
               {
                  jQuery("#results").load('random.php?randval='+ Math.random()+'&hours='+jQuery'#hours').val()+'&mins='+jQuery('#mins').val()+'&seconds='+jQuery('#seconds').val());
                  jQuery("#time_spent").val(jQuery("#results").html());

               }, 1000);
        });
      </script>

HTML:

<input type="submit" onclick="stopWorking();return(false);" />

After clicking the submit button variable 'running' is set to false ,and all jquery actions are stopped.

score 0 · Answer 4 · answered Mar 30 '11 at 11:13

0

I am going to have a wild stab in the dark at what you are asking for. So if the ajax request takes more than 1 second it should be killed?

Try setting a timeout using jQuery's $.ajax() function.

answered Mar 30 '11 at 11:13

Treffynnon

21,365
6
65
98

score 0 · Answer 5 · edited May 23 '17 at 12:26

0

You need to use a different ajax method - like $.get or $.post etc... because these methods return an XMLHttpRequest object that can be stored in a variable, and later used to abort the request.

see: Abort Ajax requests using jQuery

edited May 23 '17 at 12:26

Community

1
1

answered Mar 30 '11 at 11:16

Billy Moon

57,113
24
136
237

`$.load()` also passes `XMLHttpRequest` into the callback function see http://api.jquery.com/load/ – Treffynnon Mar 30 '11 at 11:17

stop ajax jquery load on submit

5 Answers5