How to pass and get Parameters between two Pages in Jquery Mobile?

Question

I am working on a some demo App to learn things in Jquery Mobile. I have tried a lot of options but not able to get solution on a few things :-

http://jsfiddle.net/sahil20grover1988/zZMXQ/48/ In this case when i add param with Url in Index page it is not directing to Search Page
In case if I dont add Params to Index page then how do I pass params from Index page to Search page.
Also I need help how to retrieve the Params in search page ??

score 7 · Accepted Answer · answered Sep 28 '11 at 13:50

Does this help?

http://jsfiddle.net/phillpafford/VXV3R/

JS

$('#page2').live('pageshow', function(event, ui) {
    alert('Page 2 - CID: ' + getParameterByName('cid'));
});

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

HTML

<div data-role="page" id="home">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">
                Home Page
            </li>
            <li>
                <a href="?cid=1234#page2" rel="external">Page 2</a>
            </li>
        </ul>                
    </div>
</div>
<!-- page 2 -->
<div data-role="page" id="page2">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li data-role="list-divider">
                Page 2
            </li>
            <li>
                <a href="?cid=4321#home">Home Page</a>
            </li>
        </ul>
    </div>
</div>

nicely explained thanks , but why thiis is not working ?? http://jsfiddle.net/sahil20grover1988/VXV3R/9/ — Sahil Grover, Sep 28 '11 at 14:43

score 6 · Answer 2 · edited Sep 30 '12 at 09:14

6

I came up with this simple approach...

First add custom HTML5 attributes to the elements on page 1 to hold the data to be passed. My attribute is named data-parm

<div data-role="page" id="one">
    <div data-role="content">
        <ul data-role="listview" data-theme="c">
        <li><a data-parm="john" href="#two">one</a></li>
        <li><a data-parm="mary" href="#two">two</a></li>
        <li><a data-parm="sue" href="#two">three</a></li>
        </ul>
    </div>
</div>   

<div data-role="page" id="two">
    <div data-role="content">
        <div id="showParmHere"></div>
    </div>
</div>

In your javascript, create a click handler (or other type of handler) that selects the attribute and assigns the value to a variable which will be available for you on page 2.

For this example, I have added it to the html of a div that is on page 2.

$("a").on("click", function (event) {

   var parm = $(this).attr("data-parm");
   //do something here with parameter on page 2 (or any page in the dom)
   $("#showParmHere").html(parm);

});

edited Sep 30 '12 at 09:14

Littm

4,923
4
30
38

answered Sep 01 '12 at 23:36

Joel Erenberg

81
2
3

Simple enough and basic use of JQUERY. Nice !! – Sahil Grover Sep 04 '12 at 07:33
2

@Joel: use `var parm = $('this').data('parm');` instead of `.attr`. This way is safe from circular references and therefore from memory leaks – Tomas Ramirez Sarduy Nov 20 '12 at 10:19
@Tom: Thanks so much for the tip. What is confusing is that there seems to be disagreenent about this. for instance this article says exact opposite. http://lookfirst.com/2011/12/dont-use-jquery-data-method-use-attr.html. Which is correct? – Joel Erenberg Nov 22 '12 at 18:15
@JoelErenberg: The case they talking about is an issue when the attributes are read directly from the DOM [(see example)](http://jsfiddle.net/KwjvA/). You must, use `.attr()` for this rare case, but definitely don't use it in place of `.data()` in general, since `.data()` doesn't write to the DOM it is much faster. [Using jQuery’s Data APIs](http://www.learningjquery.com/2011/09/using-jquerys-data-apis) and safe – Tomas Ramirez Sarduy Nov 22 '12 at 20:06
@JoelErenberg: This was the subject of a question here at Stack Overflow: http://stackoverflow.com/q/7261619/670377 – Tomas Ramirez Sarduy Nov 22 '12 at 20:32
I'm not sure. Maybe someone else knows. – Joel Erenberg May 13 '13 at 11:22

score 1 · Answer 3 · answered Oct 07 '16 at 08:56

1

To pass valor with url in jQuery mobile you can use rel="external"...

Example:

<a id="l" href="index.html?id='1234'#dateA" rel="external">

You can see: http://demos.jquerymobile.com/1.2.0/docs/pages/page-links.html

answered Oct 07 '16 at 08:56

daniel_mutu

163
1
14

score 0 · Answer 4 · answered Feb 15 '13 at 10:43

I stumbled on this question because the same issue, but think I found an easier way. At least if you use the "pagebeforechange" event. That's where I tried the solution so far.

You can get the search string from the second parameter of the pageonchange event function by this object path: ".options.link.context.search". I hope the example code is enough to explain it.

$(document).live("pagebeforechange", function(e, secondparameter) {
  alert(secondparameter.options.link.context.search);
});

score 0 · Answer 5 · answered Mar 27 '14 at 21:51

I created a solution for jQM 1.4+ which allows parameters to be passed through the URL. This works quite nicely if you want the user to be able to go directly to a page with parameters (say from an e-mail), or if the user refreshes the page.

It's under the MIT license and you can find it here on GitHub.

How to pass and get Parameters between two Pages in Jquery Mobile?

5 Answers5

Linked