Merge branch 'abort-xhr'

Author: mislav

jquery.pjax.js

@@ -349,11 +349,7 @@ function pjax(options) {
   }
 
   // Cancel the current request if we're already pjaxing
-  var xhr = pjax.xhr
-  if ( xhr && xhr.readyState < 4) {
-    xhr.onreadystatechange = $.noop
-    xhr.abort()
-  }
+  abortXHR(pjax.xhr)
 
   pjax.options = options
   var xhr = pjax.xhr = $.ajax(options)
@@ -420,6 +416,12 @@ if ('state' in window.history) {
 // You probably shouldn't use pjax on pages with other pushState
 // stuff yet.
 function onPjaxPopstate(event) {
+
+  // Hitting back or forward should override any pending PJAX request.
+  if (!initialPop) {
+    abortXHR(pjax.xhr)
+  }
+
   var previousState = pjax.state
   var state = event.state
 
@@ -536,6 +538,15 @@ function fallbackPjax(options) {
   form.submit()
 }
 
+// Internal: Abort an XmlHttpRequest if it hasn't been completed,
+// also removing its event handlers.
+function abortXHR(xhr) {
+  if ( xhr && xhr.readyState < 4) {
+    xhr.onreadystatechange = $.noop
+    xhr.abort()
+  }
+}
+
 // Internal: Generate unique id for state object.
 //
 // Use a timestamp instead of a counter since ids should still be

test/unit/pjax.js

@@ -845,6 +845,46 @@ if ($.support.pjax) {
     }, 0)
   }
 
+  asyncTest("clicking back while loading cancels XHR", function() {
+    var frame = this.frame
+
+    frame.$('#main').on('pjax:timeout', function(event) {
+      event.preventDefault()
+    })
+
+    frame.$("#main").one('pjax:send', function() {
+
+      // Check that our request is aborted (need to check
+      // how robust this is across browsers)
+      frame.$("#main").one('pjax:complete', function(e, xhr, textStatus) {
+        equal(xhr.status, 0)
+        equal(textStatus, 'abort')
+      })
+
+      setTimeout(function() {
+        frame.history.back()
+      }, 250)
+
+      // Make sure the URL and content remain the same after the
+      // XHR would have arrived (delay on timeout.html is 1s)
+      setTimeout(function() {
+        var afterBackLocation = frame.location.pathname
+        var afterBackTitle = frame.document.title
+
+        setTimeout(function() {
+          equal(frame.location.pathname, afterBackLocation)
+          equal(frame.document.title, afterBackTitle)
+          start()
+        }, 1000)
+      }, 500)
+    })
+
+    frame.$.pjax({
+      url: "timeout.html",
+      container: "#main"
+    })
+  })
+
   asyncTest("popstate going back to page", function() {
     var frame = this.frame