How Can You Most Easily Pass Url Arguments/data Between Jquery Mobile (jqm) Embedded/internal Pages?

September 28, 2023 Post a Comment

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

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

<divdata-role="page"id="article-list"><divdata-role="content"><uldata-role="listview"data-theme="c"><li><adata-parm="123"href="#article-detail">123</a></li><li><adata-parm="321"href="#article-detail">321</a></li></ul></div></div><divdata-role="page"id="article-detail"><divdata-role="content"><divid="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", functiononPageShow(e,data){
     alert($('#paramId').attr( 'data-extParam'));
});

Example also is on jsfiddle

Url params

Html

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

Js:

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

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

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

The same example on jsfiddle

Local storage:

Html:

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

JS:

$("#page2").on("pageshow", functiononPageShow(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

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

Solution 3:

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

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

Solution 4:

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><scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><scriptsrc="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script><linkrel="stylesheet"href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/></head><body><divdata-role="page"id="listPage"><divdata-role="content"><ulid="swipeMe"data-role="listview"data-inset="true"data-filter="false"><lidata-icon="arrow-r"><ahref="#viewDetails"id="1">Page 1</a></li><lidata-icon="arrow-r"><ahref="#viewDetails"id="2">Page 2</a></li><lidata-icon="arrow-r"><ahref="#viewDetails"id="3">Page 3</a></li></ul></div><!-- /content --></div><!-- /main page --><divdata-role="page"id="viewDetails"><divdata-role="header"><divclass="ui-grid-b"><divclass="ui-block-a"><ahref="#listPage"data-role="button"data-mini="true"data-theme="a">Back</a></div></div></div><divdata-role="content">   
            details here..
        </div><!-- /content --></div><!-- /detail page --><scripttype="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>

Solution 5:

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.

javascript dozent