CODEWITHSUNDEEP
javascriptjqueryhtmlcss
notaceo
notaceo

Reputation: 1093

jQuery not displaying appended content

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

enter image description here

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

enter image description here

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?

Upvotes: 4

Views: 66

Answers (3)

Wes Foster
Wes Foster

Reputation: 8900

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.

Upvotes: 7

Joy
Joy

Reputation: 9550

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.

Upvotes: 0

Ryan
Ryan

Reputation: 71

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.

Upvotes: 0

Related Questions