jquery mobile url parameter not updating in browser, but getting correct one with "data-url"

Question

I created the following example to show what I am experiencing.

If I navigate from page1 to page 2 with the button Page 2a, the URL will be ...#page2?id=a as expected.

When I click the button to go back to Page 1, then navigate to Page 2b, the URL will still show "#page2?id=a", but the <a> tag is clearly has an href of "#page2?id=b" along with the $(e.target).attr("data-url") being "#page2?id=b" when I get to #page2.

Any ideas what is going on here? Thanks in advance for any help.

<html>
   <head>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
          <script>
             $("#page2").live('pageshow', function(e) {
                alert($(e.target).attr("data-url"));
                $("#page_text").html("Page 2"+($(e.target).attr("data-url").replace(/.*id=/, "")));
             });
          </script>

   </head>
   <body>
      <div data-role="page" data-theme="c" id="page1">
         <div data-role="content">
            <p>Page 1</p>
            <a href ="#page2?id=a" data-transition="flip" data-role="button">Page 2a</a>
            <a href ="#page2?id=b" data-transition="flip" data-role="button">Page 2b</a>
         </div>
      </div>

      <div data-role="page" data-theme="a" id="page2">
         <div data-role="content">
            <p id="page_text"></p>
            <a href ="#page1" data-transition="flip" data-role="button">Page1</a>
         </div>
      </div>

   </body>
</html>

Code sample is here on jsfiddle too.

BTW, I have tried this in Firefox, Chrome, and Safari...with the same result in each — Travis Nelson, Apr 27 '12 at 17:02

score 3 · Accepted Answer · edited May 23 '17 at 11:48

I was able to resolve this issue by using the jqm.page.params plugin with help from this question on stackoverflow. Here is my code for using this plugin:

<html>
   <head>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

      //Added the jqm.page.params plugin
      <script src="https://raw.github.com/jblas/jquery-mobile-plugins/35fcf54e2af380aa0e98e9f384572b02f58a1ea1/page-params/jqm.page.params.js"></script>
      <script>
         $("#page2").live('pageshow', function(e) {
            alert($(e.target).attr("data-url")+$.mobile.pageData.id);
            //$("#page_text").html("Page 2"+($(e.target).attr("data-url").replace(/.*id=/, "")));
            $("#page_text").html("Page 2"+$.mobile.pageData.id);

         });
         $(document).bind("pagebeforechange", function( event, data ) {
            $.mobile.pageData = (data && data.options && data.options.pageData)
                                   ? data.options.pageData
                                   : null;
         });
      </script>

   </head>
   <body>
      <div data-role="page" data-theme="c" id="page1">
         <div data-role="content">
            <p>Page 1</p>
            <a href ="#page2?id=a" data-transition="flip" data-role="button">Page 2a</a>
            <a href ="#page2?id=b" data-transition="flip" data-role="button">Page 2b</a>
         </div>
      </div>

      <div data-role="page" data-theme="a" id="page2">
         <div data-role="content">
            <p id="page_text"></p>
            <a href ="#page1" data-transition="flip" data-role="button">Page1</a>
         </div>
      </div>

   </body>
</html>

I think that library may be out of date, I recently created a new [plug-in](https://github.com/CameronAskew/jquery.mobile.paramsHandler) which is compatible with jQM 1.4+ if you still need this sort of thing — Cameron Askew, Apr 04 '14 at 22:04

score 0 · Answer 2 · answered Apr 27 '12 at 20:18

The problem is with appended url variables with ajax navigation. JQM uses the appended variables with its own navigation. According to the docs, either lose the ajax navigation, or lose the variables. Breaking it up into several pages with rel="external" would also fix the problem if a web site (not app).

jquery mobile url parameter not updating in browser, but getting correct one with "data-url"

2 Answers2

Linked