loop jquery/ajax function?

Question

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>

Youve updated with local resources we cant access. semi related: You're including both the full and minified version of the same plugin! — Jamiec
– Jamiec, Commented Mar 3, 2015 at 12:55
@Jamiec it doesn't matter because my local resources for the flip jquery are simply the same as those available in the link I also posted I have merely copied the js files to a local directory — Kevin Parks
– Kevin Parks, Commented Mar 3, 2015 at 12:59
Yes, what I meant was that we cant ascertain the plugin from your local resources because we dont have them - but i see you linked to the plugin page too. — Jamiec
– Jamiec, Commented Mar 3, 2015 at 12:59

Dave Ward · Accepted Answer · 2015-03-03 13:35:19Z

1

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/

answered Mar 3, 2015 at 13:35

Dave Ward

60.7k14 gold badges119 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

loop jquery/ajax function?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related