Question

I have a jQuery $.ajax call which works fine in all major browsers.

Additionally I make use of .ajaxStart and .ajaxStop functions to make
an invisible div on my page that says “loading…” , visible.

The problem is that while both ,ajaxStart and .ajaxStop , events fire
without any problems (I check it from the console.log()) , the .show event
of jQuery in ajaxStart is completelly ignored in Google Chrome.

Here is the code :

$("#loadMsg").ajaxStart(function(){
   console.log('ajaxstart');
   // the next command is ignored ONLY in Google Chrome
   $(this).show(0);
}); 

$.ajax({
  url:"xxx.php",
  type:"POST",
  data:"id="+id,
  async:false,
  success:function(data)
  {
     console.log(data); 
  }
});  

$("#loadMsg").ajaxStop(function(){
  console.log('ajaxfinish');
  $(this).hide(0);
});

I already tried:

$("#loadMsg").show(0);  
$("#loadMsg").fadeIn();  
$("#loadMsg").css("display","block");  
$("#loadMsg").css("display","inline");  

etc.

Any suggestions would be really appreciated.

Answer 1

After 2 days of struggling I finally found the solution.
The whole code I posted above was inside a function,which returned the result of xxx.php via the success property to the main code.

The problem was that when I used the async:true option ,the function returned immediately the return value without waiting for ajax to complete the request.
So the returned value had always a value of “undefined” and not the proper outcome of xxx.php.

The solution of running ajax asynchronous and proceeding with the rest of the code ONLY when the ajax request is completed , is to place the whole code inside success parameter.

I’ll try to make it clear with the following example:

Code that didn’t work :

function foo()
{

 if call_ajax_request()=="true"
  {
    //execute code A
    // never had the chance to be executed because call_ajax_request() 
    // was always undefined
  }

}



function call_ajax_request()
{

  var return_value;

  $.ajax({
  url:"xxx.php",
  type:"POST",
  data:"z="+y,
  success:function(data)
    {
           return_value = data;
        }
    }); 

    //return_value was always "undefined" because the flow didn't wait
   // for ajax to complete (async mode)
   return return_value;
}

code that finally did the job :

function foo()
{

  $.ajax({
   url:"xxx.php",
   type:"POST",
   data:"z="+y,
   success:function(data)
     {
            return_value = data;

            //here, the following code won't be executed 
            //as long as ajax hasn't been completed.

            if (return_value=="true")
            {
               //execute code A
            }
         }
   }); 

}