Question

I’m trying to do a single post using coffeescript and jquery, but my script is not handling the success callback.

*cards_controller.js.coffee*

if $('form').attr('action') == '/cards'   alert "Hey ho"   $('#add_card').click (e) ->
    e.preventDefault()
    $.ajax '/cards',
      type: 'PUT' #Tried POST also
      dataType: 'json'
      error: (jqXHR, textStatus, errorThrown) ->
        console.log textStatus
      success: (res) ->
        console.log "Card name: " + data.card.code + "\nPoints: " + data.points
      complete: (jqXHR, textStatus) ->
        console.log "Status: " + textStatus

index.html.erb

<%= form_tag url_for(:controller => 'cards', :action => 'create'), :remote => true %>

And the generated javascript is the following one:

(function() {

  if ($('form').attr('action') === '/cards') {
    alert("Hey ho");
    $('#add_card').click(function(e) {
      e.preventDefault();
      return $.ajax('/cards', {
        type: 'POST',
        dataType: 'json',
        error: function(jqXHR, textStatus, errorThrown) {
          return alert(textStatus);
        },
        success: function(res) {
          console.log("Card name: " + data.card.code + "\nPoints: " + data.points);
          return $('#card-list > tbody:last').append('<tr>test</tr><tr>uauauiua</tr>');
        },
        complete: function(jqXHR, textStatus) {
          return console.log("Status: " + textStatus);
        }
      });
    });
  }

}).call(this);

*cards_controller.rb*

def create
    card = Card.find_by_code(params[:code])

    if card && card.user.nil?
      current_user.add_card(card)
    else
      return render :status => 401, :json => { :message => "O cartão não existe ou já está cadastrado"}
    end      

    respond_to do |format|
        format.js { render json: { :card => card, :points => card.card_business_points.sum("points") } , content_type: 'text/json' }
    end
end

The request goes successfuly to the controller and the card is created correctly. The problem is that debugging on the Chrome it seems that it don’t handle with the callback and don’t log.

Please can someone help e with this?

Answer 1

I just figured out what was the problem.

In my coffeescript while doing the submit with jQuery ajax function I forget to add the data field with the content I want to submit.

The final script is similar to this one:

(document).ready ->
    if $('form').attr('action') == '/cards'
        $('#add_card').click (e) ->
            e.preventDefault()
            $.ajax '/cards',
                type: 'POST'
                dataType: 'json'
                data: { code: $("#code").val() }
                error: (jqXHR, textStatus, errorThrown) ->
                    alert textStatus
                success: (data, textStatus, jqXHR) ->
                    console.log "Card name: " +
                                data.card.code + "\nPoints: " + data.points

Thank you for the help, I could not figure out why my callbacks were not being called when I did not passed the data parameter.

Regards!