0

I am using ASP.NET MVC4 with jQuery mobile to build a mobile app for iPad.

I have a page with a submit button. On submit, it goes to another page. There is some time lag before the 2nd page loads and during that time, the user sees a white page.

How to show a loading animation instead of the white page?

I used http://www.tkglaser.net/2012/02/waiting-spinner-for-long-running-form.html, but the loading animation is shown momentarily in addition to the "white" page, I need to show it "instead".

Any ideas how to trap the event after you submit the form but before the 2nd page actually displays?

Gajotres
  • 57,309
  • 16
  • 102
  • 130
WhatsInAName
  • 724
  • 2
  • 12
  • 32

1 Answers1

0

It can be done, I made an example for you. It is not 100% what you have wanted (this is a rather complex example, you will need to click on a listview) but you will get the point: http://jsfiddle.net/Gajotres/AzXdT/

Basically what I do in my example is showing ajax loader when page is about to be hidden:

$(document).on('pagebeforehide', '[data-role="page"]',function(e,data){  
    var loader = setInterval(function(){
        $.mobile.loading('show');
        clearInterval(loader);
    },1); 
});

And hide it when another/same page is loaded:

$(document).on('pageshow', '[data-role="page"]',function(e,data){  
    var loader = setInterval(function(){
        $.mobile.loading('hide');
        clearInterval(loader);
    },1); 
});

setInterval is here because web kit browser have a problem showing ajax loader.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • JQuery `.live` method is obsolete. Use `.on` – Dmitry Efimenko Apr 30 '13 at 23:09
  • Thanks for your reply Gajotres, but the problem still remains. I put the code in _Layout.vbhtml and I can still see the white page for some time after I submit the form but before the next page displays. – WhatsInAName May 01 '13 at 18:19
  • It almost seems to me that the "in-between" state where the white is shown cannot be messed with. But that takes out the "native" feeling of a mobile web app. – WhatsInAName May 01 '13 at 18:42
  • Your problem is you are using jQuery Mobile in a way that is not intended for it. If possible, in this cases, it is better to pull data from server with ajax and dynamically build next page on a client side. This way you can easily show ajax loader and when page transition starts it will be instantaneous. Think about it. As I said jQuery Mobile was never created for classic server side page generation. – Gajotres May 01 '13 at 18:51
  • Thanks for the clarification. Actually, I am using jQuery mobile mainly for the mobile look and feel. This is a weird website (client requested) and almost every page has a different layout (I know, poor me!). After submitting the form, I am using ThinkGeo's map on the next page and users can interact with the map, so it has a lot of ajax calls itself. Not sure how to build that next page client side. Anyway, is there a javascript event I can use to catch that white page and show a loading message there? – WhatsInAName May 01 '13 at 20:36
  • I found this website http://m.cheapoair.com/flights. Any idea how they are showing the loading animation when you hit Search? I see that they are also using a form submit. – WhatsInAName May 01 '13 at 23:28