jQuery Mobile is notorious for having a strange hash navigation, even worse, it can be used for unwanted navigation, thus breaking your page navigation history order. So how can we fix it?
 
This behaviour is usually not a problem, at least when jQuery Mobile is used for hybrid mobile development. Unfortunately, classic web development is something completely different. Let me show you how to fix this “problem”.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 
Update: My another article coveres a more complex real world example of this functionality.
 

Code

 
All we need to do is use this code snippet:
 
$(document).on("mobileinit", function () {
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
    $.mobile.changePage.defaults.changeHash = false;
});
 
It is worth to know, this code must be executed after jQuery initialization but before jQuery Mobile initialization. For those of you who don’t know it already, initial jQuery Mobile configurations can only be set during the mobileinit event. It needs to look like this:
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
    $(document).on("mobileinit", function () {
        $.mobile.hashListeningEnabled = false;
        $.mobile.pushStateEnabled = false;
    });
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
 

Working example

 
Final code should look like this example:
 
<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        $(document).on("mobileinit", function () {
          $.mobile.hashListeningEnabled = false;
          $.mobile.pushStateEnabled = false;
          $.mobile.changePage.defaults.changeHash = false;
        });
    </script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
    <script>
    $(document).on('pagebeforeshow', '#index', function(){ 
        $(document).on('click', '#open-next-page', function(){ 
            $.mobile.changePage("#second", {transition: 'pop'});  
        });
    });
    </script>
</head>
<body>
<div data-role="page" id="index">
    <div data-role="header">
        <h1>Sample</h1>
    </div>
    <div data-role="content">
        <p></p>
        <p><a id="open-next-page" data-role="button">Open page 2</a></p>
    </div>
</div>
<div data-role="page" id="second">
    <div data-role="header">
        <a data-rel="back">Back</a>
        <h1>Page 2</h1>
    </div>
    <div data-role="content">
        This is page 2 content
    </div>
</div>  
</body>
</html>
 
Working Plunker example can be found here:
 
Demo
 
Embedded example:
 
 
You already guessed it, this code is useless because we can’t see hash navigation inside an iframe window. I put it here so you can easily copy working example code.
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs: