CODEWITHSUNDEEP
javascriptjqueryhtmlajaxgetelementbyid
Ana Bee
Ana Bee

Reputation: 15

AJAX and HTML element not working

I am trying to set a div tag to display a message if user isn't found in the database.

This is the line I can't get to work: 

$("message").html(msg);

If you could help me understand what I'm doing wrong it would help. Thanks

$(document).ready(function(){
    $("#submit").click(function(){
        var username = $("#username").val();
        var code = $("#code").val();
        var msg = "Who are you?!";
        var dataString = 'username='+ username + '&code='+ code;
        localStorage.setItem("number",code);
        if(username==''||code=='')
        {
            alert("Um..you are missing something...");
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "verify.php",
                data: dataString,
                cache: false,
                success: function(result){
                    if(result != 0)
                    alert(result);
                },
                error: function(){
                    $("message").html(msg);
                }
            });
        }
        return false;
    });
});

My PHP code

<?php
    $username = trim($_POST["username"]);
    $code = trim($_POST["code"]);

    include_once './inc/config.php';
    $con = new mysqli(HOST, USER, PASSWORD, DATABASE);

    $sql="SELECT * FROM info WHERE First_Name='".$username."' AND Line_Number='".$code."'" ;
    // Check connection
    if (mysqli_connect_errno()) {
      echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $result = mysqli_query($con,$sql);
    $num_rows = mysqli_num_rows($result);

    if($num_rows != 0){
        echo true;
    }
    else{
        //echo "Who are you?!";
        return false;
    }
mysqli_free_result($result);
mysqli_close($con);

Upvotes: 1

Views: 858

Answers (6)

Cheery
Cheery

Reputation: 16214

  error: function(){
    $("message").html(msg);
  }

Do you respond with 404 or anything else, except of 2xx, when user is not found? And, yes, selector is incorrect. Your function will be called only in case of HTTP error during request to the server.

This 

else{
    //echo "Who are you?!";
    return false;
}

will not run your function. This

else{
    //echo "Who are you?!";
    header("HTTP/1.0 404 Not Found");
    exit;
}

can do it, but not a very nice solution. The best one is to return something like this

$response = array('status' => 'failed', 'text' => 'Whatever');
header('Content-type: application/json');
echo json_encode($response);
exit;

and in your success function work with data, check the 'status' and so on.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388416

Apart from the obvious error in the message selector, another problem I can see is in your code is in your PHP.

Your php code does not return an error condition, it returns a true or false, so always your success callback will be called.

So

if($num_rows != 0){
    echo true;
}
else{
    //echo "Who are you?!";
    echo false;
}

then

$.ajax({
    type: "POST",
    url: "verify.php",
    data: dataString,
    cache: false,
    success: function (result) {
        if (result) {
            alert(result);
        } else {
            alert(msg);
            //make sure you use a proper selector here
            $("message").html(msg);
        }
    },
    error: function () {
        $("message").html(msg);
    }
});

Upvotes: 0

Johan Karlsson
Johan Karlsson

Reputation: 6476

To target a div with id message use

$("#message")

You have missed the #

Try this:

$.ajax({...
    success: function(data){
        if(data)
            $("#message").html (msg);
        else
            alert(data);
    }
});

Upvotes: 0

Robby Cornelissen
Robby Cornelissen

Reputation: 97312

If your message element has the ID message, select it like this:

$("#message").html(msg);

If it has the class message, select it like this:

$(".message").html(msg);

The JQuery documentation contains an overview and in-depth description of all selector types.

In addition, to trigger the error method in your Javascript, your server-side code needs to send a HTTP error code, for example like this:

header("HTTP/1.1 404 Not Found");

Or like this:

http_response_code(404);

Upvotes: 1

user2772216
user2772216

Reputation: 15

Use, # for id and . For class error: function(){ $("#message").html(msg);

Upvotes: 0

jpcanamaque
jpcanamaque

Reputation: 1069

Is message a class or an ID? Make sure that you use the proper selector on which your output is to be displayed.

Upvotes: 0

Related Questions