jQuery $.ajax done callback not firing

Question

I have the following code :

$("#loginSubmitButton").on("click",function(){ var loginUserDetails = { email: $("#email").val(), password: $("#password").val() }; //Send the AJAX request to authenticate the user $.ajax({ type: "POST", url: "/somewebservice/v1/users/authenticate", data: JSON.stringify(loginUserDetails), contentType: "application/json;charset=UTF-8", dataType: "json", }).done(function() { $("#loginResult").text("Login successful"); }) .fail(function() { $("#loginResult").text("Login failed"); }); });

As per the jquery documentation (unless I am understanding something incorrectly) I expect the done to be fired if I receive a 200 OK from my web server. However, in chrome console I can see a 200 OK response but jquery seems to fire the fail handler.

Does anyone have any idea what I might be doing wrong here?

Check my answer here: stackoverflow.com/questions/16744066/… — Andreas Konstantakos
– Andreas Konstantakos, Commented Oct 24, 2020 at 2:16
Check my answer here: stackoverflow.com/questions/16744066/… — Andreas Konstantakos
– Andreas Konstantakos, Commented Oct 24, 2020 at 2:19

user2597843 · Accepted Answer · 2014-04-02 20:56:23Z

35

You need to remove:

dataType: "json"

answered Apr 2, 2014 at 20:56

user2597843

3893 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user8348171 Over a year ago

I should have seen this before, I remade a part from a website I own, the thing was that if you don't return a json data type jquery takes that as a fail. Thanks.

Andreas Konstantakos Over a year ago

Add async: false

Sam Strachan · Accepted Answer · 2015-07-17 16:30:56Z

There are lots of suggestions to remove

dataType: "json"

While I grant that this works it's probably ignoring the underlying issue. It's most likely caused by a parser error (the browser parsing the json response). Firstly examine the XHR parameter in either .always() or .fail().

Assuming it is a parser fail then why? Perhaps the return string isn't JSON. Or it could be errant whitespace at the start of the response. Consider having a look at it in fiddler. Mine looked like this:

Connection: Keep-Alive Content-Type: application/json; charset=utf-8 ï»¿ï»¿ï»¿ï»¿ï»¿ï»¿ï»¿ï»¿ï»¿ï»¿{"type":"scan","data":{"image":".\/output\/ou...

In my case this was a problem with PHP spewing out unwanted characters (in this case UTF file BOMs). Once I removed these it fixed the problem while also keeping

dataType: json

Awesome! Removing the dataType is just a workaround. Fixing the data source is the real fix.
Nice. I think the issue with mine was that the server was returning text/html rather than a JSON response.
The real answer. In my case I had an equation that was returning INF (I didn't even know this constant existed) and that was causing a json parse error.

Can Bayburt · Accepted Answer · 2014-04-19 20:48:11Z

If your server returns empty string for a json response (even if with a 200 OK), jQuery treats it as failed. Since v1.9, an empty string is considered invalid json.

Whatever is the cause, a good place to look at is the 'data' parameter passed to the callbacks:

$.ajax( .. ).always(function(data) { console.log(JSON.stringify(data)); });

Its contents will give you an understanding of what's wrong.

Bhupendra · Accepted Answer · 2013-12-15 17:24:29Z

3

Need to remove , from dataType: "json",

 dataType: "json"

answered Dec 15, 2013 at 17:24

Bhupendra

2582 silver badges7 bronze badges

1 Comment

tsure Over a year ago

Removed the comma but still the same issue. How do I check the error message in fail?

hoogw · Accepted Answer · 2017-02-02 19:19:07Z

The ajax URL must be the same domain. You can't use AJAX to access cross-domain scripts. This is because of the Same Origin Policy.
add "dataType:JSONP" to achieve cross domain communication

use below code

 $.ajax({ URL: cross domain dataType: 'jsonp' // must use dataType:JSONP to achieve cross domain communication, otherwise done function would not called. // jquery ajax will return "statustext error" at }).always(function(data){} }).always(function(data){ alert(JSON.stringify(data)); }

Bill Criswell · Accepted Answer · 2015-01-30 18:56:58Z

A few things that should clear up your issue and a couple hints in general.

Don't listen for a click on a submit button. You should wait for the submit event on the form.
The data option for $.ajax isn't expecting a JSON string. It wants a serialized string or an array with name and value objects. You can create either of those easily with .serialize() or .serializeArray().

Here is what I was thinking for your script.

$('#form-with-loginSubmitButton').on('submit', function(e){ e.preventDefault(): var $form = $(this), data = $form.serializeArray(); $.ajax({ type: "POST", url: "/somewebservice/v1/users/authenticate", data: data }).done(function(result){ console.log(result); }); });

Any reason why I shouldn't listen for a click event? My web service expects a POST with JSON params and so I used JSON.Stringify. Is that a problem?
You can submit a form without clicking, or "click" a button without clicking. The browser might cover up for those issues in some cases but I wouldn't rely on it.

Collectives™ on Stack Overflow

jQuery $.ajax done callback not firing

6 Answers 6

2 Comments

3 Comments

Comments

1 Comment

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

3 Comments

Comments

1 Comment

Comments

2 Comments

Linked

Related