Question

Although you can change the default error response in JQuery Mobile doing something like:

$(document).bind("mobileinit", function() {
    $.mobile.pageLoadErrorMessage = 'This is my custom error.';
});

I would like to use the errors I am returning from the actual application, which allows me to set different messages depending on the error.

For example, with a Forbidden error I would want to display something that correlates to that issue.

I have the flexibility to return the responses as JSON if that would be more palatable for JQuery, I am just not sure how to get the pageLoadErrorMessage to consume that.

Answer 1

You can use pageloadfailed event for that.

$(document).on("pageloadfailed", function(event, data){
    event.preventDefault();

    var errMessage = data.xhr.status + " " + data.xhr.statusText;

    setTimeout(function(){
        $.mobile.loading('hide');
        $.mobile.loading('show', {theme:"e", text:errMessage, textonly:true, textVisible: true});
    },50);

    setTimeout(function(){$.mobile.loading('hide')}, 2000);

    data.deferred.reject(data.absUrl, data.options);
});

jsFiddle