Trying To Have A Jquery Flash Message After An Ajax From Submit In Show Again After More Than One Form Submit (in Rails)

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 Jquer

Solution 1:

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);

Solution 2:

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>