Checking username on local server using jquery, ajax and php ajax() not connecting

Question

So I am have a mysql database on my local system and connecting to that using PHP. I know there is nothing wrong with the the server (Apache) because I have used it in another calls using just php.

The problem I think is with the "ajax() request

I have only just started using ajax. I followed a tutorial to implement a way to check if a username already exists on the DB asynchronously.

All the code works up until the ajax() request.

I don't get any errors. All that I see on screen is the result of this code:

$("#availability_status").html(' Checking availability...'); //Add a loading image in the span id="availability_status"

I have been searching for a solution all day and it's driving me mad. Thank you in advance!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Register</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {  //When the dom is ready
                alert("ready!");
                $("#username").change(function() { //if therezs a change in the username textbox
                    var username = $("#username").val();//Get the value in the username textbox
                    if(username.length > 3)
                    {
                        $("#availability_status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');
                        //Add a loading image in the span id="availability_status"

                        $.ajax({ 
                            type: "POST",
                            url: "http://localhost/ajax_check_username.php",
                            data: {username: username}, 
                            success: function(server_response){

                                    if(server_response == '0')//if ajax_check_username.php return value "0"
                                    {
                                        $("#availability_status").html('<img src="available.png" align="absmiddle"> <font color="Green"> Available </font>  ');
                                        //add this image to the span with id "#availability_status"
                                    }
                                    else  if(server_response == '1')//if it returns "1"
                                    {
                                        $("#availability_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Not Available </font>');
                                    }


                            }

                        });

                    }
                    else
                    {

                    $("#availability_status").html('<font color="#cc0000">Username too short</font>');
                    //if in case the username is less than or equal 3 characters only
                    }
                    return false;
                });
            });
    </script>
    </head>
    <body>
    <div id="content">
    <strong>Register</strong>
      <form action="http://localhost/register2a.php" method="get">
        <div class="style_form">
          <label for="username">Username :</label>
          <input type="text" name="username" id="username" class="form_element"/>
          <span id="availability_status"></span> </div>
        <div class="style_form">
          <label for="full_name">Full Name :</label>
          <input type="text" name="full_name" id="full_name" class="form_element"/>
        </div>
        <div class="style_form">
          <label for="email">Email  :</label>
          <input type="text" name="email" id="email" class="form_element"/>
        </div>
        <div class="style_form">
          <input name="submit" type="submit" value="submit" id="submit_btn" />
        </div>
      </form>
     </div>
    </body>
    </html>

////here is the php file

<?php
$conn = mysqli_connect('localhost', 'root', 'sherly743759', 'login');
//Include the Database connection file
if(isset($_POST['username']))//If a username has been submitted
{
    //check username not taken
    $conn = mysqli_connect('localhost', 'root', 'sherly743759', 'login');

    $username = mysql_real_escape_string($username);
    $query = "SELECT username FROM member WHERE username = '$username';";

    $result = mysql_query($query);

if(mysql_num_rows($result) > 0)
{
echo '1'; //Not Available
}
else
{
echo '0';  // Username is available
}

}

?>

score 0 · Answer 1 · answered Aug 20 '13 at 01:15

0

I always like to use GET request on AJAX issues, meaning to do jQuery AJAX with type:"GET" and read the parameter with GET on PHP.. So I can easily test the PHP page itself by running it in the browser like this

localhost/ajax_check_username.php?username=something

answered Aug 20 '13 at 01:15

Michael B.

2,798
1
14
18

1

This has helped a lot! Didn't even think of doing that! Thanks – Lewis Sherlock Aug 20 '13 at 03:12
I have used this method to make sure the php file is performing the way it should and is... I just still cannot get it to work within the ajax code. I keep getting the xhr.status error 0 when tries to connect to the php file. – Lewis Sherlock Aug 20 '13 at 03:29
try using relative path for PHP url in ajax call – Michael B. Aug 20 '13 at 03:52

score 0 · Answer 2 · answered Aug 20 '13 at 01:18

0

You're not handling the error case in your Ajax call, just success - so if the Ajax call fails, nothing will ever reset the 'checking availability' status.

Offhand, your PHP is failing at least partially because you're using (but never setting) $username. You're also opening the database twice, but that's probably harmless.

<?php
  if(isset($_POST['username']))//If a username has been submitted
  {
    //check username not taken
    $conn = mysqli_connect('localhost', 'root', 'sherly743759', 'login');

    $username = mysql_real_escape_string($_POST['username']);
    $query = "SELECT username FROM member WHERE username = '$username';";

    $result = mysql_query($query);

    if(mysql_num_rows($result) > 0)
    {
      echo '1'; //Not Available
    }
    else
    {
      echo '0';  // Username is available
    }
  }

And you should leave off the closing ?> on PHP files, so you don't accidentally echo extra data and screw up your expected results.

answered Aug 20 '13 at 01:18

Paul Roub

36,322
27
84
93

Hi Paul. I'm not completely sure what you mean by handling the error case in the ajax call. could you be a but clearer. As I said I'm fairly new to ajax. Thanks – Lewis Sherlock Aug 20 '13 at 01:24
You know the `success` function you defined in your Ajax options? There can, and should, be an `error` function, which will be called *instead* of `success` when something goes wrong with the call. As it is, when your script throws an error (as it would), your success handler is never called. Neither is anything else. No one cleans up the status message, no one reports a problem. – Paul Roub Aug 20 '13 at 01:28
A simple example here: http://stackoverflow.com/questions/377644/jquery-ajax-error-handling-show-custom-exception-messages – Paul Roub Aug 20 '13 at 01:29
Oh I understand now. sorry! I will do that of course. But that alone can't be the reason why the ajax call is not being made right? – Lewis Sherlock Aug 20 '13 at 01:35
okay so I have implemented the code for the error function as follows: error: function(xhr, ajaxOptions, thownError){ alert(xhr.status); alert(thrownError); } I get the thrown error: "0" (this means nothing to me) – Lewis Sherlock Aug 20 '13 at 01:53

score 0 · Answer 3 · answered Sep 20 '13 at 02:30

0

need to check your jquery version. it uses older version 1.3... not compatible with

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

answered Sep 20 '13 at 02:30

user

1

Checking username on local server using jquery, ajax and php ajax() not connecting

3 Answers3