Fix executing SCRIPT tags on pjax back/forward

After jQuery eval's a SCRIPT tag for the first time, it tags it with an
internal flag "globalEval" that is kept even after cloning and prevents
the same script from getting executed again.

Now reset that property when writing to pjax cache, so that back/forward
navigation properly re-executes inline SCRIPT tags.

Author: mislav

jquery.pjax.js

@@ -364,7 +364,7 @@ function pjax(options) {
   if (xhr.readyState > 0) {
     if (options.push && !options.replace) {
       // Cache current container element before replacing it
-      cachePush(pjax.state.id, context.clone().contents())
+      cachePush(pjax.state.id, cloneContents(context))
 
       window.history.pushState(null, "", options.requestUrl)
     }
@@ -447,7 +447,7 @@ function onPjaxPopstate(event) {
 
         // Cache current container before replacement and inform the
         // cache which direction the history shifted.
-        cachePop(direction, pjax.state.id, container.clone().contents())
+        cachePop(direction, pjax.state.id, cloneContents(container))
       }
 
       var popstateEvent = $.Event('pjax:popstate', {
@@ -544,6 +544,16 @@ function uniqueId() {
   return (new Date).getTime()
 }
 
+function cloneContents(container) {
+  var cloned = container.clone()
+  // Unmark script tags as already being eval'd so they can get executed again
+  // when restored from cache. HAXX: Uses jQuery internal method.
+  cloned.find('script').each(function(){
+    if (!this.src) jQuery._data(this, 'globalEval', false)
+  })
+  return cloned.contents()
+}
+
 // Internal: Strips named query param from url
 //
 // url - String

test/unit/pjax.js

@@ -125,12 +125,31 @@ if ($.support.pjax) {
     var frame = this.frame
 
     frame.evaledScriptLoaded = function() {
-      equal(2, frame.evaledSrcScriptNum)
-      equal(true, frame.evaledInlineScript)
-      start()
+      equal(frame.evaledSrcScriptNum, 2)
+      deepEqual(frame.evaledInlineLog, ["one"])
+
+      frame.$.pjax({
+        url: "scripts.html?name=two",
+        container: "#main"
+      })
+
+      frame.$("#main").one("pjax:end", function() {
+        deepEqual(frame.evaledInlineLog, ["one", "two"])
+
+        goBack(frame, function() {
+          deepEqual(frame.evaledInlineLog, ["one", "two", "one"])
+
+          goForward(frame, function() {
+            deepEqual(frame.evaledInlineLog, ["one", "two", "one", "two"])
+            equal(frame.evaledSrcScriptNum, 2)
+            start()
+          })
+        })
+      })
     }
+
     frame.$.pjax({
-      url: "scripts.html",
+      url: "scripts.html?name=one",
       container: "#main"
     })
   })
@@ -927,7 +946,6 @@ if ($.support.pjax) {
     })
   })
 
-  // Test is fragile
   asyncTest("no initial pjax:popstate event", function() {
     var frame = this.frame
     var count = 0
@@ -944,19 +962,16 @@ if ($.support.pjax) {
       } else if (count == 3) {
         equal(frame.location.pathname, "/env.html")
         frame.history.back()
-        setTimeout(function() { window.iframeLoad(frame) }, 1000)
       } else if (count == 4) {
         equal(frame.location.pathname, "/hello.html")
         frame.history.back()
-        setTimeout(function() { window.iframeLoad(frame) }, 1000)
       } else if (count == 5) {
         equal(frame.location.pathname, "/home.html")
         frame.history.forward()
-        setTimeout(function() { window.iframeLoad(frame) }, 1000)
       } else if (count == 6) {
-        // Should skip pjax:popstate since there's no initial pjax.state
         frame.$('#main').on('pjax:popstate', function(event) {
           if (count == 6) {
+            // Should skip pjax:popstate since there's no initial pjax.state
             ok(event.state.url.match("/hello.html"), event.state.url)
             ok(false)
           } else if (count == 7) {
@@ -969,11 +984,13 @@ if ($.support.pjax) {
           if (count == 6) {
             count++
             frame.history.forward()
-            setTimeout(function() { window.iframeLoad(frame) }, 1000)
-          } else {
-            setTimeout(function() { start() }, 1000)
           }
         })
+
+        // Browsers that don't fire initial "popstate" should just resume
+        setTimeout(function() {
+          start()
+        }, 100)
       }
     }
 

test/views/scripts.erb

@@ -1,5 +1,8 @@
 <p>Got some script tags here</p>
 <script type="text/javascript" src="/test/evaled.js"></script>
 <script src="/test/evaled.js"></script>
-<script type="text/javascript">window.evaledInlineScript = true</script>
+<script type="text/javascript">
+  window.evaledInlineLog = window.evaledInlineLog || []
+  window.evaledInlineLog.push('<%= params[:name] %>')
+</script>
 <script type="text/javascript">window.parent.iframeLoad(window)</script>