Question

I am trying to use jquery mobile $.mobile.showPageLoadingMsg() after user hits
login button. After this operation I am doing an ajax call to the webservice
and after getting the response I am hiding the loading message.The problem
is that the loader is shown only in the firefox browser and not in other browsers(chrome, safari, android).

Example:

$.mobile.showPageLoadingMsg();
var response = $.ajax(
 {
   type: "POST",
   url: "service.php",
   data: "...",
   async: false,
   dataType: "json",
   cache: false
   });
   response.success(function (data)
    {
    res_content = data;
    });
    response.error(function (jqXHR, textStatus, errorThrown)
    {
  }
 $.mobile.hidePageLoadingMsg();

I also found that loader shows up if i give the timeout to the
hidePageLoadingMsg.

setTimeout(function(){$.mobile.hidePageLoadingMsg()},5000);

The loader is taking more time to show up ie it shows up after the ajax call and shows for 5 seconds.As giving timeout is not a fix.
Please help.

Answer 1

First of all $.mobile.showPageLoadingMsg() and $.mobile.hidePageLoadingMsg() are deprecated as of jQM version 1.2.
Use $.mobile.loading('show') and $.mobile.loading('hide') instead.

That being said you can try something like that

$("#btn1").click(function(){
    $.mobile.loading('show', {theme:"e", text:"Please wait...", textonly:true, textVisible: true});

    //Do your ajax call and processing here
    setTimeout(function(){
        $.ajax({
            ...
            success: function (data){
                ...
                $.mobile.loading('hide');
            }
        });
    }, 50);
});

See jsFiddle simulating lengthy work here