Pass parameter to the page in jQuery Mobile

Question

I have two pages, p1.html and p2.html with jQuery Mobile.

There is some links in p1.html, and all links are navigating to p2.html but with a little difference.

I want to pass an int parameter to p2.html javascript (for example, link number), So a javascript code in p2.html, make little changes to itself based on the int parameter (Before transition starts).

I want to use Ajax navigation feature and Transitions of jQuery Mobile, And I don't want use page anchors (p2.html#6).

How to send that parameter to p2.html?

check out this thread, it might help you out if you're thinking GET parameters: http://stackoverflow.com/q/5448545/467164 — Zathrus Writer, Sep 05 '12 at 21:29
@ZathrusWriter If I use that method, JQM will download that page many times (one time for each link) because URL is different, but the html content of all links are same. So it should be downloaded once... (`p2.html` is a big page and should **not** be downloaded many times...) — Mahdi Ghiasi, Sep 05 '12 at 21:31
@ZathrusWriter That little difference in `p2.html` should made by client-side javascript code. — Mahdi Ghiasi, Sep 05 '12 at 21:35
And how to detect if JQM is going to `p2.html` (and not other page) in `pagebeforechange` event? — Mahdi Ghiasi, Sep 05 '12 at 21:42

score 2 · Accepted Answer · edited Sep 05 '12 at 22:08

2

Can you use cookies to save the relevant information?

Get the cookie jquery plugin.

p1.html

<a href="p2.html" data-p2data="1">Link 1</a>
<a href="p2.html" data-p2data="2">Link 2</a>
<script type="text/javascript">
$(document).ready(function(){
    $('a[data-p2data]').click(function(){
        $.cookie('p2data', $(this).data('p2data'));
    }
}
</script>

p2.html

<script type="text/javascript">
    var p2data = $.cookie('p2data');
    // .. process the page based on the value in p2data.
</script>

edited Sep 05 '12 at 22:08

Mahdi Ghiasi

14,873
19
71
119

answered Sep 05 '12 at 21:48

AndrewR

6,668
1
24
38

I'd say using cookies to send parameters between pages is a bit of an overkill, taken into consideration they are used as a persistent storage – Zathrus Writer Sep 05 '12 at 21:50
2

@ZathrusWriter But this method will work also on B-Grade browsers, which do not support Ajax navigation... – Mahdi Ghiasi Sep 05 '12 at 21:50
@AndrewR Can you provide a link for cookie jquery plugin? (I have found several plugins, I don't know which one do you mean) – Mahdi Ghiasi Sep 05 '12 at 21:51
@MahdiGhiasi true, that did not occur to me :) – Zathrus Writer Sep 05 '12 at 21:51
@ZathrusWriter I agree, and normally I wouldn't suggest it. But given the parameters in the question it seems like the best solution. – AndrewR Sep 05 '12 at 21:53
@MahdiGhiasi I found a write up of the cookie plugin and a link to the github page here http://www.electrictoolbox.com/jquery-cookies/ – AndrewR Sep 05 '12 at 21:53

score 1 · Answer 2 · edited May 23 '17 at 12:12

1

From the docs there is no built in way to pass parameters between pages.

However you can use one of the plugins mentioned there (page-params or jquery-mobile-router) or you can use localStorage or cookies.

Have a look at some of these SO questions

Passing data between pages with jQuery Mobile?

Passing parameters to a page-id in jQuery Mobile

How-to store variable beetween jQM pages?

edited May 23 '17 at 12:12

Community

1
1

answered Sep 05 '12 at 21:47

Jack

10,943
13
50
65

score 1 · Answer 3 · answered Sep 05 '12 at 21:47

You can use a global variable to store that numeric value when a link on page1.html is clicked:

$('a.special_link').click(function() {window.my_id = this.id});

... you will be then able to retrieve this in page2.html, since JQM uses AJAXed navigation by default, thus staying on a single page with this variable still accessible:

$('document').on('pagebeforechange', function(toPage, data) {
    if (toPage == 'page2.html') {
        alert('you have clicked on link number: ' + window.my_id);
    }
});

Pass parameter to the page in jQuery Mobile

3 Answers3