JQuery ajax: error is executed even if the response is ok 200

Question

I have a form that submits a form via AJAX: remote => true. Looking at the server log and FireBug, I get a 200 OK response, and it returns JSON in the form:

{ "email": "[e-mail]"} 

then I have these two handlers:

 $('#new_invitation').bind("ajax:success", function(event, data, status, xhr) { alert('test'); }); $('#new_invitation').bind("ajax:error", function() { alert('error'); }); 

and even if I go back to 200OK, it will be an error handler. The only time I managed to get the success handler to work was when I sent an empty response with 200 in the header.

I can not understand why this does not work: -S

EDIT 1 ------------ After making these changes:

 $('#new_invitation').bind("ajaxSuccess", function(event, data, status, xhr) { alert('test'); }); $('#new_invitation').bind("ajaxError", function(jqXHR, textStatus, errorThrown) { alert('error'); console.log(jqXHR.responseText); console.log(textStatus.responseText); console.log(errorThrown.responseText); }); 

I am still getting the same error. The material of the magazine gives me:

 undefined [e-mail] undefined 

Here is the code for the form (standard Rails stuff):

 <%= form_for @shoot.invitations.new, :url=>shoot_invitations_path(@shoot), :remote => true, :html => {:class => 'form-inline'} do |f| %> <%= f.text_field :email, :'placeholder' => 'ex: [e-mail]' %> <%= f.text_field :role, :'placeholder' => 'ex: Photographer' %> <%= f.submit "Invite", :class => 'btn btn-success' %> <% end %> 

EDIT 2 ---------

I made a few changes, and now it seems that my error is a parsing error. I do not understand, because it is JSON, I am returning from the server (data.responseText), which seems to be all good:

 {"email":"[e-mail]"} 

ANSWER --------- I managed to work everything when I set: 'data-type' =>: json in the form option. I tried this before, and it did not work, because I put it in the form_tag options and not in the html options ...

Answer 1

If the server returns that JSON is invalid, for example, one space, jQuery will generate a parsing error and consider the request to fail, even if the status code is 200.

As in jQuery 1.9, a completely empty response is considered a failed request when the type is set to JSON, because the empty string is not valid JSON. See http://jquery.com/upgrade-guide/1.9/#jquery-ajax-returning-a-json-result-of-an-empty-string .

Answer 2

• Make sure $ .ajax datatype is set to jsonp

• Try returning {email: "[e-mail]"}

Answer 3

JSON.parse ('') throws an error. This is stupid for me, it should return undefined. I added this code to my application

 #HACK JSON.parse('') should return undefined, not throw an error _parse = JSON.parse JSON.parse = (str) => unless str == '' _parse.apply JSON, arguments 

or for u poor people not using coffeescript (untested)

 //HACK JSON.parse('') should return undefined, not throw an error var _parse = JSON.parse JSON.parse = function(str) { if (str !== '') return _parse.apply(JSON, arguments); else return undefined; } 

Answer 4

Use ajaxSuccess instead of ajax:success and ajaxError instead of ajax:error for your eventTypes.

See here: http://docs.jquery.com/Ajax_Events

Answer 5

(On Rails 5.2 and jQuery 2) I spent an hour comparing two bits of UJS code side by side to no avail: both return a Javascript function call of a similar format (to update the interface), and a state of 200, but one calls ajax:error and the other doesn't. I managed to fix this problem by switching from jquery_ujs to rails-ujs in the application.js manifest:

 //= require jquery2 // require jquery_ujs # Removed this by taking away '=' //= require rails-ujs 

Pay attention to hyphens against underscores!

Now both calls behave the same (correctly). I hope this helps someone else.