jquery ajax done function not firing

Question

I have a VERY simple jQuery Ajax call (below). The Ajax call executes and I can see in the Firebug Net panel that the server returned 200 OK and returned a string \"OK\" as

Answer 1

async Set to false if the request should be sent synchronously. Defaults to true. Note that if you set this option to false, your request will block execution of other code until the response is received.

dataType The type of data you expect back from the server. By default, jQuery will look at the MIME type of the response if no dataType is specified.

Remove dataType: 'json' if existed.

Add async:false if not existed.

Execute like this:

var username=$("#username").val();
var password=$("#password").val();
$.ajax({
    url: "addperson.php",
    type: "POST", 
    async: false,
    data: {
        username: username,
        password: password
    }
})
.done (function(data, textStatus, jqXHR) { 
   var obj = JSON.parse(data);
   //Handle the response data here
    alert(obj.success); 
})
.fail (function(jqXHR, textStatus, errorThrown) { 
    alert("Error"); 
})
.always (function(jqXHROrData, textStatus, jqXHROrErrorThrown) { 
    alert("complete"); 
});

The addperson.php echo in JSON format like this:

$username1 = isset($_POST["username"]) ? $_POST["username"] : '';
    
$password1 = isset($_POST["password"]) ? $_POST["password"] : '';

$servername = "xxxxx";
$username = "xxxxx";
$password = "xxxxx";
$dbname = "xxxxx";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$sql = "INSERT INTO user (username, password)
VALUES ('$username1', '$password1' )";

    ;  
    
    
   

if ($conn->query($sql) === TRUE) {
    
   echo json_encode(array('success' => 1));
} else{
    
    
  echo json_encode(array('success' => 0));
}





$conn->close();

Answer 2

You need to chain the done() and fail() functions, they are not part of the options object used in $.ajax :

$.ajax({
    type: "POST", 
    url : postUrl,
    data: dataToPost
}).done(function()  {
    alert("Success.");
}).fail(function()  {
    alert("Sorry. Server unavailable. ");
}); 

Also, as ajax is asynchronous, don't be suprised if the "after" alert comes before the "success" alert.

Answer 3

Also you need to set dataType: 'json'. I ran into this problem when I set it to 'string' and it doesn't fire the done method.

Answer 4

I have the same setup like this:

$.ajax({
    type: "POST", 
    url : postUrl,
    data: dataToPost
}).done(function()  {
    alert("Success.");
})

and ran into the same problem: the done function wouldn't fire off. Though I've managed to make it work many times before with the same set up, it took me a while to figure out what happened. After tweaking around, I found that it also depends on the type of data returned by the Ajax call. Originally, I configured the ajax call to return some HTML. The done function didn't work. After I changed it back to json (with jsonify in Flask,) it works again.

Answer 5

success and error callbacks can be used in that way. For done and fail, you need to do :

$.ajax({
    type: "POST", 
    url: postUrl,
    data: dataToPost,
}).done(function() {
    alert("Success.");
}).fail(function() {
    alert("Sorry. Server unavailable. ");
});

Or :

$.ajax({
    type: "POST", 
    url: postUrl,
    data: dataToPost,
    success: function() {
            //code here
    }
});