Reflect the hash of the URI in state.url

* Simplifies hash handling code;
* Avoids the extra replaceState;
* Ensures full URL (with hash) is in `state.url`.

Author: mislav

jquery.pjax.js

@@ -261,6 +261,12 @@ function pjax(options) {
 
     var container = extractContainer(data, xhr, options)
 
+    var url = parseURL(container.url)
+    if (hash) {
+      url.hash = hash
+      container.url = url.href
+    }
+
     // If there is a layout version mismatch, hard load the new url
     if (currentVersion && latestVersion && currentVersion !== latestVersion) {
       locationReplace(container.url)
@@ -317,18 +323,7 @@ function pjax(options) {
 
     // If the URL has a hash in it, make sure the browser
     // knows to navigate to the hash.
-    if ( hash !== '' ) {
-      // Avoid using simple hash set here. Will add another history
-      // entry. Replace the url with replaceState and scroll to target
-      // by hand.
-      //
-      //   window.location.hash = hash
-      var url = parseURL(container.url)
-      url.hash = hash
-
-      pjax.state.url = url.href
-      window.history.replaceState(pjax.state, container.title, url.href)
-
+    if (hash) {
       var name = decodeURIComponent(hash.slice(1))
       var target = document.getElementById(name) || document.getElementsByName(name)[0]
       if (target) $(window).scrollTop($(target).offset().top)

test/app.rb

@@ -21,7 +21,7 @@ def title(str)
 
 after do
   if pjax?
-    response.headers['X-PJAX-URL'] = request.url
+    response.headers['X-PJAX-URL'] ||= request.url
     response.headers['X-PJAX-Version'] = 'v1'
   end
 end
@@ -48,7 +48,17 @@ def title(str)
 end
 
 get '/redirect.html' do
-  redirect "/hello.html"
+  if params[:anchor]
+    path = "/hello.html##{params[:anchor]}"
+    if pjax?
+      response.headers['X-PJAX-URL'] = uri(path)
+      status 200
+    else
+      redirect path
+    end
+  else
+    redirect "/hello.html"
+  end
 end
 
 get '/timeout.html' do

test/unit/pjax.js

@@ -1192,24 +1192,10 @@ if ($.support.pjax) {
     })
   })
 
-  asyncTest("follows redirect with X-PJAX-URL header", function() {
-    var frame = this.frame
-
-    frame.$('#main').on("pjax:success", function() {
-      equal(frame.location.pathname, "/hello.html")
-      equal(frame.$("#main > p").html().trim(), "Hello!")
-      start()
-    })
-    frame.$.pjax({
-      url: "redirect.html",
-      container: "#main"
-    })
-  })
-
   asyncTest("lazily sets initial $.pjax.state", function() {
     var frame = this.frame
 
-    ok(!frame.$.pjax.state)
+    equal(frame.$.pjax.state, null)
 
     frame.$('#main').on("pjax:success", function() {
       start()
@@ -1219,24 +1205,28 @@ if ($.support.pjax) {
       container: "#main"
     })
 
-    ok(frame.$.pjax.state.id)
-    ok(frame.$.pjax.state.url.match("/home.html"))
-    equal(frame.$.pjax.state.container, "#main")
+    var initialState = frame.$.pjax.state
+    ok(initialState.id)
+    equal(initialState.url, "http://" + frame.location.host + "/home.html")
+    equal(initialState.container, "#main")
   })
 
   asyncTest("updates $.pjax.state to new page", function() {
     var frame = this.frame
 
     frame.$('#main').on("pjax:success", function() {
-      ok(frame.$.pjax.state.id)
-      ok(frame.$.pjax.state.url.match("/hello.html"))
-      equal(frame.$.pjax.state.container, "#main")
+      var state = frame.$.pjax.state
+      ok(state.id)
+      equal(state.url, "http://" + frame.location.host + "/hello.html#new")
+      equal(state.container, "#main")
       start()
     })
     frame.$.pjax({
-      url: "hello.html",
+      url: "hello.html#new",
       container: "#main"
     })
+
+    var initialState = frame.$.pjax.state
   })
 
   asyncTest("new id is generated for new pages", function() {

test/unit/pjax_fallback.js

@@ -5,6 +5,10 @@ $.each([true, false], function() {
 var disabled = this == false
 var s = disabled ? " (disabled)" : ""
 
+var ua = navigator.userAgent
+var safari = ua.match("Safari") && !ua.match("Chrome") && !ua.match("Edge")
+var chrome = ua.match("Chrome") && !ua.match("Edge")
+
 module("$.pjax fallback"+s, {
   setup: function() {
     var self = this
@@ -422,4 +426,36 @@ asyncTest("handle form submit"+s, function() {
   frame.$("form").submit()
 })
 
+asyncTest("browser URL is correct after redirect"+s, function() {
+  var frame = this.frame
+
+  this.loaded = function() {
+    equal(frame.location.pathname, "/hello.html")
+    var expectedHash = safari && disabled ? "" : "#new"
+    equal(frame.location.hash, expectedHash)
+    start()
+  }
+
+  frame.$.pjax({
+    url: "redirect.html#new",
+    container: "#main"
+  })
+})
+
+asyncTest("server can't affect anchor after redirect"+s, function() {
+  var frame = this.frame
+
+  this.loaded = function() {
+    equal(frame.location.pathname, "/hello.html")
+    var expectedHash = safari && disabled ? "" : "#new"
+    equal(frame.location.hash, expectedHash)
+    start()
+  }
+
+  frame.$.pjax({
+    url: "redirect.html?anchor=server#new",
+    container: "#main"
+  })
+})
+
 })