jQuery & AJAX login form

Question

Hi

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

Answer 1

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.

Answer 2

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.

Answer 3

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;
    });
}