Question

Context: asp.net MVC 3 app. Page1 is a mobile page using jquery mobile and it contains a link to Page2 which is a normal page which uses a specific stylesheet.

Issue: on my phone, when I click the link on Page1, it goes to Page2 (with a horizontal sliding effect) but the stylesheet is not loaded. If I force a reload of Page2 then the stylesheet is loaded. Also, on the iphone, if I press the link to show the “open in new window” button and click it, it loads well in the new window.

Debug: if I simulate this on a desktop computer (by forcing mobile views) the same happens. The back button does not even work well. When loading Page2, Firebug, in the Net tab, displays as if I was still loading Page1 (it displays Get Page1) even if this is the text of Page2 that appears (without the css), and it doesn’t show a line saying that it tries to load the css.

Update: I was using 1.0. I just tried the latest 1.1 and this is even worse. When clicking on the link, the title for Page2 appears in my firefox tab, the address bar shows the new url but Page2 is not displayed (even if Firebug shows it loads something).

Answer 1

To turn off AJAX page transitions:

      $(document).bind("mobileinit", function () {


         $.mobile.addBackBtn = false;
         $.mobile.ajaxEnabled = false;
         $.mobile.ajaxLinksEnabled = false;

     });

EDIT

To change single links to non-ajax or vice verca you can use this code:

jQuery:

$("a").attr("data-ajax", "false");

Or you can simply do <a href="somepage" data-ajax="false" >Link</a>