Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery ajax post request overlapped with old ones
    text
    copied!<p>I am building rss feed reader using php and jquery on wamp server.</p> <p>On page load, I have list of websites,</p> <pre><code>&lt;ul class='list'&gt; &lt;li&gt;Site1 &lt;input type='hidden' value='http://site1.rss/' /&gt;&lt;/li&gt; &lt;li&gt;Site2 &lt;input type='hidden' value='http://site2.rss/' /&gt;&lt;/li&gt; &lt;li&gt;Site3 &lt;input type='hidden' value='http://site3.rss/' /&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>For fetching feeds from "getFeed.php" page, I use jquery code,</p> <pre><code>$('.list li').live('click', function() { var url = $(this).find('input').val(); $.post("getFeed.php", {url:url}, function(data) { $('.feed').html(data); }); }); </code></pre> <p>This code is working like a charm. Now the problem occur if I click on another site, before first site's request completes.</p> <p>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.</p> <p>The question is similar to [question]: <a href="https://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery">Abort Ajax requests using jQuery</a></p> <p>I already try this code, but not working</p> <pre><code>$(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); }); }); }) </code></pre> <p>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.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload