title: jQuery & AJAX login form
body: <p>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.</p>
  
  <p>OK, I got that part working, but I am still struggling with post-login process, my look as follows:</p>
  
  <p>(HTML)</p>
  
  <pre><code>&lt;li class="login"&gt;
  &lt;? if (!isset($_SESSION['logged_in'])) {
      include("isNotLoggedIn.php");
  } else {
      include("isLoggedIn.php");
  } ?&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>(PHP)</p>
  
  <pre><code>session_start();
  
  $username = $_POST['username'];
  $password = $_POST['password'];
  
  if ($username == "admin" &amp;&amp; $password == "XXX") {
      $_SESSION['logged_in'] = true;
      $_SESSION['user'] = $username;
  
      echo include("isLoggedIn.php");
  } else {
      echo include("isNotLoggedIn.php");
  }
  </code></pre>
  
  <p>(my jQuery)</p>
  
  <pre><code>$("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);
              });
      });
  </code></pre>
  
  <p>(isLoggedIn.php)</p>
  
  <pre><code>Welcome, &lt;? echo $_SESSION['user']; ?&gt;!&lt;br /&gt;
  &lt;a href="#"&gt;Add game&lt;/a&gt;&lt;br /&gt;
  &lt;a href="#"&gt;Add player&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;a href="#" name="logout"&gt;Log out&lt;/a&gt;
  </code></pre>
  
  <p>(isNotLoggedIn.php)</p>
  
  <pre><code>&lt;form method="post" id="login"&gt;
      &lt;input type="text" name="username" alt="Username" class="text" title="Username: Required" value="username" /&gt;&lt;br /&gt;
      &lt;input type="password" name="password" alt="Password" class="text" title="Password: Required" value="password" /&gt;&lt;br /&gt;
      &lt;input type="submit" name="submit" alt="Login" title="Login" value="Login" class="submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Is there a way that I must refresh my jQuery to reactivate on the replaced HTML? Any help appreciated.</p>
  
  <p>Regards &amp; TIA</p>