Ajax not functioning correctly

moos3 · 08-31-2007, 05:27 PM

I have some ajax on my page for check username it works in my HTML file but not my PHP file. Heres the two versions of it
HTML Version

Code:

<!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-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="../ajax/jquery/jquery-1.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#usernameLoading').hide();
	$('#username').blur(function(){
	  $('#usernameLoading').show();
      $.post("check.php", {
        username: $('#username').val()
      }, function(response){
        $('#usernameResult').fadeOut();
        setTimeout("finishAjax('usernameResult', '"+escape(response)+"')", 400);
      });
    	return false;
	});
});

function finishAjax(id, response) {
  $('#usernameLoading').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
} //finishAjax
					function checkPassword() {
						var pass = document.getElementById('pass');
						var check = document.getElementById('check');
						if((pass.value != "") && (check.value != "")) {
							if(pass.value != check.value) {
								document.getElementById('password_check').innerHTML = 'Password does not match';
								document.getElementById('password_check').style.color = 'red';
								return false;
							}
							else{
								document.getElementById('password_check').innerHTML = 'Password OK';
								document.getElementById('password_check').style.color = 'green';
								return true;
							}
						}
						else{
							return false;
						}
					}
</script>
</head>
<body>
<h1>Ajax Username Check - Using JQuery!</h1>

<fieldset><legend>Registration Form</legend>
<form action="test.html" method="post">
<p><label for="username">Username:</label> <input type="text" name="username" id="username" />
	<span id="usernameLoading"><img src="../images/ajax/indicator.gif" alt="Ajax Indicator" /></span>
	<span id="usernameResult"></span></p>
<p><label for="password">Password:</label><input type="password" id="pass" name="pass" onKeyUp="checkPassword()"/><input type="password" id="check" name="check" onKeyUp="checkPassword()"/><div class="error_span" id="password_check"></div></p>
<p><input type="submit" name="submit" value="Sign Up!" /></p>
</form>
</fieldset>
</body>
</html>

The PHP Version

PHP Code:


			
<!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-Type" content="text/html; charset=ISO-8859-1" />
            <title>Labs</title>
            <link rel="stylesheet" type="text/css" href="../css/main.css" />
            <link rel="stylesheet" type="text/css" href="../css/blog.css" />
            <link rel="stylesheet" type="text/css" href="../css/admin.css" />
            <script type="txt/javascript" src="../ajax/jquery/jquery-1.1.3.js" ></script>
            <script type="text/javascript">
                $(document).ready(function() {
                    $('#usernameLoading').hide();
                    $('#username').blur(function(){
                      $('#usernameLoading').show();
                      $.post("check.php", {
                        username: $('#username').val()
                      }, function(response){
                    $('#usernameResult').fadeOut();
                    setTimeout("finishAjax('usernameResult', '"+escape(response)+"')", 400);
                      });
                    return false;
                    });
                });
                function finishAjax(id, response) {
                      $('#usernameLoading').hide();
                      $('#'+id).html(unescape(response));
                      $('#'+id).fadeIn();
                } //finishAjax
                    function checkPassword() {
                        var pass = document.getElementById('pass');
                        var check = document.getElementById('check');
                        if((pass.value != "") && (check.value != "")) {
                            if(pass.value != check.value) {
                                document.getElementById('password_check').innerHTML = 'Password does not match';
                                document.getElementById('password_check').style.color = 'red';
                                return false;
                            }
                            else{
                                document.getElementById('password_check').innerHTML = 'Password OK';
                                document.getElementById('password_check').style.color = 'green';
                                return true;
                            }
                        }
                        else{
                            return false;
                        }
                    }
