Trying to have a JQuery flash message after an aja

Question

I have a form that simply adds a new key name through ajax. I want a message to show every time the user adds a new key (not from a popup box). I'm using Ruby on rails so the Jquery coding below is executed when the data is successfully added to the db.

This is the JQuery coding that runs after an ajax from submit.

$('#status-area').html("");

$('#status-area').append("key added successfully");

$('#status-area').fadeOut(3000);

and here is the div

  <div id="status-area"></div>

It works Just like I want for the first submit. Simply removing any previous text in the div and saying 'Key added successfully' then fading out. Problem is if I submit the form again a new key is added but the message doesn't show again.

It should run through this coding again on the second submission removing the old text and re appending the message but it doesn't.

How come it doesn't show again?

Answer 1

Wen you use the jQuery fadeOut() method, it decreases the opacity of the html element to from 1 to 0 in the time given in milliseconds as an argument (default 400).

You need to set the opacity of your div to 1 before you append the text. Modify the snippet as below and it should work fine:

$('#status-area').css("display","block"); //div is by default a block element

$('#status-area').html("");
$('#status-area').append("key added successfully");
$('#status-area').fadeOut(3000);

With your code, the text is getting appended but as the div is now transparent, it's not visible to you. If you inspect it in the browser you might get the display property set to none in the style attribute of the div

<div id="status-area" style="display:none"></div>

Answer 2

It's normal behaviour because fadeOut will set the display: none

so you will have to use

$('#status-area').fadeIn();

$('#status-area').html("");

$('#status-area').append("key added successfully");

$('#status-area').fadeOut(3000);