Forum | Appery.io

Hello,

I want to add a loading spinner when a user searches our database that will spin until the entire page and all database entries have loaded. The user would not be able to enter data until the entire page was loaded. Similar to how the Appery.io iOS app has one as you log in.

A bonus would be to edit the text of the spinner as well, but I'd appreciate any direction on this.

Seems simple enough, but I am not sure exactly how to implement it.

Hi Jon,

You can use such spinner: http://demos.jquerymobile.com/1.2.0/d...

Thank you for the reply. I should have explained I have very little experience with javascript/jQuery and I would not be able to implement that.

Could someone just post a code snippet here for me that I could cut & paste then tell me when to invoke javascript on the page? Like if it is "On Load" etc.

That would be really helpful.

Jon,

1) Add custom JavaScript: pre$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "";
});/pre
2) Add Load event handler:pre$.mobile.loading( 'show', {
text: 'foo',
textVisible: true,
theme: 'z',
html: ""
});/pre
3) Remove spinner when page is ready, for example, on Page Show event:pre$.mobile.loading('hide');/pre

Thank you again, I feel so close but it still is not working in Appery. I actually got it to work on it's own without Appery where my confusion lies is why I cannot implement it in Appery.

Here are my exact steps as you were so kind to outline above:

1. Create -- Custom Javascript

2. Create Blank Javascript & Rename

3. Hit Create

4. Paste the following code:

   $(document).bind('mobileinit', function() {
   $.mobile.loader.prototype.options.text = "loading";
   $.mobile.loader.prototype.options.textVisible = true;
   $.mobile.loader.prototype.options.theme = "c";
   $.mobile.loader.prototype.options.html = "";
   });

5. Auto-Format Code and close Custom Javascript Box.

6. Open my page that I would like the spinner on.

7. Open Events Tab & Add Event

8. "On Load" -- Run Javascript Paste The Following Code:
   $.mobile.loading('show', {
   text: 'foo',
   textVisible: true,
   theme: 'z',
   html: ""
   });

9. Format Javascript and save event.

10. Events -- Add New "On Page Show" Run Javascript:
    $.mobile.loading('hide');

    The jQueryMobile Spinner doesn't even appear this way. Any more insight? This would make my life much better. I'm coming over from strictly HTML/CSS and CMS to this and Appery has been awesome I just really would like to add this to my new app.

    Thx
    Jon

It actually seems to be working now. I will repost if this changes. But to anyone interested in implementing this use the exact steps above.

I was using the Appery.io Tester on iOS and I think it maybe just needed to be refreshed.

Hi Jon,

Thank you for the update! Let us know if you need any help.

So here's the solution:

Events:

1. Add Custom Javascript

2. Run Javascript "On Page Show"
   $(document).bind('mobileinit', function() {
   $.mobile.loader.prototype.options.text = "loading";
   $.mobile.loader.prototype.options.textVisible = true;
   $.mobile.loader.prototype.options.theme = "c";
   $.mobile.loader.prototype.options.html = "";
   });

3. Invoke Your Query, Read or List Service

4. "On Success" of Query, Read or List Service
   Run Javascript: $.mobile.loading('hide');

   This worked for me. Thank you Katya for your help, it helped me out immensely and I love my new app even more now.

   Jon

Jon,

Thank you for sharing this!