An AJAX method I am trying to use is disabling another jQuery method

Question

This chunk of AJAX

            $('input#adminLogin').on('submit', function() {
                var username = $('#username').val();
                var password = $('#password').val();
                if (username == '' || password == '')
                    $('#errForm').fadeIn(200).text('You must enter a username and password');
                else {
                    $.ajax ({
                        type: 'post',
                        url: '/classes/login/Authenticator.php',
                        data: $('#login_form').serialize(),
                        cache: false,
                        success: function(data) {
                            if(data == 'You entered an invalid username or password');
                                $('.actionDiv').fadeIn(200).html(data);
                            else
                                $('.fade_bg').fadeOut(200);
                        }
                    });
                }
            });

Is making this jQuery

$('a#aLogin').on('click', function (e) {
    e.preventDefault();
    $('.fade_bg').fadeIn(200);
    $('a#aLogin').hide();
});

not work, whether or not I have e.preventDefault() in the AJAX method. How come?

HTML

<div class="fade_bg">
        <div class="actionDiv">
            <span id="errForm"></span>
            <form id="login_form" action="./classes/login/Authenticator.php" method="post">
                <p>username: <input type="text" name="username" id="username" /></p>
                <p>password: <input type="password" name="password" id="password" /></p>
                <p><input type="submit" name="adminLogin" value="Log in" id="adminLogin" /></p>
            </form>
            <p><a id="cancelLogin" href="">Cancel</a></p>
        </div>
        <div id="topRight">
                <a id="aLogin" href="">Admin login</a>
                <form id="exit" action="./classes/login/ExitDoor.php" method="post">
                    <p>
                    <?php
                        if ($_SESSION['logged-in'] == 1)
                            print '<span id="greeting">Welcome, ' . $_SESSION['firstName'] . ' | </span>';
                    ?>
                    <input id="aLogout" type="submit" name="adminLogout" value="Log out" />
                    </p>
                </form>
            </div>

Have you tried placing a `return false;` at the end of `.on('submit', function() {` — Adil Shaikh, May 10 '13 at 18:36
I did. Didn't work. I tried putting it at the beginning and at the end. — Monica, May 10 '13 at 18:38
Do you mean click on `$('a#aLogin')` is not triggered ? any console error's.. try with `console.log("clicked")` inside click handler... — Adil Shaikh, May 10 '13 at 18:41
Most likely you are replacing the anchor tag with an id of `aLogin`, resulting in it losing it's events. http://learn.jquery.com/events/event-delegation/ — Kevin B, May 10 '13 at 18:43
What do the contents of `actionDiv` look like after the ajax call? Is it possible it contains elements with IDs that have duplicates elsewhere in the HTML? — mccannf, May 10 '13 at 18:47
It was a small syntax error. It's working now, but the form isn't acting the way I want it to. — Monica, May 10 '13 at 18:51

score 0 · Answer 1 · answered May 10 '13 at 21:41

You have a syntax error in your first snippet. That's why the second one isn't executed anymore.

Remove the semicolon at the end of this line

if(data == 'You entered an invalid username or password'); <--

All major browser have built-in developer tools. You can find such errors very quick by having a look at the developer console.

In your example chromes console would show you this - http://i43.tinypic.com/xqg48.jpg

An AJAX method I am trying to use is disabling another jQuery method

1 Answers1