SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    AJAX user avliablity

    Consider the following script.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Language" content="en-us" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
     
    	<title>Signup</title>
     
    	<script type="text/javascript">
     
    		var xmlHttp;
     
    		// Functions
     
    		function validate_signup()
    		{
     
    			var valadate_errors = "no";
     
    			// Gathering data
     
    			var username = document.signup.username.value;
    			var password = document.signup.password.value;
    			var print_error = document.getElementById("show_error");		
     
     
    			// AJAX
     
    			function userchk(str)
    			{ 
    				xmlHttp=GetXmlHttpObject();
    				if (xmlHttp==null)
    				{
    					alert("There was a database problen, please try again later.");
    					return;
    				}
     
    				var url = "signup_chk.php";
    				url = url+"?q="+str;
    				xmlHttp.onreadystatechange = stateChanged 
    				xmlHttp.open("GET", url, true)
    				xmlHttp.send(null)
    			}
     
    			function stateChanged() 
    			{ 
    				if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
    				{
    					var db_response = xmlHttp.responseText;
    					if (db_response == "no") { print_error.innerHTML = "username is already taken. Sorry"; return false; valadate_errors = "yes"; }
     
    				}
    			}
     
    			function GetXmlHttpObject()
    			{
    				var xmlHttp = null;
    				try
    				{
    					xmlHttp = new XMLHttpRequest();
    				}
     
    				catch (e)
    				{
    					try
    					{
    						xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    					}
     
    					catch (e)
    					{
    						xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    					}
    				}
     
    				return xmlHttp;
    			}
     
    			// Username
     
    			if (valadate_errors == "no")
    			{ 
    				if (username.length < 1) 
    				{ 
    					print_error.innerHTML = "username is a required field"; return false; valadate_errors = "yes"; 
    				} 
    			} 
     
    			if (valadate_errors == "no") { userchk(username); }	
     
    			// Password
     
    			if (valadate_errors == "no")
    			{ 
    				if (password.length < 1) 
    				{ 
    					print_error.innerHTML = "Password is a required field"; return false; valadate_errors = "yes"; 
    				} 
    			}
     
    		}	 
     
        </script>       
    </head>
     
    <body>
     
        <form onsubmit="return validate_signup()" action="signup_register.php" method="post" name="signup">                 
            Username
            <input type="text" name="username" /><br /><br />
     
            Password
            <input type="password" name="password" /><br /><br />
     
            <input type="submit" value="submit" />
            <div id="show_error"></div>
        </form>
     
     
    </body>
    </html>

    Code PHP:
    <?php
     
    	// ------------- database_connections -------
     
    	// data
     
    	$user = $_GET['q'];
     
     
    	$mysql_query = mysql_query("SELECT `user` FROM `users` WHERE `user`='".$user."'");
     
    	if (mysql_num_rows($mysql_query) > 0) { echo "no"; } else { echo "yes"; }
     
    ?>

    Problem

    The problem is, it moves on to rest of the error checks then shows the result of userchk() function. see the following video to understand better.

    View error Video

    There seems to be a delay in getting xmlHttp.responseText. Please provide suggestions to solve the issue. Thanks.

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AJAX (asynchronous JavaScript and XML)

    Key thing here being asynchronous. This means javascript doesn't just sit there and hang while waiting for a network response. It keeps executing immediately.

    Generally you would show some type of "please wait" message right after sending the request. Then the onreadystate handler will clean that message up and get your script back on its logic path. Your script should also keep track of its current state. For example, if its awaiting a response, there might be certain things you don't want to do in the meantime. Or in your example, if the user changes the value of the username field while waiting for the ajax response, you should probably not show the "username taken" message, because you haven't checked the current username, and would otherwise confuse the user.

    My opinion is do it right, or don't do it. AJAX is meant to enhance usability. If you don't do it right, you make useability much worse and would have been better off saving your time in the first place.

  3. #3
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by crmalibu View Post
    AJAX (asynchronous JavaScript and XML)

    Key thing here being asynchronous. This means javascript doesn't just sit there and hang while waiting for a network response. It keeps executing immediately.

    Generally you would show some type of "please wait" message right after sending the request. Then the onreadystate handler will clean that message up and get your script back on its logic path. Your script should also keep track of its current state. For example, if its awaiting a response, there might be certain things you don't want to do in the meantime. Or in your example, if the user changes the value of the username field while waiting for the ajax response, you should probably not show the "username taken" message, because you haven't checked the current username, and would otherwise confuse the user.

    My opinion is do it right, or don't do it. AJAX is meant to enhance usability. If you don't do it right, you make useability much worse and would have been better off saving your time in the first place.
    Quote insightful. However, I should either use ajax or shouldn't does not solve my current problem. The the test case I provided clearly shows what I want to achieve and what the problem I am facing. I merely want suggestions on ways how i could make further form validation to keep waiting till the ajax action is preformed.

    Regardless, thanks for your response.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •