Sometimes you’ll want to have control over back and forward button handling in jQuery Mobile and you’ll find yourself wondering how to do that. Once upon a time jQuery Mobile didn’t have such functionality but going from version 1.4 we can rely on navigate event. Before we proceed, navigate event can only be found in jQuery Mobile so don’t expect it in pure jQuery. This could change in a near future when jQuery Foundation developers merge jQuery Mobile with jQuery UI.
 
Navigation system is used for page loading and it handles the process of standard links and form submission hijacking thus routing them as an AJAX request. Next, a navigate event binding helps in responding to backward and forward navigation via the browsers history API. Last thing, this will handle browser back and forward buttons, jQuery Mobile application back and forward buttons (you will find them in the example below).
 
 

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.


 

Example:

 
$(window).on("navigate", function (event, data) {
  var direction = data.state.direction;
  if (direction == 'back') {
    // do something
  }
  if (direction == 'forward') {
    // do something else
  }
});
 
As you can see this solution is extremely easy, we only need to look at state.direction to find a correct destination.

Working example:

 
Working Plunker example can be found here:
 
Demo
 
Embedded example:
 
 

Code:

 
Usually, I don’t publish code directly into an article but recent jsFiddle problems with jQuery Mobile are forcing me to rethink this stance. So going from today I will publish directly, in case code hosting sites are down:
 
HTML:
 
<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
        <script src="script.js"></script>        
    </head>
    <body>     
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    First Page
                </h3>
                <a class="ui-btn-right showNextPage">Next</a>
            </div>
            
            <div data-role="content">

            </div>
            
            <div data-role="footer" data-position="fixed">
                
            </div>
        </div> 
        <div data-role="page" id="second" data-theme="a" >
            <div data-role="header">
                <h3>
                    Second Page
                </h3>
                <a class="ui-btn-left showPrevPage">Back</a>
            </div>
            
            <div data-role="content">
                
            </div>
            
            <div data-role="footer" data-position="fixed">
                
            </div>
        </div>  
    </body>
</html>
 

JavaScript:

 
$(window).on("navigate", function(event, data) {
  var direction = data.state.direction;
  if (direction == 'back') {
    alert('Going back');
  }
  if (direction == 'forward') {
    alert('Going forward');
  }
});

$(document).on('click', '.showNextPage', function() {
  $.mobile.navigate("#second", {
    transition: "slide"
  });
});

$(document).on('click', '.showPrevPage', function() {
  $.mobile.navigate("#index", {
    transition: "slide"
  });
});
 

Final notes:

 
Feel free to leave me a comment below if you need more information or if you want to see another example.
 

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:






  • David Bataille

    Thanks for yours articles, I really appreciate, this help me a lot for my website. I was just looking for the way to go back to my home page. Indeed, I have to navigate through too many pages and using the back button was too long.. So you give me the solution 😉

    David

  • lech-u

    Bad direction recognition in case with “first”, “second”, “first” pages in history and we are on “second” page (click forward -> “Going back”). Click back/forward detection not work at all on Chrome for iOS (v46).