I am having a drop down as follows.
JavaScript
x
5
1
<select id="mySelect">
2
<option value="one">one</option>
3
<option value="two">Two</option>
4
</select>
5
I am having a change event handler which gets invoked when user selects Two, which is as follows .
JavaScript
1
14
14
1
$('select#mySelect').on('change',function(){
2
3
if(//Two is selected){
4
display_message("Processing....<a id='manual'>Try Manually</a>");
5
//an ajax call which gets the content from server
6
//if successful display another drop down using the content retrieved from server
7
//else
8
display_message("Processing failed...<a id='manual'>Try Manually</a>");
9
}else{
10
$('div#content').html("<input type='text' name='name' />");
11
}
12
13
});
14
Also, I am having another click event handler which gets invoked when user clicks on Try Manually, which is as follows.
JavaScript
1
4
1
$('#manual').on('click',function(){
2
$('div#content').html("<input type='text' name='name' />");
3
});
4
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 ?
Advertisement
Answer
You could have a global variable, so that you can cancel the event if it is onscreen, like this:
JavaScript
1
22
22
1
var disableEvent = false;
2
3
$('select#mySelect').on('change',function(){
4
if (disableEvent) return false;
5
6
if(//Two is selected){
7
display_message("Processing....<a id='manual'>Try Manually</a>");
8
9
disableEvent = true;
10
11
//an ajax call which gets the content from server
12
//if successful display another drop down using the content retrieved from server
13
//else
14
display_message("Processing failed...<a id='manual'>Try Manually</a>");
15
16
disableEvent = false;
17
}else{
18
$('div#content').html("<input type='text' name='name' />");
19
}
20
21
});
22