jQuery & AJAX Login Formular

Question

Ich bin damit beschäftigt, eine Seite zu entwickeln, wo ich eine Login-Box in der oberen rechten Ecke habe. Ich möchte, dass sich der Benutzer auf derselben Seite anmelden kann, ohne dass er aktualisiert wird.

OK, ich habe diesen Teil arbeiten, aber ich bin immer noch kämpfen, mit Post-Login-Prozess, mein Aussehen wie folgt:

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

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

Der Anmeldevorgang funktioniert, aber das Protokoll aus verstümmelt wird. Wenn ich auf den Abmelden-Link in isLoggedIn.php klicke, meldet er sich ab, aber mein jQuery auf den Texteingaben funktioniert nicht mehr, genauso wie die jQuery auf dem Formular selbst.

Gibt es eine Möglichkeit, dass ich meine jQuery aktualisieren muss, um das ersetzte HTML zu reaktivieren? Jede Hilfe wird geschätzt.

Grüße & TIA

Answer 1

einfach zu erarbeiten auf redsquare Antwort, würden Sie benötigen, um Ihre jQuery dies zu ändern ...:

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

ich nicht wirklich nutzen jQuery, aber meine Vermutung ist, dass die Post und klicken Sie auf Ereignisse sind nicht mehr da, da es über Ajax aktualisiert worden ist.

Sie müssen diese Ereignisse erneut hinzufügen.

Sie könnten eine attach() - Funktion erstellen, die das gewünschte Material auswählt und die Ereignisse anfügt und beim Rückruf Ihrer Anfrage ausführt.

Answer 3

Nun, Sie ersetzen das HTML, so dass Sie die Ereignisse verlieren, die Sie früher an die entfernten Elemente gebunden haben. Sie können den Rückruf verwenden, um die Ereignisse erneut zu binden, nachdem Sie den HTML-Inhalt ersetzt haben. Sie können auch nach der .live jQuery-Methode suchen, dies wird jedoch nicht für das submit-Ereignis funktionieren, so dass Sie diese immer wieder binden müssen, nachdem Sie das Formular geändert haben.