Merge branch 'mixed-containers'

Fixes #419

Author: mislav

jquery.pjax.js

@@ -423,7 +423,7 @@ if ('state' in window.history) {
 // You probably shouldn't use pjax on pages with other pushState
 // stuff yet.
 function onPjaxPopstate(event) {
-  var previousState = pjax.state;
+  var previousState = pjax.state
   var state = event.state
 
   if (state && state.container) {
@@ -432,22 +432,26 @@ function onPjaxPopstate(event) {
     // page.
     if (initialPop && initialURL == state.url) return
 
-    // If popping back to the same state, just skip.
-    // Could be clicking back from hashchange rather than a pushState.
-    if (pjax.state && pjax.state.id === state.id) return
+    var direction, containerSelector = state.container
 
-    var container = $(state.container)
-    if (container.length) {
-      var direction, contents = cacheMapping[state.id]
+    if (previousState) {
+      // If popping back to the same state, just skip.
+      // Could be clicking back from hashchange rather than a pushState.
+      if (previousState.id === state.id) return
+
+      // Since state IDs always increase, we can deduce the navigation direction
+      direction = previousState.id < state.id ? 'forward' : 'back'
+      if (direction == 'back') containerSelector = previousState.container
+    }
 
-      if (pjax.state) {
-        // Since state ids always increase, we can deduce the history
-        // direction from the previous state.
-        direction = pjax.state.id < state.id ? 'forward' : 'back'
+    var container = $(containerSelector)
+    if (container.length) {
+      var contents = cacheMapping[state.id]
 
+      if (previousState) {
         // Cache current container before replacement and inform the
         // cache which direction the history shifted.
-        cachePop(direction, pjax.state.id, cloneContents(container))
+        cachePop(direction, previousState.id, cloneContents(container))
       }
 
       var popstateEvent = $.Event('pjax:popstate', {

test/unit/pjax.js

@@ -351,6 +351,40 @@ if ($.support.pjax) {
     equal(frame.location.search, "?foo=1&bar=2")
   })
 
+  asyncTest("mixed containers", function() {
+    var frame = this.frame
+
+    frame.$.pjax({
+      url: "fragment.html",
+      container: "#main"
+    })
+
+    frame.$("#main").one("pjax:end", function() {
+      frame.$.pjax({
+        url: "aliens.html",
+        container: "#foo"
+      })
+
+      frame.$("#foo").one("pjax:end", function() {
+        equal(frame.$("#main > #foo > ul > li").last().text(), "aliens")
+
+        goBack(frame, function() {
+          equal(frame.$("#main > #foo").text().trim(), "Foo")
+
+          goBack(frame, function() {
+            equal(frame.$("#main > ul > li").first().text(), "home")
+
+            goForward(frame, function() {
+              goForward(frame, function() {
+                equal(frame.$("#main > #foo > ul > li").last().text(), "aliens")
+                start()
+              })
+            })
+          })
+        })
+      })
+    })
+  })
 
   asyncTest("only fragment is inserted", function() {
     var frame = this.frame