Passing data between pages with jQuery Mobile?

Question

So I've just started learning jQuery Mobile, and I've learned how it loads all links via ajax without actually loading the next page. Several of my pages use forms and GET to pass data on to the next page-- How can I do this while using jQuery Mobile?

Answer 1

Commonly, there 2 method for transfer parameter between jQuery Mobile page.

1. Modify Ajax address at first page, and parse the ajax to get parameter in next page.
2. Using HTML5 sessionStorage, a kind of WebStorage, to transfer parameter.

---

This is the method use ajax address to transfer parameter. How to pass and get Parameters between two Pages in Jquery Mobile?

---

Using sessionStorage/localStorage to transfer parameter, you can add this code at first page,

<a href="#page_Parameter1" onclick="sessionStorage.ParameterID=123">
    Before go to next page, parameter id is storaged into sessionStorage.
</a>

In next page, you can use this method to take parameter content,

$('#page_Parameter1').live('pageshow', function(event, ui) {
    alert('Parameter ID: ' + sessionStorage.ParameterID);
});

Answer 2

One thing that I think is cool about JQM is that you don't have to use parameters to pass data between pages. Since you're in the same DOM as the first page, you can access data using plain old variables, i.e.

field1 = $('[name=field1]').val();
field2 = $('[name=field2]').val();

And so long as you're using the ajax feature of JQM you could do the following in the next page:

$('.title').text(field1);

I made a jsfiddle example for you.

Other ways would be to use the localStorage or sessionStorage api or there are also some plugins mentioned in the docs.

1. page params
2. JQM router plugin