How to recover from an error loading page with jQuery mobile when safari components are hidden?

Question

When your mobile web app is added to an iOS home screen and you choose to hide safari components with this meta tag:

 <meta name="apple-mobile-web-app-capable" content="yes" />

If one of your pages has an error loading, jQuery mobile shows an error message overlay and all the links on the current page are dead. With the safari components hidden, there's no way to easily reload the page. You need to go back to your homescreen and open the mobile web app again. Is there a more elegant way to recover from an error in this scenario? Is there a way to force a page reload after you hit a page load error in mobile jQuery?

Answer 1

That's a funny situation...

If I were you I'd try to implement a .live() event binding that would go back to functional state when user clicks the error popup.

Use firebug to find out what distinguishing classes the popup div has.

Answer 2

Upon the error event, call window.location.reload(true) which will redownload the page because the first argument is true, instead of just reloading from cache.

If you believe you don't need to request the page, simply omit the first argument.

Answer 3

You can handle the event pageloadfailed and recover. Here is the documentation and sample code: http://jquerymobile.com/test/docs/api/events.html

$( document ).bind( "pageloadfailed", function( event, data ){

    // Let the framework know we're going to handle things.

    event.preventDefault();

    // ... attempt to load some other page ...
    // at some point, either in this callback, or through
    // some other async means, call resolve, passing in
    // the following args, plus a jQuery collection object
    // containing the DOM element for the page.

    data.deferred.resolve( data.absUrl, data.options, page );

});