Add and then remove <p>

Question

I want add <p> with text when my form have some error. I write some js code, but it does not work now. My question is: how can i add text, if i have error, show it 1800 ms, add then remove this text?

$(document).ready(function () {
    ........................
        error: function () {
            $('form').append("<p class='er-msg'></p>").text('Maximum upload size 50MB. Please try again');
            $('.er-msg').animate({ opacity: 0} , 1800);
            $('.er-msg').remove();   //don't work 
        }
    };
   ....................
});

I hope someone help me.

Answer 1

Now your animation takes 1800ms and, from what I understand, you want a delay of that time before you hide the message. So you should start with a setTimeout like this

setTimeout(function () {
    $('.er-ms').animate({ opacity: 0} , 1800);
}, 1800);

jQuery animate takes a 3rd parameter, which is a function that will be called after the animation is over. Then you can add this, to make the message disappear.

setTimeout(function () {
    $('.er-ms').animate({ opacity: 0} , 1800, function () {
        $(this).hide().remove();
    });
}, 1800);

When you put this in the error callback, after the append line, and get rid of the last two, you should be good to go.

Answer 2

Another way to do is it to create the <p> and set it to display: none then you can just toggle it as needed.

html:

<p class='er-msg'>Maximum upload size 50MB. Please try again</p>

CSS:

.er-msg {
  display: none
}

jQuery:

error: function () {
            $('.er-msg').fadeIn("slow");
            setTimeout(function(){
               $('.er-msg').fadeOut("slow");
            }, 1800);
        }

As a personal suggestion, I would make the timer slightly higher to accommodate people that don't read fast. This way your error message is effective for anyone that happens to see it.

JSFIDDLE DEMO

Answer 3

Is the actual append even happening?

I suspect it is not because you are appending <p> dynamically.

In order to successfully bind to this, you will be need to target its wrapper.

for example:

$('form').on(eventname, targetElement, function(){
 ....the behavior you want
});

you can check out this blog post for more info: http://blog.ning-xia.com/accessing-dynamically-created-elements-with-jquery/

Answer 4

The append of <p> is not working that's why you can't remove it. Try it this way:

   $(document).ready(function () {
        ........................
            error: function () {
                $('form').append("<p class='er-msg'></p>");
                $('.er-ms').text('Maximum upload size 50MB. Please try again');
                $('.er-ms').animate({ opacity: 0} , 1800);
                $('.er-ms').remove();   
            }
        };
       ....................
    });

Answer 5

Simple solution

Here is an example how you could do this:

var errorMessage = 'test message';
$('#question-header').append(
    $(
        '<p class="er-msg">' + 
             errorMessage  +
        '</p>'
    ).animate(
        {opacity: 0},
        1800,
        function(){
            $(this).remove();
        }
    )
);

You can call a function inside animate that runs after animation is complete. Try to run this on this page in your console. Note that with this multiple error can be thrown in different orders and they will all show the correct behavior. You couple the animation and the removal to all your unique error messages in a simple way.

Your code does not work because text should be called on that created element not the element your appending it to.

Proper way:

$('form').append($('<p class="er-msg"></p>').text('Maximum uplo...'));

But I think the example above is a lot more readable, abstract and more performant.