jQuery Mobile - How to change page behaviour depending on previous page

Question

I have three pages in my app: #main, #new and #existing.

Everytime #new is loaded, I want it to detect if it came from #menu or #existing. Depending on this information it should either do nothing or populate its form.

How can I achieve this both in terms of the right command for previous page and handling the DOM correctly?

Answer 1

According to your # these pages need to be dom elements. Just use the variable in javascript and check this in every step.

• Create a new variable like lastPage
• On every click, I prefer to use data-foo like HTML5 data attribute.
• Change lastPage according to navigation.

• And do after that what you really want.

    var lastPage = ''; /* This code from jQuery Mobile, link is below the code. */ // Define a click binding for all anchors in the page $( "a" ).on( "click", function( event ){ // Prevent the usual navigation behavior event.preventDefault(); // Alter the url according to the anchor's href attribute, and // store the data-foo attribute information with the url $.mobile.navigate( this.attr( "href" ), { lastPage: this.attr("data-foo") // store data here }); // Hypothetical content alteration based on the url. Eg, make // an AJAX request for JSON data and render a template into the page. alterContent( this.attr("href") ); }); 

HTML Example

<a href="foo.bar" data-foo="main">Main Page</a>
<a href="foo.bar" data-foo="new">New Page</a>
<a href="foo.bar" data-foo="existing">Existing Page</a>

You can make data-anythingyouwant. Only the data is important, after that you can use everything. It just an HTML5 DOM attribute.

Edit:

I suggest you to check navigation page. You can understand better the concept after that. Code Source: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/navigation/

Answer 2

Take advantage of jQuery-Mobile page events, such as pagebeforehide and pageshow .

Demo

Store current page's id before navigating away.

var prevPage;

$(document).on('pagebeforehide', function () {
  prevPage = $.mobile.activePage[0].id;
});

When destination page is active, retrieve the stored previous page id .

$(document).on('pageshow', function () {
  $(this).find('.destination').text('Previous Page: ' + prevPage);
});