Preventing a running event from execution in javascript/jQuery

Question

I am having a drop down as follows.

<select id="mySelect">
<option value="one">one</option>
<option value="two">Two</option>
</select>

I am having a change event handler which gets invoked when user selects Two, which is as follows .

$('select#mySelect').on('change',function(){

   if(//Two is selected){
      display_message("Processing....<a id='manual'>Try Manually</a>");
      //an ajax call which gets the content from server 
      //if successful display another drop down using the content retrieved from server
      //else 
       display_message("Processing failed...<a id='manual'>Try Manually</a>");
   }else{
     $('div#content').html("<input type='text' name='name' />");
   }

});

Also, I am having another click event handler which gets invoked when user clicks on Try Manually, which is as follows.

$('#manual').on('click',function(){     
  $('div#content').html("<input type='text' name='name' />");
});

So, when user selects Two ,then a message - 'Processing...TryManually' gets displayed and then after successful ajax call a drop down gets displayed.

If ajax call took long time then message stays on screen. During this time if user clicks on Try Manually, then before displaying text box I should cancel the running 'change' event handler.

How to achieve this ?

The thing you are trying to cancel is not the actual change event but rather the ajax call, which can be achieved with abort() as seen here: http://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery — Eugen Timm, May 26 '14 at 09:57
At this case I should make a global object which is used for ajax calls (xhr as shown in the question you posted), so that it would be available for other click handler also.Anyway it worked . Thanks. — Arun Rahul, Jun 05 '14 at 18:25

score 0 · Accepted Answer · answered May 26 '14 at 09:54

You could have a global variable, so that you can cancel the event if it is onscreen, like this:

var disableEvent = false;

$('select#mySelect').on('change',function(){
   if (disableEvent) return false;

   if(//Two is selected){
      display_message("Processing....<a id='manual'>Try Manually</a>");

      disableEvent = true;

      //an ajax call which gets the content from server 
      //if successful display another drop down using the content retrieved from server
      //else 
       display_message("Processing failed...<a id='manual'>Try Manually</a>");

       disableEvent = false;
   }else{
     $('div#content').html("<input type='text' name='name' />");
   }

});

Preventing a running event from execution in javascript/jQuery

1 Answers1