Abort A Previous Ajax Request In jQuery

When using Ajax there will be changes ,where you will need to cancel the Ajax call. I found Aborting is useful while building a search as you type feature and I would abort the previous search and request a new Ajax search each time they typed a new letter. Since their old word has changed to a new word and therefore new meaning, completing the old request is having no purpose or reason since the new word is an entirely different meaning.

Luckily jQuery has made this almost easy as you can see by my example below.

Html

<input id="searchbox" name="searchbox" type="text" />
<div id="data"></div>

1 2	<input id="searchbox" name="searchbox" type="text" /> <div id="data"></div>

JQuery

jQuery(document).ready(function(){
    var currentRequest = null;
    jQuery('#searchbox').keyup(function() {
        var text = jQuery(this).val();
        currentRequest = jQuery.ajax({
            type: 'POST',
            data: 'search_text=' + text,
            url: 'AJAX_URL',
            beforeSend : function()    {          
                if(currentRequest != null) {
                    currentRequest.abort();
                }
            },
            success: function(data) {
                jQuery('#data').html(data).show();
            }
        });
    });
  });

jQuery(document).ready(function(){

var currentRequest = null;

jQuery('#searchbox').keyup(function() {

var text = jQuery(this).val();

currentRequest = jQuery.ajax({

type: 'POST',

data: 'search_text=' + text,

url: 'AJAX_URL',

beforeSend : function() {

if(currentRequest != null) {

currentRequest.abort();

}

success: function(data) {

jQuery('#data').html(data).show();

}

});

Now you can type something for each keyup() event it will cancel the previous Ajax request and it will make new request to the sever.That is it, Simple and straightforward isn’t it.

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

Arjun

I am Arjun from Hyderabad (India). I have been working as a software engineer from last 7+ years, and its my passion to learn new things and implement them as a practice. Aside from work, I likes gardening and spending time with pets.