Using replaceState with jQuery Mobile to update URL on partial page AJAX refresh

Question

I'm using jQuery Mobile 1.4.2, and have some pages in my app where I use AJAX to refresh parts of the page inline (NOT doing a full "page navigate" in jQM). I'd like to make updates to the current URL without adding history points to track the state of these AJAX operations, so that if a user navigates to a sub-page, and then goes back, they'll be back where they left off (we don't cache pages in the DOM) -- and if they copy/paste the URL into a new browser, it will also look exactly the same.

history.replaceState is perfect for this, but I can't figure out how to properly integrate it with jQuery Mobile. If I call it while performing my AJAX operation, the URL updates correctly. If I navigate to a sub-page, and then go back, however, while the browser address bar shows the correct URL (with modifications), the jQuery Mobile script appears to fetch just the original URL of the page, so the content is not as expected.

I believe jQM is using its own history API/stack, which is where it is storing the original page URL. Are there any APIs in there that I can use that wrap replaceState , or is there a way to notify jQM's history that the page URL has changed without adding a history point? I see $.mobile.navigate() in the docs, but after experimenting with it, it always appears to add a new history point, which I don't want in this scenario.

Answer 1

I believe I've found a workable solution, though it may be a bit fragile. In debugging, it seems jQuery Mobile uses a state object attached to the history that contains a url property, which, when using a popstate compatible browser, is how they determine what URL to go back to. So simply calling history.replaceState with the url parameter is not sufficient. One must also provide a state object containing at least a url property.

It seems there's an internal jQuery Mobile helper function that will take a URL, map it correctly relative to the root, create the state object, and then call history.replaceState . This API is $.mobile.navigate.navigator.squash(newUrl); .

While I generally don't like using internal APIs, in this case, it seems to work very well! It'd probably also be trivial to write your own version of this method to do the equivalent behavior. Hopefully this helps others in the same situation.

Answer 2

I also had this problem, and your solution was the closest to the desired result. The problem is that $.mobile.navigate.navigator.squash(newUrl); will add an extra # in url which can not be accepted.

After several attempts and searches, I managed to use the history.replaceState function without damaging the "BACK" behavior. The secret is to use an absolute path in stateObj object:

var myurl = "https://example.com/page.php?id=123";
var stateObj = { url: myurl }
history.replaceState(stateObj, "", myurl);

I hope it will be useful to others as well.