Default ajax spinner freezes

Wed Jul 17, 2013 9:16 pm

The default ajax spinner for REST services (which I don't mind using) freezes half way through the service request. Any way to get that working smoothly?

Wed Jul 17, 2013 9:23 pm

Hello!

Could you please send us screenshot?
Check the browser console for any error.

Wed Jul 17, 2013 9:29 pm

There are no errors, the service executes correctly, just the .gif is frozen. Also, it works almost flawlessly in the simulator (sorry I forgot to mention that). Here is a screenshot from my phone (iPhone 5, ios 6.1.4).

(names are fake)

Wed Jul 17, 2013 11:01 pm

Please look at a simmilar question https://getsatisfaction.com/apperyio/...

Thu Jul 18, 2013 12:05 am

Thanks, I've seen been on this thread. The solution provided is a workaround that requires adding a custom ajax spinner each time you call a service. I have about 50 services set up and it would be nice to fix the one currently in place

If not, it's not the end of the world. I would make a suggestion to add the ability to include a custom spinner for REST services, or at least one made in css and not a gif. I don't know if anyone else would appreciate it, but I know it would sure save me time

Thu Jul 18, 2013 7:41 am

Hello! If you want to implement CSS spinner this should help http://cssload.net/

Thu Jul 18, 2013 9:00 pm

Thanks for he help Marina and Alena, I ended up modifying Neil's code from https://getsatisfaction.com/apperyio/... and came up with this...

code
var spinner = new Object();

//show spinner or create one
spinner.show = function(target)//requires page object, I usually use $('.ui-page-active') for current page
{
try
{
if(target.find('.SpinnerAdd').length <= 0)//if spinner has not been created
{
$('<div class="SpinnerAdd" align="center"><div></div><div></div><div></div></div>').prependTo(target).css({'margin':'-26px','position':'absolute','right':'50%','top':'45%','z-index':'2002'});//create spinner
}
else
{
$('.SpinnerAdd').show();//show spinner
}
}
catch(err)
{
console.log("spinner.show: " + err);
}
}

Code: Select all

 &#47;&#47;show backdrop or create one 
 spinner&#46;backdrop = function(target)&#47;&#47;requires page object, I usually use $('&#46;ui-page-active') for current page 
 { 
     try 
     { 
         if(target&#46;find('&#46;Backdrop')&#46;length <= 0)&#47;&#47;if backdrop has not been created 
         { 
          $('<div class="Backdrop"&#47;>')&#46;prependTo(target)&#46;css({'background-color':'black','opacity':'0&#46;8','width':'100%','height':'200%','top':'0px','position':'absolute','z-index':'2000'});&#47;&#47;create backdrop 
         } 
         else 
         { 
             $('&#46;Backdrop')&#46;show();&#47;&#47;show backdrop 
         } 
     } 
     catch(err) 
     { 
         console&#46;log("spinner&#46;backdrop: " + err); 
     } 
 } 

 &#47;&#47;hide spinner and backdrop 
 spinner&#46;hide = function() 
 { 
     try 
     { 
         $('&#46;Backdrop')&#46;hide();&#47;&#47;remove backdrop 
         $('&#46;SpinnerAdd')&#46;hide(); &#47;&#47;remove spinner 
     } 
     catch(err) 
     { 
         console&#46;log("spinner&#46;hide: " + err); 
     } 
 }

/code

use...
code
spinner.show(page object); //show spinner
spinner.backdrop(page object); //show backdrop
spinner.hide(); //hide spinner and backdrop
/code