CODEWITHSUNDEEP
javascriptjqueryajaxfadeout
Sharan Mohandas
Sharan Mohandas

Reputation: 871

Notifications works only First time - AJAX

I have created a login system. Login Form submission through AJAX.

However the Response show only the first time. ie. Suppose i enter the Wrong credentials first. The response shows. But when I enter new credentials again it doesn't show the response message. Sorry I'm relatively new to JQuery.

Gven below is the Jquery code

<script type="text/javascript">
    $(document).ready(function() {
        var form = $('#loginform');
        form.submit(function (ev) {
        ev.preventDefault();
        $.ajax({
            type: form.attr('method'),
            url: form.attr('action'),
            cache: false,
            data: form.serialize(),
            success: function (data) {
                if(data == 1){
                    $("#user-result").html("<font color ='#006600'> Logged in | Redirecting..</font>");
                    setTimeout(
                    function() 
                    {
                        window.location.replace("index.php");
                    }, 1000);
                }
                else{
                    $("#user-result").html(data).delay( 2500 ).fadeOut( 800 );
                }
           }
        });        
    });
});
</script>

I think it might be the problem with Fadeout. Any Help?

Upvotes: 1

Views: 102

Answers (4)

Akmal Arzhang
Akmal Arzhang

Reputation: 122

You need to use setInterval(function(){}); in order to cycle each time.

Upvotes: 0

Nageshwar Reddy
Nageshwar Reddy

Reputation: 32

once any element fadeout, it wont appear until page reloaded or fadeIn()

                    if(data == 1){
                        $("#user-result").html("<font color ='#006600'> Logged in | Redirecting..</font>").fadeIn("slow");

                        setTimeout(
                              function() 
                              {
                                window.location.replace("index.php");
                              }, 1000);

                    }
                    else
                    {
                        $("#user-result").html(data).delay( 2500 ).fadeOut( 800 );
                    }

when data ==1, use fadeIn()

Upvotes: 0

Kirill Pisarev
Kirill Pisarev

Reputation: 843

Yes, the problem with fadeout that hides message container. Before showing new message you have to show container back:

$("#user-result").html("<font color ='#006600'> Logged in | Redirecting..</font>").show();

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388416

Since you are using fadeOut(), the user-result element is hidden when the second notification comes. So

$("#user-result").html("<font color ='#006600'> Logged in | Redirecting..</font>").show();
$("#user-result").html(data).show().delay( 2500 ).fadeOut( 800 );

Upvotes: 3

Related Questions