How can you most easily pass URL arguments/data between JQuery Mobile (JQM) embedded/internal pages?

Question

How can you pass/access URL parameters (or simple data) between embedded JQuery Mobile pages?

I.e. I have a single HTML page (index.html) with two "pages" (page-id) in it "article-list" and "article-detail" and I want to pass an ID into the article-list page i.e. index.html#article-list?id=12345 and read it again.

We know the framework doesn't support it natively (http://jquerymobile.com/demos/1.0.1/docs/pages/page-navmodel.html). There used to be a plugin called jqm.page.params but it hasn't had much love over the years and it does not work with JQuery 1.3.. Then there's jQuery Mobile router plugin but that seems confusing and overkill.

Any idea how to workaround this and pass data/arguments between embedded pages?

Answer 1

Acording to help docs to jqm 1.3.2 (latest release - you have checked docs for older version) there still no way to pass query parameters to an embedded page.
But you can use one of the next three plugins for passing query params to internal pages:

• A lightweight page params plugin (you have mentioned that is not worked in jqm 1.3)
• A more fully featured jQuery Mobile router plugin for using with backbone.js or spine.js.
• A very simple Routerlite plugin

Also you can pass parameters by using:

• Html attributes
• URL parameters
• Local storage (permanent storage)
• Session storage (date enable only during session)

Original answer about the first two methods can be found here. I modified a little bit examples (example with url params has not worked).

Attributes

Html:

<div data-role="page" id="article-list">
    <div data-role="content">
        <ul data-role="listview" data-theme="c">
           <li><a data-parm="123" href="#article-detail">123</a></li>
           <li><a data-parm="321" href="#article-detail">321</a></li>
        </ul>
    </div>
</div>
<div data-role="page" id="article-detail">
    <div data-role="content">
        <div id="paramId" data-extParam=""></div>
    </div>
</div>

JS:

$("a").on("click", function (event) {    
   var parm = $(this).attr("data-parm");
   $('#paramId').attr( 'data-extParam',parm);    
});    
$("#article-detail").on("pageshow", function onPageShow(e,data){
     alert($('#paramId').attr( 'data-extParam'));
});

Example also is on jsfiddle

Url params

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

Js:

$("#page2").on("pageshow", function onPageShow(e,data){

    alert('Page 2 - CID: ' + getParameterByName('cid'));
});

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

The same example on jsfiddle

Local storage:

Html:

<div data-role="page" id="home">
    <div data-role="content">
        <a href="#page2" data-role="button" id="buttonPage">Page2</a>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="content"></div>
</div>

JS:

$("#page2").on("pageshow", function onPageShow(e,data){
    alert(localStorage.getItem("localId"));
});

$('#buttonPage').click(function(e) {
    localStorage.setItem("localId", 111);
});

Sources can be found on jsfiddle

Session storage

Just repace in example above localStorage on sessionStorage

Answer 2

There are a number of ways to do this, and it depends on your use case. If you need to be able to deep link to one page with the value, you'll need to use one of the query parameter hacks. However, if you have a highly dynamic app, don't need to be able to deep link to a selection, and just want to pass values from one page to the other, you can go other routes:

Use localStorage. When linking to or changing to the other page, set a localStorage value, and access it in javascript again once the other page is loaded.

Use a client-side binding framework Using something like knockoutjs, you can bind values which are kept synchronized across these same-file-pages because they're all a part of the same View context (the HTML file). A good example of this is when you have a page with a list, bound to an array of items, and when one is selected, the other page is loaded, and that page is all bound within the context of the selectedItem.