Question

Hi so at success on my ajax call, it prepends the response:

 $("#nowCurrentComment" + bID).prepend(msg); 

Now, if you use the form that executes the ajax call more than once, then the first time that is prepended doesnt remove, but it just add the new prepended msg besides it..

I want to fadeout the old if exist and fadein the new. Is it possible?

So i dont it get like this:

When i pressed the submit button once:

Comment1

when i pressed twice:

Comment1Comment1

Answer 1

Sure, just don’t prepend the content. Switch a sub-element instead.

So if your DOM was…

<div id="nowCurrentComment123">
  <span class="message"></span>
</div>

Then your script would be…

var $msg = $("#nowCurrentComment123").find('.message');
// if it already has a message, fade it out, add the text, then fade it back in
if ( $msg.text().length ) {
  $msg.fadeOut('fast', function(){
    $msg.text( msg ).fadeIn('fast');
  });
} else {
  // otherwise just hide it, add the text, and then fade it in
  $msg.hide().text( msg ).fadeIn('fast');
}