Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Acording to <a href="http://view.jquerymobile.com/1.3.2/dist/demos/faq/pass-query-params-to-page.html" rel="nofollow noreferrer">help docs</a> 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. <br> But you can use one of the <strong>next three plugins</strong> for passing query params to internal pages:</p> <ul> <li><strike><a href="https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params" rel="nofollow noreferrer">A lightweight page params plugin</a> (you have mentioned that is not worked in jqm 1.3)</strike></li> <li>A more fully featured <a href="https://github.com/azicchetti/jquerymobile-router" rel="nofollow noreferrer">jQuery Mobile router plugin</a> for using with backbone.js or spine.js.</li> <li>A very simple <a href="https://github.com/1Marc/jquery-mobile-routerlite" rel="nofollow noreferrer">Routerlite plugin</a></li> </ul> <p>Also you can pass parameters by using:</p> <ul> <li>Html attributes</li> <li>URL parameters</li> <li>Local storage (permanent storage)</li> <li>Session storage (date enable only during session)</li> </ul> <p>Original answer about the first two methods can be found <a href="https://stackoverflow.com/questions/7582781/how-to-pass-and-get-parameters-between-two-pages-in-jquery-mobile">here</a>. I modified a little bit examples (example with url params has not worked).</p> <h2>Attributes</h2> <p>Html:</p> <pre class="lang-html prettyprint-override"><code>&lt;div data-role="page" id="article-list"&gt; &lt;div data-role="content"&gt; &lt;ul data-role="listview" data-theme="c"&gt; &lt;li&gt;&lt;a data-parm="123" href="#article-detail"&gt;123&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a data-parm="321" href="#article-detail"&gt;321&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div data-role="page" id="article-detail"&gt; &lt;div data-role="content"&gt; &lt;div id="paramId" data-extParam=""&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>JS:</p> <pre class="lang-js prettyprint-override"><code>$("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')); }); </code></pre> <p>Example also is on <a href="http://jsfiddle.net/WebSerGe/aA2LR/15/" rel="nofollow noreferrer">jsfiddle</a> </p> <h2>Url params</h2> <p>Html</p> <pre class="lang-html prettyprint-override"><code>&lt;div data-role="page" id="home"&gt; &lt;div data-role="content"&gt; &lt;ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"&gt; &lt;li data-role="list-divider"&gt;Home Page&lt;/li&gt; &lt;li&gt;&lt;a href="?cid=1234#page2" rel="external"&gt;Page 2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div data-role="page" id="page2"&gt; &lt;div data-role="content"&gt; &lt;ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"&gt; &lt;li data-role="list-divider"&gt;Page 2&lt;/li&gt; &lt;li&gt;&lt;a href="?cid=4321#home"&gt;Home Page&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Js:</p> <pre class="lang-js prettyprint-override"><code>$("#page2").on("pageshow", function onPageShow(e,data){ alert('Page 2 - CID: ' + getParameterByName('cid')); }); function getParameterByName(name) { var match = RegExp('[?&amp;]' + name + '=([^&amp;]*)').exec(window.location.search); return match &amp;&amp; decodeURIComponent(match[1].replace(/\+/g, ' ')); } </code></pre> <p>The same example on <a href="http://jsfiddle.net/WebSerGe/LWS7Q/12/" rel="nofollow noreferrer">jsfiddle</a></p> <h2>Local storage:</h2> <p>Html:</p> <pre class="lang-html prettyprint-override"><code>&lt;div data-role="page" id="home"&gt; &lt;div data-role="content"&gt; &lt;a href="#page2" data-role="button" id="buttonPage"&gt;Page2&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div data-role="page" id="page2"&gt; &lt;div data-role="content"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>JS:</p> <pre class="lang-js prettyprint-override"><code>$("#page2").on("pageshow", function onPageShow(e,data){ alert(localStorage.getItem("localId")); }); $('#buttonPage').click(function(e) { localStorage.setItem("localId", 111); }); </code></pre> <p>Sources can be found on <a href="http://jsfiddle.net/WebSerGe/5Rcte/35/" rel="nofollow noreferrer">jsfiddle</a></p> <h2>Session storage</h2> <p>Just repace in example above <code>localStorage</code> on <code>sessionStorage</code></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload