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 and 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 🙂
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:
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.