Question

I am using ajax to allow the user to filter content that appears in a target div (var target).

While the content loads, I show a div containing a loader image ('#loader').

However, when the ajax call is done, IE doesn’t re-hide the loader as other browsers do.

It also indentifies the the setTimeout() call (in the ajax callback) as an ‘invalid argument’.

If I didn’t find this so baffling I wouldn’t ask here. Thanks!

CODE:

function run_ajax() {
  $.ajax({
    url: 'artworks_ajax',
    beforeSend: function(){
        target.empty();
        $('#loader').fadeIn();
    },  
    complete: function() {
        $('#loader').fadeOut('fast')
    },  
    data: {
      'select' : 'artworks',
      'artwork-filter': JSON.stringify(filter)
    },  
    success: function(data) {
      target.hide();
      target.html(data);
      fireMasonry();
      reloadMasonry();  // masonry needs reminding how big its div is
      setTimeout(
        fadeUp()
      , 1000); // pause necessary to give masonry time to fix itself in place
      }   
  }); 
}  

Answer 1

There is a semicolon missing at the end here:

$('#loader').fadeOut('fast') 

Also, the first argument to setTimeout should be a function, while here you are calling the function and using its return value. Assuming that fadeUp is a free function, it should be like this:

setTimeout(fadeUp, 1000);