Ajax / jQuery: How to communicate Ajax call error back to user

Question

I am new to Ajax and hope someone can help me with this.

I use the below Ajax call in an onclick event in jQuery in order to pass data to a PHP file which inserts it into a MySQL db. In the PHP file I echo one of the following depending on the outcome of the SQL INSERT: "record already exists", "update successful", "update failed".

So far everything works as intended but I could not find a way to tell this back to the user. In order to update the user I would like to alert or show them what PHP returns here, e.g. "Error: record already exists".

I checked several websites but couldn't find the right approach and the below does not work.
Can someone help me with this and also provide a short explanation ?

My Ajax call (in jQuery):

$.ajax({
    url: "ajax.php",
    type: "post",
    cache: "false",
    data: {
        email: email,
        dob: dob
    },
    success: function(data) {
        // update successful
        console.log(data);
    },
    error: function(){
        // update failed
        alert('Error: ' + data);  // here I would like to communicate back to the user
    }
});

Update: Here is the relevant part of my PHP that echoes the outcome:

$conn = new mysqli($servername, $username, $password, $dbname);
$conn->set_charset("utf8");
if($conn->connect_error){
    die("Connection failed: " . $conn->connect_error);
}
$email = $_POST["email"];
$dob = $_POST["dob"];
$sql = "SELECT email FROM Users WHERE email = '" . $email . "'";
$query = $conn->query($sql);
if(mysqli_num_rows($query) > 0){
    echo "record already exists";
}else{
    $sql = "INSERT INTO Users (email, dob) VALUES ('" . $email . "', '" . $dob . "')";
    if ($conn->query($sql)) {
        echo 'update successful';
    }else{
        echo 'update failed';
    };
}

Many thanks in advance, Mike

Does an `alert()` not communicate this information to the user? You could also put the information in a page element somewhere, which is usually a better UX than an `alert()`. — David, Jun 21 '15 at 16:38
Add a `alert()` or code to display the message to the user in the `success` part oF AJAX. — Varun, Jun 21 '15 at 16:39
@All: Thanks for this. Yes, an alert will do, I just didn't know what I can alert here and how do implement this in the Ajax call. — keewee279, Jun 21 '15 at 16:46

score 1 · Accepted Answer · answered Jun 21 '15 at 16:42

1

As suggested by @Varun, try adding alert within success callback

   $.ajax({
        url: "ajax.php",
        type: "post",
        cache: "false",
        data: {
            email: email,
            dob: dob
        },
        success: function(data) {
            // here I would like to communicate back to the user
            // update successful
            alert(data);
        },
        error: function(jqxhr, textStatus, errorThrown){
            // update failed
            alert('Error: ' + errorThrown);  
        }
    });

answered Jun 21 '15 at 16:42

guest271314

1
15
104
177

Thanks a lot ! I tried this but I don't get an alert, e.g. if the record already exists. Also, can you explain what jqxhr is ? – keewee279 Jun 21 '15 at 16:45
1

@keewee279 _"Thanks a lot ! I tried this but I don't get an alert, e.g. if the record already exists."_ Neither `success` , nor `error` `alert` called ? See http://api.jquery.com/jQuery.ajax/#jqXHR – guest271314 Jun 21 '15 at 16:53
Thanks for this, no alert at all in case of error but the success part (insert) works. I added the relevant PHP part to my post - hope this helps. I am using the latest version of Chrome. – keewee279 Jun 21 '15 at 16:56
1

What is `$query` at `php` ? – guest271314 Jun 21 '15 at 16:59
I now added this to the post as well. This is where I am checking if a record already exists. – keewee279 Jun 21 '15 at 17:03
Where is `$conn` , `$email` , `$dob` defined ? – guest271314 Jun 21 '15 at 17:05
Before that. I now added this as well. Sorry didn't want to put too much data in the post initially. – keewee279 Jun 21 '15 at 17:07
1

_"no alert at all in case of error but the success part (insert) works. "_ All `echo` appear to return to `$.ajax()` as `success` - none as string recognized as `Error` by `$.ajax()` – guest271314 Jun 21 '15 at 17:11
Ok, thanks. Can you tell me how I can fix this ? The errors I need would be "record already exists" and "update failed". – keewee279 Jun 21 '15 at 17:12
@keewee279 Why would response need to be returned as an `js` `Error` ? See http://stackoverflow.com/questions/20113910/return-mysql-echo-as-error-in-ajax – guest271314 Jun 21 '15 at 17:13
If the user tries to save something and the record is already in the db I would like to tell them because in that case they have to do something else. It doesn't matter how and I might be using the wrong terms here I just want to tell the user that for a certain reason his update didn't work. – keewee279 Jun 21 '15 at 17:15
@keewee279 Yes, this could be achieved within `success` callback as well, instead of returning a network error from `php` ? Is the appropriate `data` being displayed by `alert` within `success` - whether data is within database or not ? – guest271314 Jun 21 '15 at 17:21
I am sorry, I am not sure I understand you right. I don't want to return a network error. The only thing I want to do is tell the user "Your update didn't work because... e.g. the record already exists." This can definitely be an alert, I just don't know how I have to change my code so that it actually shows that alert. – keewee279 Jun 21 '15 at 17:25
1

_"no alert at all in case of error but the success part (insert) works."_ No `alert` currently being called utilizing `js` at post ? – guest271314 Jun 21 '15 at 17:28
I re-added it and it is working now. I might have missed something when copying this over the first time. Thanks so much for your time and explanations ! – keewee279 Jun 21 '15 at 17:32

Ajax / jQuery: How to communicate Ajax call error back to user

1 Answers1