CODEWITHSUNDEEP
jqueryjquery-mobile
DJSO
DJSO

Reputation: 85

JQuery Mobile Page Parameter

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

Upvotes: 4

Views: 5791

Answers (3)

lukie
lukie

Reputation: 31

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
    });

Upvotes: 0

rahul
rahul

Reputation: 7663

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?

Upvotes: 0

Gopikrishna S
Gopikrishna S

Reputation: 2431

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

Upvotes: 4

Related Questions