jQuery not displaying appended content

Question

When I drop a debug point in my source file I can see the following image:

But when I remove this debug point, I only see the following:

The change in color is affected by an overlay with some opacity.

The relevant code is:

  flashSuccessMessage = function(msg) {
    $('#overlay').hide();
    var $ch = $("#content-header");
    $ch.after('<div id="flash_message" class="alert"></div>');
    var $fm = $("#flash_message");
    $fm.addClass("alert-success");
    $fm.append(msg);
    $fm.show().children().show();
    $fm.fadeOut(3000);
    $fm.empty();
  }

And in this case msg is "Job Type Added Successfully"

I can't understand why I only see the message when I break on the execution after the point where I call $fm.append(msg); It doesn't matter which I break on after that (of the three lines), it will appear. When I don't have any break and let the page execute the script, the green alert appears but no words.

Any ideas?

I've tried various jQuery methods here - instead of .append() using .html() for example, and I've tried inserting the msg inside the with the flash_message id to begin, tried inserting the message wrapped in

tags, tried re-ordering things, (but I need to clear the contents of this div at the end...)

I've used jQuery's .delay() method, etc. Is it jumping to executing .empty() despite other elements using a timer to fully execute?

Answer 1

Add a callback to your fadeOut so that the contents aren't emptied until $fm is completely hidden:

  flashSuccessMessage = function(msg) {
    $('#overlay').hide();
    var $ch = $("#content-header");
    $ch.after('<div id="flash_message" class="alert"></div>');
    var $fm = $("#flash_message");
    $fm.addClass("alert-success");
    $fm.append(msg);
    $fm.show().children().show();
    $fm.fadeOut(3000, function(){   // empty() is not called until
      $(this).empty();              // the animation is complete
    }); 
  }

Without the callback, the empty() method is being triggered immediately after fadeOut() . This causes the content to be emptied BEFORE the animation is complete.

More information on jQuery's fadeOut method can be found in the docs .

Answer 2

The animations in JQuery are asynchronous, so the code keeps executing while the animation happens. .fadeOut has a completion block which you can read about at http://api.jquery.com/fadeOut/ .

So, instead of calling fm.empty() after your animation, you should put it inside a function and pass that function into fade out. That function will then run after the animation completes.

Answer 3

but I need to clear the contents of this div at the end...

Use html instead of append :

$fm.html(msg);
$fm.fadeOut(3000, function(){
  $fm.empty();
}); 

Check doc of fadeOut :

.fadeOut( [duration ] [, complete ] )

complete Type: Function() A function to call once the animation is complete.