CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Freelancer Help
Freelancer Help

Reputation: 191

Remove last div instead of removing them all using jQuery timeout

I'm using AJAX to submit the form without reloading. I'm using it for my register form. After I catch my error/success message I append it to my div and remove it after 5 seconds using timeout function.

Now if the user clicks on the button and gets error, and then again clicks the button (before 5 seconds pass) the second error message div will appear with the same error but it will be removed at the same time the first one is removed. So what I'm trying to achieve is to set my error/success messages to have individual timeouts. So first error appears, then after 2 seconds I press the button again and get second error, now the first error will be removed after 5 seconds, and the second will stay untill its 5 seconds pass.

So I have a div in my HTML code with the id "msg-response", where my error/success messages appear. And here is how I call them:

$("#registerform").submit(function(event) {
    var ajaxRequest;
    event.preventDefault();
    $("#result").html('');
    var values = $(this).serialize();
       ajaxRequest = $.ajax({
            url: "include/auth/register.php",
            type: "post",
            data: values
        });
    ajaxRequest.done(function (response){
         if ($.trim(response) == 'error') {
            $("#msg-response").prepend("<div class='error-msg'>Email format isn't valid. Try again.</div>").hide().fadeIn("slow");
            setTimeout(function() {
                $('.error-msg').fadeOutAndRemove('slow');
            }, 5000);
         }
    });

    ajaxRequest.fail(function (){
        alert("error");
    });

});

So how can I add individual timeouts to each div appeared? And not one timeout for all divs with class .error-msg.

Thanks in advance.

Upvotes: 0

Views: 58

Answers (2)

Marcelo The Mage Coder
Marcelo The Mage Coder

Reputation: 2202

You can store your .error-msg inside a var and then remove it by var reference:

var error = $("<div class='error-msg'>Email format isn't valid. Try again.</div>"); 
error.fadeOutAndRemove('slow');

Final code:

     if ($.trim(response) == 'error') {
        var error = $("<div class='error-msg'>Email format isn't valid. Try again.</div>");

        $("#msg-response").prepend(error).hide().fadeIn("slow");
        setTimeout(function() {
            error.fadeOutAndRemove('slow');
        }, 5000);
     }

Upvotes: 2

Freelancer Help
Freelancer Help

Reputation: 191

Intresting, I got it working by making my error-msg div to be an ID instead of CLASS, so like this:

$("#registerform").submit(function(event) {
    var ajaxRequest;
    event.preventDefault();
    $("#result").html('');
    var values = $(this).serialize();
       ajaxRequest = $.ajax({
            url: "include/auth/register.php",
            type: "post",
            data: values
        });
    ajaxRequest.done(function (response){
         if ($.trim(response) == 'error') {
            $("#msg-response").prepend("<div id='error-msg'>Email format isn't valid. Try again.</div>").hide().fadeIn("slow"); // Changed line
            setTimeout(function() {
                $('#error-msg').fadeOutAndRemove('slow'); // Changed line
            }, 5000);
         }
    });

    ajaxRequest.fail(function (){
        alert("error");
    });

});

I'm confused a little, so can atleast someone write me explanation why its good now that I'm using ID and not while using classes? And is this the right approach?

Upvotes: -1

Related Questions