JQuery Mobile Page Parameter

Question

Just wondering how can I pass some parameters to the JQuery Mobile page?

for example

<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 don't work

Thanks

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

You can achieve it by changing the following things.

I. Remove the <a>

II. Internal page to external page

"#mypage" to "mypage.html"

III. Bind "Click" event of image to a function that calls the page

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

IV. In the 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 detailed Tutorial Here

You can also view this Question Here for some variations. Look at the answer

Thanks, it sounds like it's an interesting approach. However we decided to use backbone instead. https://github.com/ccoenraets/backbone-jquerymobile — DJSO, Oct 18 '12 at 03:44

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

these are some links that can help you or atleast 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 get Parameters between two Pages in Jquery Mobile?

edited May 23 '17 at 12:31

Community

1
1

answered Oct 17 '12 at 04:10

rahul

7,573
7
39
53

lukie · Answer 3 · 2016-05-13T05:34:25.177

I think the question is how to deal with parameters when linking to an internal page.

Here is how I solved the problem I was having 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
    });

JQuery Mobile Page Parameter

3 Answers3