Passing data between jQuery Mobile pages

Written by on March 26, 2015

Passing data between jQuery Mobile pages

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, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

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

Categories

26 thoughts on “Passing data between jQuery Mobile pages”

  1. 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?

      • 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.

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

          • 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. 🙂

  2. 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?

  3. 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.

  4. 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

  5. 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.

  6. 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 ?

  7. 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

  8. 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.

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

Leave a Reply