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?

Your $fm.empty(); empties the content and removes the message. — Joy
– Joy, Commented Aug 25, 2015 at 2:31

Wes Foster · Accepted Answer · 2015-08-25 02:40:09Z

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.

Ryan · Accepted Answer · 2015-08-25 02:36:00Z

0

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.

answered Aug 25, 2015 at 2:36

Ryan

715 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 25, 2015 at 2:37

Joy

9,59011 gold badges49 silver badges99 bronze badges

Collectives™ on Stack Overflow

jQuery not displaying appended content

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related