Jquery: Ajax Issue

[Cryzabey]

Here's a rundown of what happens.

• I enter my test username and password into the input fields and click "Login".
• A small loader image takes the place of the login form while the server processes my login request.
• The loader is then replaced with the results of the login request.
• If successful, the username of the account and a logout button are presented.
• If the logout link is clicked, nothing happens.
• However, if the page is refreshed and the logout button is pressed...
• The username and logout button are removed and replaced with a small loader image while the server processes the logout request.
• The loader is then replaced with the login form.

What I need help with is making it so the user does not have to refresh the page in order to logout. Any help, at all, is appreciated.

<script type="text/javascript" charset="utf-8">$(document).ready(function() {// AJAX Login	$("#login-form").submit(function() {		// Password and Username Values		// #name has to be equal to the ID value of the html field		var unameval = $("#username").val();		var pwordval = $("#password").val();				// Spinning Loader		$("#login-form").replaceWith('<div id="load" class="load"><center><img src="images/ajax-loader.gif" alt="ajax spinning loader" /></center></div>');				// Post Info to .php, retrieve data		$.post("user/loginProcess.php", { username: unameval, password: pwordval }, function(data) {		// display result of login request			$("#load").html(data);		}); 		return false;	});// Ajax Logout   $("p logout a").click(function(event){		// Spinning Loader	$("#load").replaceWith('<div id="load" class="load"><center><img src="images/ajax-loader.gif" alt="ajax spinning loader" /></center></div>');	 	// Logout [:	$("#load").load("user/logout.php").html;		return false;   });});</script>

<div class="login">	  <div id="anchor" style="display:none"><a href="#top">Back to Top</a></div>		<?php		if(isset($_SESSION['username'])) {		  echo "			<div id='load' class='load'>				<p>				<a href='#'>My Account</a>   |   				<!-- Using <logout> tags so JQuery can Find this baby -->				You're logged in as $username (<logout><a href='#'>Logout</a></logout>)   |   				<a href='#'>Help</a>			  </p>			</div>";		}else{		?>		  <form id="login-form" name="login-form" method="post" action="user/loginProcess.php">			<label>			  <input name="username" type="text"  class="text" id="username" value="login..." />			</label>			<label>			  <input name="password" type="password" class="text" id="password" value="password..." />			</label>			<label>			  <input type="image" name="imageField" id="imageField" src="images/top_login.gif" class="button_search" />			</label>		  </form>		<?php 		} 		?>	  </div>

[justsomeguy]

You need to have jquery look for the logout tag and handle that after the request from the server comes back and you've added the HTML. You just have that code after the submit code, so it's going to send the request and then try to handle the logout tags without waiting for the response to come back first. That code has to run after the response comes back and after the HTML content is added to the page.

[Cryzabey]

You need to have jquery look for the logout tag and handle that after the request from the server comes back and you've added the HTML. You just have that code after the submit code, so it's going to send the request and then try to handle the logout tags without waiting for the response to come back first. That code has to run after the response comes back and after the HTML content is added to the page.

I'm not quiet sure I follow. I don't understand what you're saying in your second sentence, or get why that would be the case.The login script returns the same html data that is rendered if you're logged in when the page loads. So the HTML content is loaded before the logout function is triggered by the on click function.

[justsomeguy]

By default ajax requests happen asynchronously, that means that the code does not wait for the response to come back, it just keeps executing the next line of code while the request is going out. If you want a piece of code to only run after the response comes back you need that code to go in the response handler for the ajax request, that's the function that you send to the $.post method. I don't use jquery, but try to run this and see what happens:

<div id="feedback"></div><script type="text/javascript" charset="utf-8">$(document).ready(function() {  document.getElementById('feedback').innerHTML = 'Sending request...<br>';  $.post("user/loginProcess.php", { username: 'test', password: 'test' }, function(data) {	document.getElementById('feedback').innerHTML += 'Request finished, received response<br>';		  });  for (var i = 0; i < 50; i++)  {	document.getElementById('feedback').innerHTML += 'Looping<br>';  }	});</script>

If you read that code you may expect to see "Sending request...", followed by "Request finished...", followed by the printout from the loop. But if you run that code you'll see that the loop runs before the response comes back. That's because the code doesn't wait for the response, it sends the request and then immediately starts the loop without waiting for the response to come back. So, anything you want to do with the response data needs to go inside the handler for the $.post method.