</script>
        </head>
        <body>
        <div class="container">
                <div class="header"><img src="/images/rangley_lakes_banner.jpg"  /></div><div class="menu">
                <ul id="miniflex">
                    <li><a href="index.php">Home</a></li>
                    <li><a href="entry.php" class="active">Write Post</a></li>

                    <li><a href="manage.php">Manage Posts</a></li>
                    <li><a href="Users.php">Users</a></li>
                    <li><a href="options.php">Site Options</a></li>
                    <li><a href="logout.php">Log Out</a></li>
                </ul>
            </div><br /> <div class="content">
                    <h2>Add New User</h2>
                <form method="post" action="test.php">
                <table>
                    <tr>
                        <td>Add User:</td>
                        <td><input type="text" id="username" name="username"><span id="usernameLoading"><img src="../images/ajax/indicator.gif" alt="Ajax Indicator" /></span>

    <span id="usernameResult"></span></td>
                    </tr>
                    <tr>
                        <td>Password:</td>
                        <td><input type="password" id="pass" name="pass" onKeyUp="checkPassword()"/></td>
                    </tr>
                    <tr>
                        <td>Comfirm Password:</td>

                        <td><input type="password" id="check" name="check" onKeyUp="checkPassword()"/></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><div class="error_span" id="password_check"></div></td>
                    </tr>
                    <tr>
                        <td>Email:</td>

                        <td><input type="text" name="email" id="email" onKeyUp="checkEmail()" /><div class="error_span" id="email_check"></div></td>
                    </tr>
                    <tr>
                        <td>Select TimeZone:</td>
                        <td><select name="zone"><option selected value="0">--- Choose a TimeZone ---</option><option value=1>England, Ireland, Portugal</option><option value=2>Europe: France, Spain, Germany, Poland, etc.</option><option value=3>Central Europe: Turkey,Greece,Finland,etc</option><option value=4>Moscow,Saudi Arabia</option><option value=5>Oman</option><option value=6>Pakistan</option><option value=7>India</option><option value=8>Indonesia</option><option value=9>China,Phillipines,Malaysia,West Australia</option><option value=10>Japan</option><option value=11>East Australia</option><option value=12>Solomon Islands,Micronesia</option><option value=13>Marshall Islands, Fiji</option><option value=14>Samoa, Midway</option><option value=15>Hawaii, French Polynesia, Cook island</option><option value=16>Alaska</option><option value=17>US Pacific</option><option value=18>US Mountain</option><option value=19>US Central</option><option value=20>US Eastern</option><option value=21>New Foundland, Venezuela, Chile</option><option value=22>Brazil, Argentina, Greenland</option><option value=23>Mid-Atlantic</option><option value=24>Azores, Cape Verda Is.</option></select> </td>

                    </tr>
                    <tr>
                        <td>Security Question:</td>
                        <td><input type="text" name="secq"/></td>
                    </tr>
                    <tr>
                        <td>Security Question Answer:</td>
                        <td><input type="text" name="secans"/></td>

                    </tr>
                    <tr>
                        <td/><td align="right"><input type="submit" name="add" value="Add User"/></td>
                    </tr>
                </table>
                </form>
                </div><div class="footer">
                    <p>Labs@Guthnur.net Powered by OPEN SOURCE TECHNOLOGIES</p>

                </div>
            </div>
        </body>
        </html>

I took out all the POST code to eliminate that as the problem and nothing. you can see these live at http://labs.guthnur.net/admin/test.html and labs.guthnur.net/admin/test.php Any Ideas why one works and one doesn't?

GJay · 08-31-2007, 06:42 PM

the source of the PHP version doesn't have the closing </script> for the jquery include (your paste of it above does though...) and the type should be 'text/javascript' ('text' rather than 'txt').

moos3 · 08-31-2007, 06:50 PM

did and nothing change. i think it something to do with jquery finding the #usernameLoading and #username divs.

GJay · 08-31-2007, 07:07 PM

the closing tag still doesn't seem to be there, is there something in your PHP that's messing it up?
also, you've changed the code, it makes it difficult to help you...

if you change it back to $('#usernameLoading').hide() what happens?

moos3 · 08-31-2007, 07:34 PM

#username didn't work and the jquery docs says div#username is the correct syntax. But I'm working on it.

GJay · 08-31-2007, 08:10 PM

you had div.usernameLoading, which targets 'class' rather than id...

I still think it will work if you fix the closing </script> tag, but as you don't seem to listen, this is where my help ends.

moos3 · 08-31-2007, 09:56 PM

I did add the </script> and change it to use ID.

moos3 · 08-31-2007, 09:59 PM

Sorry My live server is 2 revisions behind it should be up to date now.