window.location conflict with jQuery Mobile

Question

I'm in the process of building a mobile web app, and I've run into a very, very strange issue.

The core of my app looks like a proper iPhone app, with tab-bar. On one of my screens, if the tab-bar links are clicked, before redirecting we have to make a POST request to the server, then perform the redirect on success.

In a desktop browser, this works exactly as expected.

In Mobile Safari, it doesn't work at all. The POST request happens, but the redirect does not. I've tried a number of different techniques for the redirection, and none of them have made a difference.

I'm using jQuery Mobile, but because I need to redirect to a completely different page with no transition and no AJAX, I'm using window.location.href to redirect.

Does anyone have any ideas why this might be happening? Happy to provide further details if necessary, I've been banging my head against this for 2 days.

Answer 1

Ok, so the problem here was a change of behaviour between running my app in a desktop browser and running it in Mobile Safari.

On the desktop, jQuery Mobile was basically providing not much more than styling and transitions.

In Mobile Safari, it was rewriting all of the URLs on my page. With it being so difficult to live debug websites directly on the phone or in the simulator (I know about the debug console, but it was only marginally helpful), it took me a long time to see that.

I got around this issue by adding a data-url attribute to each of my links - this was not rewritten by jQuery Mobile so I was able to use it to take the user to where they should have been going from the start.

I couldn't find any reference to the fact that jQuery Mobile was doing this URL rewriting, but perhaps I missed something in their documentation.