jquery mobile custom loading message does not show until time to close it

Question

I am trying to use the loading widget to show when some time consuming work is being done on my page. I modified the code on the demo page (), it works except for when I add a function call to the .onclick, it will not show up until after the called function is completed, which defeats the purpose entirely.

$('#fstart').on('click', function(e) {       
    $.mobile.loading( "show", {
            text: 'Processing Schedule File.',
            textVisible: 'true',
            theme: 'a',
            textonly: false
    });
            /* The loading window is closed by the called function */
    handleProcessing();
})

What do I need to do to get the loading widget to pop up when I call it?

Thanks,

Eric

@Gajotres - Sorry, forgot to add that this works in FF, but not Chrome or IE. — drex_ej, May 23 '14 at 20:41

score 3 · Accepted Answer · edited May 23 '17 at 11:57

3

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 milisecond is enough. Also take a look at my older answer, or this one. You will find working examples in my older answers. Usually I would close this question as a duplicate but I was not active here since last year and that was also a time I list so this problem.

So please be kind and tell me if this solution solved your problem.

edited May 23 '17 at 11:57

Community

1
1

answered May 23 '14 at 20:53

Gajotres

57,309
16
102
130

Thank you very much. It is working in FF, Chrome and on the Android tablet they'll be using. It still isn't working in IE11, but that isn't a concern for this project. – drex_ej May 23 '14 at 21:19

jquery mobile custom loading message does not show until time to close it

1 Answers1