Mobile jQuery page options

Question

Just wondering how to pass some parameters to a jQuery Mobile page?

eg

<div data-role="page-content"> <ul class="gallery"> <li><a href="#mypage?01"><img src="1.jpg"/></a></li> <li><a href="#mypage/02"><img src="2.jpg"/></a></li> </ul> </div><!-- /content --> 

As you can see, I tried # and? However they do not work

thanks

Answer 1

You can achieve this by changing the following things.

I am. Delete <a>

II. Inner page to Outer page

 "#mypage" to "mypage.html" 

III. Bind the "Click" image event to the page invocation function

 $("#img1").click(function () { $.mobile.changePage("mypage.html", { data: { [...parameters...] } }); //eg: $.mobile.changePage("mypage.html", { data: { "param1": "value1" } }); }); 

IV. In MyPage.html use this

 <div data-role="page" id="newPageId"> <script type="text/javascript"> $("#newPageId").on("pageshow", onPageShow); function onPageShow(e,data) { var url = $.url(document.location); var param1 = url.param("param1"); var param2 = url.param("param2"); : } </script> </div> 

You can follow the detailed tutorial here.

You can also view this Question here for some options. Look at the answer

Answer 2

these are some links that can help you or at least give you a start

http://ramkulkarni.com/blog/passing-data-between-pages-in-jquery-mobile/

http://blog.digitalbackcountry.com/2011/12/passing-data-between-pages-in-jquery-mobile/

How to pass and receive parameters between two pages in jQuery Mobile?

Answer 3

I think the question is how to handle parameters when binding to an internal page.

This is how I solved the problem that I encountered when I found this question:

  <div data-role="page-content"> <ul class="gallery"> <li><a href="#mypage" data-my_param=1><img src="1.jpg"/></a></li> <li><a href="#mypage" data-my_param=2><img src="2.jpg"/></a></li> </ul> </div><!-- /content --> 

then ...

  $('ul').on('click', 'a', function(e){ myParam = $(this).data('my_param'); //do what ever needs to be done to the page with the param });