Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Aug 2007
    Location
    maine,usa
    Posts
    151
    Thanks
    2
    Thanked 1 Time in 1 Post

    Ajax not functioning correctly

    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?

  • #2
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    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').
    My thoughts on some things: http://codemeetsmusic.com
    And my scrapbook of cool things: http://gjones.tumblr.com

  • #3
    Regular Coder
    Join Date
    Aug 2007
    Location
    maine,usa
    Posts
    151
    Thanks
    2
    Thanked 1 Time in 1 Post
    did and nothing change. i think it something to do with jquery finding the #usernameLoading and #username divs.

  • #4
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    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?
    My thoughts on some things: http://codemeetsmusic.com
    And my scrapbook of cool things: http://gjones.tumblr.com

  • #5
    Regular Coder
    Join Date
    Aug 2007
    Location
    maine,usa
    Posts
    151
    Thanks
    2
    Thanked 1 Time in 1 Post
    #username didn't work and the jquery docs says div#username is the correct syntax. But I'm working on it.

  • #6
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    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.
    My thoughts on some things: http://codemeetsmusic.com
    And my scrapbook of cool things: http://gjones.tumblr.com

  • #7
    Regular Coder
    Join Date
    Aug 2007
    Location
    maine,usa
    Posts
    151
    Thanks
    2
    Thanked 1 Time in 1 Post
    I did add the </script> and change it to use ID.

  • #8
    Regular Coder
    Join Date
    Aug 2007
    Location
    maine,usa
    Posts
    151
    Thanks
    2
    Thanked 1 Time in 1 Post
    Sorry My live server is 2 revisions behind it should be up to date now.


  •  

    Posting Permissions

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