Question

I am building rss feed reader using php and jquery on wamp server.

On page load, I have list of websites,

<ul class='list'>
     <li>Site1 <input type='hidden' value='http://site1.rss/' /></li>
     <li>Site2 <input type='hidden' value='http://site2.rss/' /></li>
     <li>Site3 <input type='hidden' value='http://site3.rss/' /></li>
</ul>

For fetching feeds from “getFeed.php” page, I use jquery code,

$('.list li').live('click', function() {
     var url = $(this).find('input').val();
     $.post("getFeed.php",
            {url:url},
            function(data) {
                 $('.feed').html(data);
            });
});

This code is working like a charm. Now the problem occur if I click on another site, before first site’s request completes.

At that time if first site’s response is slow, then I got result from second site as it should. But when first site response late, result changes to first site.

The question is similar to [question]: Abort Ajax requests using jQuery

I already try this code, but not working

$(document).ready(function() {
     var xhr;

     $('.list li').live('click', function() {
          xhr.abort();
          alert("testing flag");
          var url = $(this).find('input').val();
          xhr = $.post("getFeed.php",
                 {url:url},
                 function(data) {
                      $('.feed').html(data);
                 });
     });
})

But, this code fails sending requests. So, I put one testing alert flag after xhr.abort() line. But alert also not working. May be problem in xhr.abort(); line.

Answer 1

xhr.abort(); will cause an error since xhr is undefined the first time you call the function, Try something like xhr && xhr.abort();