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
– Travis Nelson, Commented Apr 27, 2012 at 17:02

Community · Accepted Answer · 2017-05-23 11:48:12Z

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 which is compatible with jQM 1.4+ if you still need this sort of thing

Cymbals · Accepted Answer · 2012-04-27 20:18:32Z

0

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).

answered Apr 27, 2012 at 20:18

Cymbals

1,1741 gold badge14 silver badges26 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related