Question

In jQuery Mobile, if user clicks on a button, a loading icon appears and then it loads the new webpage via Ajax.

But, The server may be not respond in my case. Isn’t there any way to put a timeout (e.g. 10 seconds) for ajax navigation feature? (If time limit exceeds, stop trying to navigate and show an error message)

Answer 1

To set a timeout i think you should not do it in a static way ( using “data-transition” )
you can make a listener to the link (‘onclick’) and within the listener make an ajax call to load your page. Use $.mobile.changePage() to do that.

The $.mobile.changePage() function is used in a number of places in jQuery Mobile. For example, when a link is clicked, its href attribute is normalized and then $.mobile.changePage() handles the rest.

so your code could seem like this :

$('#link_id').click(function() {
    $.ajax({
    url: "page_served_from_server",
        error: function(jqXHR, strError){
        if(strError == 'timeout')
        {
          //do something. Try again perhaps?
        }
    },
    success: function(){
        //charge your page :
       // $.mobile.changePage('yourPageAdress',"turn",false,true);
    },
    // here you can specify your timeout in milliseconds 
    timeout:3000
    });
});