jQuery Executing Loading Message After Ajax Finished Loading!

This seems to drive me batty.

I try showing an ajax loader gif before making the ajax call. Firefox is the only browser that seems to do this in order. All other browser finish the ajax call first and then show the loader.

this the co开发者_如何学JAVAde:

$(#element).click(function(evt){

  tmp_eleX = $this.offset().left;  // get current left position of element 
  tmp_eleY = $this.offset().top;   // get current top position of element  

  $('#ajax_loader').css({top: tmp_eleY-208}); // show ajax loader which was placed outside viewable area (-9999)

  $.ajax({
    url: "some_file.cfm",
    cache: false,
    dataType: "html",
    async: false, // wait for loading to finish before continuing code
    timeout: 30000,
    error: function(){
      return true;
    },
    success: function(data) {
      $('#someelementtoinject_ajaxdata').html(data);
    }
  });                        

  $('#ajax_loader').css({top: -9999}); // move ajax loader off screen - for testing i comment out this line to see when the loader shows!

});

This is driving me batty. I tried wrapping the Ajax call in

window.setTimeout(function(){
}, 0);

The Ajax Loader show before the ajax call in all browser, PROBLEM the animated GIF is NOT ANIMATING until ajax finished loading stuff!

I also tried:

  $('#ajax_loader')
    .ajaxStart( function() {
      $(this).css({
        top: -208
      })
    })
    .ajaxStop(function(){
      $(this).css({
        top: -1000                          
      })
    });

Same result Ajax finished before .ajaxStart triggers, heck :/! Here too, only Firefox works properly and shows animation before ajax call.

the only way it seems to work in all browser is setting the ajax call 'async: true'. It is kinda vital for the ajax to load completely before continuing and possibly trigger another ajax call on the page.

Any Idea on how I can trigger the loader before the before ajax completes its thing? Also the ajax needs to be finished before code continues.

I didn't expect this @^&^#@ my brain is bleeding :/

async: false, // wait for loading to finish before continuing code

That would appear to be your problem - you aren't making the AJAX call asynchronously, therefore (I'd guess), control isn't returning to the browser, so it can't respond to the 'show the gif' action until after the AJX call returns.

Thanks for the quick answers ...

I solved the problem by adding a global variable which also made it an option to put async: true. I set the global flag as last action within the success function of the ajax call.