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

1. http://jsfiddle

Answer 1

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.

Answer 2

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

Answer 3

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);
});

Answer 4

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);

});

Answer 5

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>