jQuery & AJAX login form

Question

I am busy developing a site where I have a login box in the top right corner. I want the user to be able to log in on the same page, without refreshing.

OK, I got that part working, but I am still struggling with post-login process, my look as follows:

(HTML)

<li class="login">
<? if (!isset($_SESSION['logged_in'])) {
    include("isNotLoggedIn.php");
} else {
    include("isLoggedIn.php");
} ?>
</li>

(PHP)

session_start();

$username = $_POST['username'];
$password = $_POST['password'];

if ($username == "admin" && $password == "XXX") {
    $_SESSION['logged_in'] = true;
    $_SESSION['user'] = $username;

    echo include("isLoggedIn.php");
} else {
    echo include("isNotLoggedIn.php");
}

(my jQuery)

$("form#login").submit(
    function() {
        var usernameVal = $("input[name='username']").val();
        var passwordVal = $("input[name='password']").val();

        $.post("login.php",{username : usernameVal, password : passwordVal},
        // callback function to receive feedback
        function(data) {
            $("li.login").html(data);
        });
        return false;
    });

$("a[name='logout']").click(
    function() {
        $.post("logout.php",
            function(data) {
                $("li.login").html(data);
            });
    });

(isLoggedIn.php)

Welcome, <? echo $_SESSION['user']; ?>!<br />
<a href="#">Add game</a><br />
<a href="#">Add player</a><br /><br />
<a href="#" name="logout">Log out</a>

(isNotLoggedIn.php)

<form method="post" id="login">
    <input type="text" name="username" alt="Username" class="text" title="Username: Required" value="username" /><br />
    <input type="password" name="password" alt="Password" class="text" title="Password: Required" value="password" /><br />
    <input type="submit" name="submit" alt="Login" title="Login" value="Login" class="submit" />
</form>

The log in process works, but the log out is garbled. When I click on the Logout link in isLoggedIn.php, it logs out, but my jQuery on the text input's don't work anymore, as well as the jQuery on the form itself.

Is there a way that I must refresh my jQuery to reactivate on the replaced HTML? Any help appreciated.

Regards & TIA

KyleFarris · Accepted Answer · 2009-08-13 13:35:55Z

Just to elaborate on redsquare's answer, you would need to change your jQuery to this...:

$(function() {
    /** 
        ...What ever else you might have onload... 
    **/
    $("a[name='logout']").live('click',function() {  // Now using the .live() event
        $.post("logout.php", function(data) {
            $("li.login").html(data);
            bind_login_submit();     // <---- Notice, this is new
        });
    });
    bind_login_submit();    // Call this function to initially bind the submit
});

function bind_login_submit() {
    $("form#login").unbind('submit').bind('submit',function() {
        var usernameVal = $("input[name='username']").val();
        var passwordVal = $("input[name='password']").val();

        $.post("login.php",{username : usernameVal, password : passwordVal}, function(data) {
            $("li.login").html(data);
        });
        return false;
    });
}

redsquare · Accepted Answer · 2009-08-13 13:22:26Z

1

Well you are replacing the html so you will lose the events you earlier bound to the removed elements. You can use the callback to rebind the events after you have replaced the html content. You can also look into the .live jQuery method however this will not work for the submit event so you will always have to rebind this after changing the form.

answered Aug 13, 2009 at 13:22

redsquare

78.8k21 gold badges155 silver badges159 bronze badges

Comments

Ryan Florence · Accepted Answer · 2009-08-13 13:21:48Z

0

I don't really use jQuery, but my guess is that the post and click events aren't around anymore since it's been updated via ajax.

You've got to add those events again.

You could create an attach() function that selects the stuff you want and attaches the events and run it on callback of your request.

answered Aug 13, 2009 at 13:21

Ryan Florence

13.5k9 gold badges48 silver badges63 bronze badges

Collectives™ on Stack Overflow

jQuery & AJAX login form

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related