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.