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?

score 5 · Accepted Answer · edited May 23 '17 at 12:06

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

URL params does not seem to work, but ended up using SessionStorage. I think thats an "o.k." solution but its a shame that we have to resort to that naturally and I'm not sure how it affects very fast performance on mobile devices. I've shown an example above that uses Local (or rather Session in my case) storage where the data is embedded within the links (which is probably the majority use case given we are talking about URL arguments/parameters). Thanks for all the detail though. — Daniel Iversen, Sep 15 '13 at 03:37

score 2 · Answer 2 · answered Sep 12 '13 at 22:45

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.

Thanks, I ended up using LocalStorage. – Daniel Iversen Sep 15 '13 at 03:37 — Daniel Iversen, Sep 15 '13 at 03:37

score 0 · Answer 3 · edited May 23 '17 at 12:16

0

I suggest you use the method in @DextOr's answer at How can I get query string values in JavaScript?

The other answers have some other methods too

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

edited May 23 '17 at 12:16

Community

1
1

answered Sep 12 '13 at 22:31

Plato

10,812
2
41
61

This is the best idea, however it doesn't work in certain recent JQM+JQ versions (e.g. JQM 1.3.2+ JQ 2.0.3).. what a shame! – Daniel Iversen Sep 15 '13 at 03:34

score 0 · Answer 4 · answered Sep 15 '13 at 03:32

Thanks a lot for all the answers and ideas. As I said, I didn't want to use any larger routing frameworks just to solve this current (and probably temporary) limitation of JQM.

The idea about using plain JS to access url parameters sounds appealing but that doesn't work in certain combinations of JQuery Mobile and JQuery (there are stack overflow articles about that too).

The localStorage suggestions (of which there are many) are good but nowhere are there practical simple examples.

Solution/example that hopefully others will find it useful also:

<html>
<head>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
     <script src="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
</head>
<body>
    <div data-role="page" id="listPage">
        <div data-role="content">   
            <ul id="swipeMe" data-role="listview" data-inset="true" data-filter="false">
                <li data-icon="arrow-r"><a href="#viewDetails" id="1">Page 1</a></li>
                <li data-icon="arrow-r"><a href="#viewDetails" id="2">Page 2</a></li>
                <li data-icon="arrow-r"><a href="#viewDetails" id="3">Page 3</a></li>
            </ul>
        </div><!-- /content -->
    </div><!-- /main page -->

    <div data-role="page" id="viewDetails">
        <div data-role="header">
            <div class="ui-grid-b">
                     <div class="ui-block-a"><a href="#listPage" data-role="button" data-mini="true" data-theme="a">Back</a></div>
            </div>
        </div>
        <div data-role="content">   
            details here..
        </div><!-- /content -->
    </div><!-- /detail page -->

    <script type="text/javascript">

        $("#viewDetails").on("pageshow", function(e, data){
            var selectedId = sessionStorage.getItem("selectedId");
            sessionStorage.removeItem("selectedId"); 
            alert(selectedId);
        });

        $("#listPage").on("pageshow", function(e, data){
            $('#swipeMe').children().each(function(){
                var anchor = $(this).find('a');
                if(anchor){
                    anchor.click(function(){
                        sessionStorage.setItem("selectedId", anchor.attr('id'));
                    });
                }
            });
        });

    </script>

</body>

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

0

I've recently created a solution for this for jQuery Mobile 1.4+. It's a simple 100-line plug-in. It's under the MIT license and you can find it here on GitHub.

answered Mar 27 '14 at 21:57

Cameron Askew

1,403
1
12
20

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

5 Answers5

Attributes

Url params

Local storage:

Session storage

Linked