CODEWITHSUNDEEP
javascriptjqueryruby-on-railsajaxcoffeescript
walt_die
walt_die

Reputation: 630

coffeescripted ajax call result to fail callback when actually success

My question is: Why does my ajax call result in the fail callback being called - and not the done/success, with the status being 200 and all? 

post_success = (response) ->
  $('button.update').hide()
  $('#status_of_employees').html(response)

post_error = (response) ->
  console.log(response)
  $('#status_of_employees').html(response.responseText)

post_changes = (url,data) ->
  jqxhr = $.ajax
    url: url
    type: 'POST'
    data: data
  .done (response,st) ->
    post_success(response)
  .fail (response) ->
    post_error(response)

$('button').on 'click', (e) ->
  data = { 'multi': true, 'elems': [] }
  url = '/entrances.js'
  for elem in $('.deleted, .selected')
    do(elem) ->
      #
      # employee_1_date_1_9_entrance_0
      prop = $(elem).closest('tr').prop('id').split("_")
      data.elems.push { type: $(elem).prop('class'), employee: prop[1], month: prop[3], day: prop[4], entrance: prop[6] }
  post_changes('/entrances.js',data)

When I click a 'button' the ajax call is called perfectly - and in my Rails controller I respond with

respond_to do |format|
  format.js   { render text: 'alt er opdateret'}
end

and the response seen by my browser (Chrome and Safari tested) is this:

Object {
  readyState: 4, 
  getResponseHeader: function, 
  getAllResponseHeaders: function, 
  setRequestHeader: function, 
  overrideMimeType: function
  abort: function ( statusText )
  always: function () {
  complete: function () {
  done: function ()
  error: function ()
  fail: function ()
  getAllResponseHeaders: function ()
  getResponseHeader: function ( key )
  overrideMimeType: function ( type )
  pipe: function ( /* fnDone, fnFail, fnProgress */ )
  progress: function ()
  promise: function ( obj )
  readyState: 4
  responseText: "alt er opdateret"
  setRequestHeader: function ( name, value )
  state: function ()
  status: 200
  statusCode: function ( map )
  statusText: "OK"
  success: function ()
  then: function ( /* fnDone, fnFail, fnProgress */ )
  __proto__: Object

UPDATE 23-01-15

This syntax

post_changes = (url,data) =>
  jqxhr = $.ajax
    url: url
    type: 'POST'
    data: data,
    done: (response,st) ->
      post_success(response)
    fail: (response) ->
      post_error(response)

produces this js

      post_changes = (function(_this) {
        return function(url, data) {
          var jqxhr;
          return jqxhr = $.ajax({
            url: url,
            type: 'POST',
            data: data,
            done: function(response, st) {
              return post_success(response);
            },
            fail: function(response) {
              return post_error(response);
            }
          });
        };
      })(this);

UPDATE 23-01-15 10:59

Now I believe the syntax (and the js) is correct - this syntax

post_changes = (url,data) =>
  jqxhr = $.ajax(
    url: url
    type: 'POST'
    data: data
  ).done( (response,st) ->
    post_success(response)
  ).fail (response) ->
    post_error(response)

produces this js

post_changes = (function(_this) {
  return function(url, data) {
    var jqxhr;
    return jqxhr = $.ajax({
      url: url,
      type: 'POST',
      data: data
    }).done(function(response, st) {
      return post_success(response);
    }).fail(function(response) {
      return post_error(response);
    });
  };
})(this);

but I am still left with the fail callback being called - even though the response is as shown in the original post above :(

Upvotes: 2

Views: 562

Answers (2)

walt_die
walt_die

Reputation: 630

Heureka!

I'm going to flag Ryan K's answer as the correct answer - even though it is not 100% correct! It did however spur me to trying out a number of syntax changes!

And Ryan K's answer would be the right answer - had I used success and error callbacks instead of the .done and .fail Promises!

Forcing CoffeeScript into building the correct JavaScript requires a somewhat special syntax when working with jQuery Promises.

Here goes,

post_changes = (url,data) ->
  jqxhr = $.ajax(
    url: url
    type: 'POST'
    dataType: 'script'
    data: data
  ).done( () ->
    $('button.update').hide()
    $('#status_of_employees').html(jqxhr.responseText)
  ).fail () ->
    $('#status_of_employees').html(jqxhr.responseText)

Upvotes: 1

Ryan K
Ryan K

Reputation: 4053

I'm not sure but I think your syntax is wrong. Try:

post_changes = (url,data) ->
  jqxhr = $.ajax
    url: url
    type: 'POST'
    data: data
    done: (response,st) ->
      post_success(response)
    fail: (response) ->
      post_error(response)

Upvotes: 1

Related Questions