Question

I’m attempting to track ajax requests in an array and cancel any existing requests before the next one fires off, but I’m getting a $(this).abort() function does not exist. Any ideas?

   var ajaxPool = new Array();

     $('.search_input').live('keyup', function() {

            $.each(ajaxPool, function(){

                $(this).abort();

            });

            var query = $('.search_input').val();   

            if (query == '' || query == ' ') {

                $('.search_results').remove();
                return false;
            }

            var request = $.ajax({ type: 'GET',
                     url:  '{{ path('Search') }}/' + query,

                     beforeSend:function() {


                     },
                     success:function(data){

                         $('.search_results').remove();
                         $('.search_bar').append(data);

                     },                         
                     error:function(){

                         alert("Could not complete search.");

                     }
                 });

                 ajaxPool.push(request);
        }); 

Answer 1

When you iterate your ajaxPool array with $.each, this is already the jqXHR object that contains the abort() method. So you should not try to convert it to a jQuery object with $. Use this:

$.each(ajaxPool, function(){
    this.abort();
});