CODEWITHSUNDEEP
jqueryajax
Kevin Parks
Kevin Parks

Reputation: 95

loop jquery/ajax function?

I have the following ajax/jquery code which I am using, if a user submits the wrong login details my div surrounding the login form is flipped and tells the user they entered the incorrect login details or vice versa if the user submits the correct login details it flips the div and says the login details were correct.

However if my user types in the wrong username or password and the div is flipped then it tells them they entered the incorrect login details and they then try again and enter the correct details the div does not flip and the user has to refresh the page for the jquery to work.

Is there a reason for this? please can someone show me what I am doing wrong? thanks

I am using the following flip plugin: http://lab.smashup.it/flip

<script src="assets/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/jquery/flip/jquery.flip.js"></script>
<script type="text/javascript" src="assets/jquery/flip/jquery.flip.min.js"></script>
<script src="assets/jquery/jquery-ui.js"></script>



<script type="text/javascript"> 
$(document).ready(function () {
    $("#submit").click(function () {
        var myusername = $("#myusername").val();
        var mypassword = $("#mypassword").val();
        if (myusername == null || myusername == "" || mypassword == null || mypassword == "") {
            if (myusername == null || myusername == "") {
                document.forms["form"]["myusername"].style.border = "2px solid #963634";
            }
            if (mypassword == null || mypassword == "") {
                document.forms["form"]["mypassword"].style.border = "2px solid #963634";
            }
            $(".home_column").effect("shake");
        } else {
            // Returns successful data submission message when the entered information is stored in database.
            $.post("include/validate_login.php", {
                username1: myusername,
                password1: mypassword
            }, function (data) {
                if (data == 'login_wrong') {
                    $(".home_column").flip({
                        direction: 'lr',
                        color: 'rgba(138, 138, 138, 0.2)',
                        content: '<h2s1>Incorrect Login Details</h21>'
                    })
                    setTimeout(function () {
                        $(".home_column").revertFlip()
                    }, 2500);
                } else {
                    if (data == 'login_success') {
                        $(".home_column").flip({
                            direction: 'lr',
                            color: 'rgba(138, 138, 138, 0.2)',
                            content: '<h2s1>correct Login Details</h21>'
                        })
                        setTimeout(function () {
                            $(".home_column").revertFlip()
                        }, 2500);
                    }
                }
                $('#form')[0].reset(); // To reset form fields
            });
        }
    });
});

</script>

Upvotes: 1

Views: 76

Answers (1)

Dave Ward
Dave Ward

Reputation: 60580

It looks like the Flip! plugin doesn't preserve event handlers at some point either when the flip happens or when you call the revertFlip() method. So, after you show a message and then revert back to showing the login form, your $('#submit').click() handler is gone.

You can use event delegation to attach that handler higher up in the DOM so that it survives the local shuffling that Flip! is doing to show/hide things. Change this line:

$('#submit').click(function() {

To this:

$(document).on('click', '#submit', function() {

After you do that, you don't really need to wrap the whole thing in $(document).ready() either. Using it won't prevent anything from working, but could slightly slow down how long it takes for that handler to be active: http://encosia.com/dont-let-jquerys-document-ready-slow-you-down/

Upvotes: 1

Related Questions