title: AJAX Login form, update page content after logging in
body: <p>Imagine that I have a page, with a login/logout function in the header, which works fully via AJAX.</p>
  
  <p>If a user isn't logged in, I want to show him "Hey, login" and allow him to login via ajax. That's all good, and it works. </p>
  
  <p>But if the user logs in, I can't access anything that DIDN'T get put on the page -- the content that is there when the user accesses the page when they are successfully logged in.</p>
  
  <p>If I view the page source, elements are there, but if I do things such as <code>$("#container").show()</code>, <code>.slideDown()</code>, <code>.html()</code>, none of them are doing anything. </p>
  
  <p>Do I have to make the user refresh the page, or store all of the code in javascript to deploy? I hope not.</p>
  
  <p>I've included my Javascript for the login below, but that's not really the point. That's working. Where I say <code>$("#all").slideDown()</code> is the problem. Even when accessing it through the console, it won't do anything.</p>
  
  <p>The problem is probably related to dying with PHP if the user isn't logged in. This code is executed in  <code>$(function() { }</code></p>
  
  <p>Code:</p>
  
  <pre><code>/* Get the AJAX Login form Ready */
  $("#login-form").submit(function() { 
      $("#login-error").hide();
      var username = $("#username").val();
      var password = $("#password").val();
      if (username == "" || password == "") {
          $("#login-error").show();
          $("#login-error-heading").html("You've entered something wrong.");
          $("#login-error-content").html("Please enter both a username and a password.");
          return false;
      }
      $.get( 
          "process-login.php",
          {
              username:username,
              password : password
          }, function(data) {
              if (data.success == 1) {
                  /* Hide the login form */
                  $("#login").modal("hide");
  
                  /* remove the login button */
                  $('#nav-login').remove();
  
                  /* add the logout button to the DOM */
                  $("#nav-container").append('&lt;ul id="user-options" class="nav pull-right"&gt;&lt;li class="divider-vertical"&gt;&lt;/li&gt;&lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Logged in as ' + data.username + '&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a href="javascript:logout();"&gt;Logout&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;');
  
                  $("#all").slideDown();
              } else {
                  $("#login-error").show();
                  $("#login-error-heading").html("You've entered something wrong.");
                  if (data.success == 3) {
                      $("#login-error-content").html("This account is locked out because of incorrect password usage. Please try again in 10 minutes.");
                  } else {
                      $("#login-error-content").html("The username and password combination was not found.");
                  }
              }
          }, 
          "json"
      );
      return false;
  });
  </code></pre>