Surprisingly this is one of the most commonly asked jQuery Mobile questions. There are several ways of passing parameters (data) between jQuery Mobile pages and none of them can cover every possible case.
 
Before we can begin let us go through jQuery Mobile page architecture. There are two distinct page template cases, one is called multi-page template and second one is multi-HTML (I have described them in one of my previous articles). Both cases have completely different solutions for data forwarding.
 
 

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.


 

Multi-page template

 
This is template where every data-role=”page” is part of a single HTML file, as such it is usually easiest solution for data forwarding because everything is already loaded into the DOM and even inactive page can be accessed at any point.
 

Global object

 
As everything is loaded into the DOM we can create a global object for data storing.
 
// Store object
var storeObject = {
    parameter1: null,
    parameter2 : null
}
 
Working jsFiddle example
 
 

Access data from the previous page

 
Another easy example uses pagebeforeshow page event to access previous page data.
 
// Store object
$(document).on('pagebeforeshow', '#second', function(e, data){     
    alert("My name is " + data.prevPage.find('#test-input').val());
});
 
Working jsFiddle example
 
 

Localstorage or Sessionstorage

 
Personally I don’t like this solution that much. It usually works just fine, but it can become extremely confusing if application needs to store more than 5 variables. This can be relatively solved in combination with jQuery object stringification. Basically, you would create a global object, stringify it and save in local storage (but this is a theme for some other article).
 
Only real difference between localstorage and sessionstorage is data longevity. Localstorage is persistent storage while sessionstorage works only during one app session.
 
$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('click', '#change-page-button', function(){     
        // store some data
        if(typeof(Storage)!=="undefined") {
              localStorage.firstname="Dragan";
              localStorage.lastname="Gaic";            
        }
        // Change page
        $.mobile.changePage("#second");
    });    
});

$(document).on('pagebeforeshow', '#second', function(){       
    alert('My name is ' + localStorage.firstname + ' ' + localStorage.lastname);
    // Lets change localStorage data before we go to the next page
    localStorage.firstname="NewFirstNeme";
    localStorage.lastname="NewLastName";    
});

$(document).on('pagebeforeshow', '#third', function(){       
    alert('My name is ' + localStorage.firstname + ' ' + localStorage.lastname);
});
 
Working jsFiddle example
 
 
Continue Reading

  • Joel Anderson

    What is the best way to do this if you have a series of anchor tags (let’s say, in a listview), you point them all to the same “details” page, and you want that “details” page to detect which item in the listview has been clicked?

    • Best way to explain this is to show you a working example. Here’s one of my examples made for Stackoverflow: http://jsfiddle.net/Gajotres/8uac7/ it uses anchor tags. It is a bit more complex then your question but you will get the point.

      • Henrike

        I have been trying to make this work now for a while.
        But there seems to be a problem with the way the listview items are displayed.
        They are not shown as Listview items but as “normal” links ?
        And therefore clicking on them will not trigger the vClick function.
        Do you know how to fix this?

        • If you are adding this items dynamically you will need to enhance markup of dynamically added content. Read more about it here. If this is not a case just mail me your code example and we will solve this together.

      • Esteban Mora

        Hi. A little peace of advice. Please, add comments to your code. It’s hard to figure what you try to do.

        • Any specific part?

          • Esteban Mora

            Yes, everywhere. Your tutorials are great. I’ve read a few of them while trying to build a JQM app. But for us, the novice programmers, its hard
            to figure what every line or piece of code do. It will be easy to understand your tutorials if you match your code with an small explanation if what it does. Per example:

            // Use vclick to capture the clicks on the list “movie-list” and store the value of “data-id” in the object “movieInfo”.
            $(document).on(‘vclick’, ‘#movie-list li a’, function(){ …

            Well, its just a suggestion. 🙂

  • Joel Anderson

    Thanks. That helped a lot. I did, however, have to move the “refresh” on the second page to a “pageinit” event handler, because I kept getting error messages when I tried it your way. Perhaps I’m using a different version of jqm?

    • You did right. My example was a special case so don’t worry about that.

  • Gabe

    Great work but does this only work in jquerymobile 1.2? What about 1.3 or 1.4? Do you have an example for them?

    • What part is not working for you in later jQuery Mobile versions? This code should 100% work up to jQuery Mobile 1.3. I never tested it with jQM 1.4 but for your sake I will do it.

  • ak

    Great tutorial but what about showing the result in the second page with multi-html template?

    For example if I want to use the parameter in the second page as content?

    I tried it but there will be no content generated.

    My function looks like this:

    $(document).on(‘pagebeforeshow’, “#second”,function () {
    var parameters = $(this).data(“url”).split(“?”)[1];
    parameter = parameters.replace(“paremeter=”,””);
    $(‘#content’).html(parameter);
    });

    and my second page like this:

    Second Page

  • Cameron Askew

    I created a plugin which allows URL parameters on embedded jQuery Mobile pages and maintains them in the URL so that page refreshes & going directly to a page works. You can find that plugin here:

    https://github.com/CameronAskew/jquery.mobile.paramsHandler

  • Jaishankar

    I am having one table if i click the row it will fetch some data from another html page and load on that particular row.
    can you give me suggestion how to do that

    • You should ask this question at stackoverflow, don’t forget to show your code (what have you done up to this point). If you never wrote a stackoveflow question take a look at this article.

  • Harish

    Hi, i have a doubt, external from this tutorial. But still let me ask,

    Suppose I have a form, and when I click submit, it does to another page with the submitted data, but if i have more that one form, how do I know from which form the data has been submitted ?

    • Simply add a hidden field to every form, before you submit form data, add form name to newly created hidden field.

  • Harish

    Suppose I have more than one form, and if i submit any of the form, it will carry the data to another page to show the result.
    But how can i know from which form the data was submitted?
    Any help will be appreciated !
    Thank you in advance

    • Simply add a hidden field to every form, before you submit form data, add form name to newly created hidden field.

  • Migue Rea

    I've found that using window.localStorage is a good way to pass data between pages when JS is involved

    • You are correct, but only if you really need them written for later usage. In any other case, it is a waste of time. Mainly because it's must faster to share data through active memory than to do it via writing/reading.

  • gg

    Sorry for newbie question, do we need to initialize the localStorage? or just simply use it without initialize it?

  • Marco

    Congratulations to the guide! It’s really clear , well made and extremely helpful !

  • Levi

    Very very helpful!, thanks a lot, i spend like 1 week looking for a good solution. haha