2

I'm using JQuery Mobile 1.4.0 to build cross platform app and will be build by phonegap. For example I had two pages, one is #homepage, another is #detail page

<div id="home" data-role="page> Home Page 
   <a href="#detail">Go Detail</a>
</div>
<div id="detail" data-role="page> Detail Page </div>

JQuery Mobile default use ajax to load pages into DOM which is fine, my problem is that, before detail page show, I need get data from remote server via ajax call. I register ajaxStart and ajaxComplete event on document to show and show/hide spinner.

$(document).ajaxStart(function(){
  $.mobile.loading('show');
});
$(document).ajaxComplete(function(){
  $.mobile.loading('hide');
});

The problem is jquery mobile hide the loading spinner before ajaxComplete called in transition method, so actually $.mobile.loading('hide') will be called twice. That's not good because data haven't been populated into DOM so the detail page will be white blank then after a while data was inserted.

If you don't know what I'm saying, you could look into jquery mobile source code and you can see line 5070

this._triggerCssTransitionEvents( to, from, "before" );

// TODO put this in a binding to events *outside* the widget
this._hideLoading();

So my question is how to really hide the loading spinner after ajaxComplete not after page transition?

Thanks very much for your help.

2
  • In one of my recent apps I hid the spinner in the $(document).load event and also on the $(document).ajaxStop event, worked without any issues.
    – wf4
    Dec 19, 2013 at 14:18
  • @EthanZ This has frustrated me for a while now, have you resolved this? Jun 13, 2017 at 15:52

1 Answer 1

0

change from using complete to stop which will stop the loading spinner from hiding too soon.

$(document).ajaxStart(function() {
    $.mobile.loading('show');
});

$(document).ajaxStop(function() {
    $.mobile.loading('hide');
});
1
  • It's not working because jquery mobile actually hide the spinner when navigate between pages because of transition.
    – EthanZ
    Dec 19, 2013 at 15:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.