jQuery & AJAX formulaire de connexion

Question

Je suis occupé à développer un site où j'ai une boîte de connexion dans le coin supérieur droit. Je veux que l'utilisateur puisse se connecter sur la même page, sans actualiser.

OK, je suis arrivé que le travail partiel, mais je me bats encore avec le processus post-connexion, mon regard comme suit:

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

(mon 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> 

Le journal en processus fonctionne, mais le journal est en brouillées. Lorsque je clique sur le lien Logout dans isLoggedIn.php, il se déconnecte, mais mes jQuery sur les entrées de texte ne fonctionnent plus, ainsi que jQuery sur le formulaire lui-même.

Existe-t-il un moyen que je dois actualiser mon jQuery pour réactiver sur le HTML remplacé? Toute aide appréciée.

Cordialement & TIA

Answer 1

Juste pour des précisions sur la réponse de redsquare, vous devez changer votre jQuery pour ce ...:

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

Answer 2

je ne l'utilise pas vraiment jQuery, mais je pense que les événements post et cliquez ne sont pas plus là car il a été mis à jour via ajax.

Vous devez à nouveau ajouter ces événements.

Vous pouvez créer une fonction attach() qui sélectionne les choses que vous voulez et attache les événements et les exécuter sur le rappel de votre demande.

Answer 3

Eh bien, vous remplacez le code HTML de sorte que vous perdrez les événements que vous avez liés précédemment aux éléments supprimés. Vous pouvez utiliser le rappel pour relier les événements après avoir remplacé le contenu html. Vous pouvez également regarder dans la méthode .live jQuery, mais cela ne fonctionnera pas pour l'événement submit, vous devrez donc toujours le relier après avoir modifié le formulaire.