CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Vinay Revankar
Vinay Revankar

Reputation: 832

jQuery Mobile showPageLoadingMsg()/hidePageLoadingMsg() methods working only with firefox browser

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.

Upvotes: 2

Views: 9725

Answers (1)

peterm
peterm

Reputation: 92785

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

Upvotes: 9

Related Questions