CODEWITHSUNDEEP
javascriptjqueryjquery-mobilepushstate
PurkkaKoodari
PurkkaKoodari

Reputation: 6809

Enabling the back button without allowing manual changes through the URL

I have a jQuery Mobile application I'm developing. jQuery Mobile uses pushState by default to allow the browser's back button to work dynamically.

Now, my application is meant to change its pages dynamically, and the user should always arrive at the front page when loading the application.

The problem is, jQuery Mobile updates the page's hash in the URL whenever I go to a page in the application. Now, if the user enters the same hash in the application, jQuery Mobile will automatically take them to that page (when I'd want them to be handled by my code). Also, if they refresh the page, I'd like my code to take them back to where they should be, not directly moved to the hash the URL had.

To prevent this, I tried to add the following code in the mobileinit event:

$.mobile.hashListeningEnabled = false;

This works, but it also disables the pushState updates, which in turn breaks the back button, which I don't want to happen.

What would be the best way to allow users to use the back button while still not allowing manual movement between pages?

Upvotes: 9

Views: 439

Answers (2)

Binvention
Binvention

Reputation: 1077

one option here is to set the data-url for each of your pages you simply add the attribute to your page div and set it equal to your home page that way the url for the page shown in the history doesnt have the hash values (or you could include your own values). the documentation on this is better explained in the jquery mobile documentation

Upvotes: 0

Dekron
Dekron

Reputation: 1212

I don't have so much element to describe a possible and accurate solution for your problem, but an easy one should be this:

on every link on your page that take to another one attach a function like this:

$(DOMElem).on("click",function(){
  sessionStorage["urlChangedByLink"] = "true";
});

On the same page you can try if there are no problem with this:

$( window ).on( "navigate", function( event, data ) {
  if(sessionStorage["urlChangedByLink"] == "true")
    $.mobile.hashListeningEnabled = true;
  else
    $.mobile.hashListeningEnabled = false;
});

Or this, on the other page you check if this storage variable exsist and than make your operation:

if(sessionStorage["urlChangedByLink"] == "true")
  continue navigation...
else
  window.history.back();

Upvotes: 6

Related Questions