JQuery doesn`t fire/work with my Rails 3.2 project

Question

As in the title, I`ve made sure all needed JS files are included in the meta tags, included the jquery-rails/coffee-rails gem, linked to a external one just in case.

This is a modified script from Ryan Bates tutorial on Stripe, from what I understand it`s suppose to fire up by detecting the submit action from the form.

Since I'm not that familiar with JS or CoffeeScript, I can't really pin point what's the problem here.

Would appreciate any help I can get.

The donations.js file:

jQuery ->
      Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'))
      donation.setupForm()

donation =
  setupForm: ->
    $('#new_donation').submit ->
      $('input[type=submit]').attr('disabled', true)
      if $('#card_number').length
        donation.processCard()
        false
      else
        true

  processCard: ->
      card =
      number: $('#card_number').val()
      cvc: $('#card_code').val()
      expMonth: $('#card_month').val()
      expYear: $('#card_year').val()
    Stripe.createToken(card, donation.handleStripeResponse)

  handleStripeResponse: (status, response) ->
    if status == 200
      alert(response.id)
    else
      alert(response.error.message)

The donations/new.html.erb form

<%= form_for(@donation) do |f| %>
                <div class="field">
                    <%= f.label :from %>
                    <%= f.text_field :from %>
                </div>
                <div class="field">
                  <%= label_tag :card_number, "Credit Card Number" %>
                  <%= text_field_tag :card_number, nil, :name => nil %>
                </div>
                <div class="field">
                  <%= label_tag :card_code, "Security Code (CVV)" %>
                  <%= text_field_tag :card_code, nil, :name => nil %>
                </div>

                <div class="field">
                  <%= label_tag :card_month, "Card Expiration" %>
                  <%= select_month nil, {:add_month_numbers => true}, {:name => nil, :id => "card_month"} %>
                  <%= select_year nil, {:start_year => Date.today.year, :end_year => Date.today.year+15}, {:name => nil, :id => "card_year"} %>
                </div>
                <div class="field">
                    <%= f.label :Notes %>
                    <%= f.text_field :note %>
                </div>
                <br>
                <center>
                    <span class="BigBold">Amount: $2.50</span>
                    <%= f.hidden_field :amount, {:value => "2,5" } %><br>
                </center>
                <br>
                <center>
                    <%= f.submit "Donate Now", :class => 'donate-button' %>
                </center>
            <% end %>

Answer 1

Peter is correct, your coffeescript code should be properly named so that it can be translated to JavaScript.

An additional debugging strategy is to look at the html/js source being sent to your browser. Use the view source command to see the html source. Then click on the reference to the js link containing the translated donations.js.

Answer 2

Your javascript seems to be, well, Coffeescript - make sure it's put in its own donations.js.coffee file, and that you're including the coffee-rails gem while you're at it.

Standard debugging techniques would be useful here - try adding an alert("It lives!") or something after the initial jQuery -> line to see if the document.ready handler is ever being called.

If not, check to make sure that the donations.js.coffee file is being loaded in the first place, and if not, make sure you're either loading it in your page's header, or you have something like this in application.js:

//= require jquery
//= require donations

Or, if you just want to include everything in app/assets/javascripts:

//= require jquery
//= require_tree .