jQuery mobile page navigation behaviour

I have a very simple .NET MVC3 project set up using jquery mobile for rendering to mobile devices.

I have one page...

www.mydomain.com/landingpage

and on this page I have a link to another page:

www.mydomain.com/homepage

My problem is this, the link from landing page works fine - loads, animates a开发者_如何转开发nd returns the content correctly.

However once on the homepage, all the homepage links no longer work. Homepage contains about 3 different jquery mobile "pages" and trying to link to them is not working. This is due to the hash format, it's still showing something similar to:

www.mydomain.com/landingpage#homepage

So when link is generated it looks something like this:

www.mydomain.com/landingpage#homepage

Then when I link to one of the other pages similar to this:

a href="#homepage2">Homepage 2</a>

Clicking the link takes the user back to the initial landing page and updates the URL to something similar to:

www.mydomain.com/landingpage#homepage2

But I'm fairly sure it should look more something like this:

www.mydomain.com/homepage#homepage2

I can get it working correctly by using rel="external" on the first link but I'd like to avoid this as it reloads the page and you lose page transition animation etc.

Any ideas much appreciated :)

On your landing page set rel="external" on the link to the homepage. This will disable the animation however the ajax navigation on the homepage will work properly.

For anyone stuck with same problem, this fixed it for me:

I manually set the data-url attribute on each jQuery mobile "page" element (the div with data-role="page"). In turn, this forced a refresh of the URL hash of the pages when doing post-backs.

Not sure of the exact cause but I have a feeling because it is posting back to the same page but server is returning a different page, the URL hash gets a bit confused.

So just manually set the data-url attribute correctly and when the page posts back and the next page is loaded, correct URL hash will be updated.

So for example:

<div data-role="page" id="pageId" data-url="/Page/URL/Here/">

Little bit tricky to explain so if anyone needs a bit of help feel free to contact me directly! RC2 has been released since I initially posted this so I'm also unsure of what changes are included.

I believe this is a problem when you load a external page. When you try load a external page and from there you try to load a internal page, jquery mobile will assume the internal page you're loading is already in the DOM while it's not simply because when you load a external page with multiple only the first 1 get loaded thus the internal page you try to link to does not exist.

And the reason why you get this

www.mydomain.com/landingpage#homepage2

and not this

www.mydomain.com/homepage#homepage2

is because landingpage is the FIRST page loaded. subsequence pages is all loaded into the DOM so jqm assume the is already in the DOM so it try to load.

currently i believe the only work around is not to place multiple jqm page in a file and load them as a external file.

e.g.

landingpage.html loads --> homepage.html

homepage.html loads --> homepage2.html

(You might have solved your problem, still if below helps)

I am using RC2 now (just released) and they made big changes around this area in Beta3, I am using normal links like:-

and it is working fine for me. Though I also kept PushStateEnabled to True in header:

  <script type="text/javascript">
          $(document).bind("mobileinit", function () {

              $.mobile.ajaxEnabled = true;
              $.mobile.pushStateEnabled = true;
          });
        </script>

<script type="text/javascript">
    $(document).bind("mobileinit",
        function(){ 
            $.extend( $.mobile , { ajaxEnabled: false }); 
        }
    );
</script> 

Add this script to the layout page (or wherever you have referenced the jQuery scripts.

This should solve the problem, however, it just disabled the ajax. This will require more research to find out how we overcome having # in the url while still having ajax enabled.