Can't get a loading message appear on ajax calls

187 views Asked by At

I am using jQuery mobile within my web-app. I use these two functions to show and hide a spinning wheel and a message to the user:

function showScreenMsg(msg,text_only) {
  $.mobile.loading('show',{ text:msg, textVisible:true, theme:'b', textonly:text_only});
}

function hideScreenMsg(){
  $.mobile.loading('hide');
}

//AJAX CALL
function show_dtl(element,id){
showScreenMsg('loading',false);

var details;
$.ajax({
        async:false,
        url:'./shyne/ajax/show_dtl.php',
        data: {user_dtl_id:id},
}).done(function(data)
        {   
            if (data){
                data = $.parseJSON(data);
                details = data;
                details = formatDetails(details);
                hideScreenMsg();
            }   
        }       
    );
if(details){return details;}
}

I call showScreenMsg with proper parameters before the Ajax call, and when Ajax succeeds I call hideScreenMsg.

I do it for example in a list of people, where, by clicking on list elements you get people details by ajax. My problem is that maybe because of JQM (and device) slowness the loading message doesn't appear, I mean, maybe I get ajax answer before the device can display the message. However 3-5 seconds pass from the user click to the display of the informations. During this time nothing happens, and this should be something I want to avoid. Does anyone has a solution?

1

There are 1 answers

1
Gajotres On

This is a long shot, so let me explain one thing, I returned here after 9 month of inactivity. But something like this was a problem last year and this I solve it then.

For some reason, when working with web-kit browsers, you must use setTimeout or serInterval to trigger jQuery Mobile AJAX loader.

For example:

setTimeout(function(){
    $.mobile.loading('show',{ text:msg, textVisible:true, theme:'b', textonly:text_only});
}, 1);

One second is enough. Also take a look at my older answer, or this one. Basically I don't want to report this as a duplicate because I don't know if this is still a problem today. Please leave a comment telling me if this solution works or don't.