Show the ajax spinner via javascript

Wed Jun 20, 2012 9:55 pm

Hi,
I use the $.ajax() function to invoke a remote service within a Generic Service.
I suppose that a spinner (ie an animated gif and a gray layer) should appear.
This doesn't happen, so I thought to call the showSpinner() method within the beforeSend() method of the $.ajax(), and then call the hideSpinner() method on the complete() method.

But this does not work too.

What am I missing?

Thanks in advance

Thu Jun 21, 2012 6:09 pm

I think you also need to create the spinner:

code
createSpinner("http://tiggzi.com/resources/preview/lib/jquerymobile/images/ajax-loader.gif");
/code

Thu Jun 21, 2012 7:02 pm

No, still not working.
Now my code is something like:

$.ajax({
beforeSend: function (xhr, settings){ createSpinner("http://tiggzi.com/resources/preview/l...;
showSpinner();
},

Code: Select all

  complete: function (jqXHR, textStatus){ 
   hideSpinner(); 
  },

...
...
...
}

Thu Jun 21, 2012 8:16 pm

I checked the source, the spinner is created on page load so you don't need to create it. Can you post the entire code?

Thu Jun 21, 2012 8:55 pm

sure:

Code: Select all

   $.ajax({ 
  url:main_url, 
  dataType:"xml", 
  cache:false, 
  timeout: RoarApi.Config.timeout, 
  data:params, 
  type:"POST", 
  controller:controller, 
  action:action, 
  callback:callback, 
  errorCallBack:errorCallBack, 
  success: function ( data){ 
   RoarApiLog("ajax.success"); 
   RoarApiLog(data);  
   jsonData=$.xml2json(data); 
   var d = jsonData[this.controller][this.action]; 
   if (d.status === 'error') {  
    var callback_code = Roar.UNKNOWN_ERR; 
               var callback_msg = d.error.text; 
               if (d.error.type === "0"){ 
                  if (d.error.text==='Must be logged in') { callback_code = Roar.UNAUTHORIZED } 
                  if (d.error.text==='Invalid auth_token') { callback_code = Roar.UNAUTHORIZED } 
                 if (d.error.text==='Must specify auth_token') { callback_code = Roar.BAD_INPUTS } 
                  if (d.error.text==='Must specify name and hash') { callback_code = Roar.BAD_INPUTS } 
                  if (d.error.text==="Invalid name or password") { callback_code = Roar.DISALLOWED } 
                  if (d.error.text==="Player already exists") { callback_code = Roar.DISALLOWED } 
                  if (d.error.text==="Must specify name and hash") { callback_code = Roar.BAD_INPUTS }    
                 } //d.error.type === "0" 
              if (this.errorCallBack!=null) this.errorCallBack( jsonData, callback_code, callback_msg);                                
   }else{ //no errors     
    this.callback(jsonData); 
   }   
  }, 
  beforeSend: function (xhr, settings){ 
   createSpinner("[url=http://www.tiggzi.com/resources/preview/lib/jquerymobile/images/ajax-loader.gif")]http://www.tiggzi.com/resources/previ...[/url];  
   showSpinner(); 
  }, 
  complete: function (jqXHR, textStatus){ 
   hideSpinner(); 
  }, 
  error: function(jqXHR, textStatus, errorThrown){ 
   this.errorCallBack({status:textStatus,error:errorThrown},Roar.FATAL_ERROR,"ajax error");      
  } 
 });   //$.ajax

Fri Jun 22, 2012 4:46 am

Hello!

Spinner automatically displayed during AJAX request.
My snippet

$t.example = $t.createClass(null, {

Code: Select all

 init: function(requestOptions) { 
     this.__requestOptions = $.extend({}, requestOptions); 
 }, 

 process: function(settings) { 
    // showSpinner(); 
     $.ajax({ 
         url: '[url=http://search.twitter.com/search.json?q=tiggzi']http://search.twitter.com/search.json...[/url], 
         method: 'get', 
         complete: function() { 
            // do  something here 
              hideSpinner(); // or invoke  - settings.complete('success'); 
         },  
         success: function() {      
              // do  something  
         } 
     }); 

 }

});