javascript - 让 Coffeescript 找到正确的 Div//Stripe 错误

Question

在 Ryan Bates 教程的帮助下，我能够设置 Stripe。现在，我试图允许用户更新他们的信用卡信息。

现在我很想在单击操作按钮时调用 Stripe 。可能的原因是我通过复制 Ryan 的代码来制作新信用卡，从而将 CoffeeScript 拼凑在一起。

这是我用来放置新信用卡信息的表格

<%= form_tag("/users/update_card", :method => "put", :class => "edit_user", :id => "change_card" ) do %>
  <%= hidden_field_tag :stripe_card_token %>

  <div id="stripe_error" class="alert">   
      <noscript>JavaScript is not enabled and is required for this form. First enable it in your web browser settings.</noscript>
  </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 on Card (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>


  <%= submit_tag("Update My Credit Card", :class => "button") %>

这是我正在使用的 Coffeescript。前半部分涵盖了新用户的注册(有效)，后半部分从changecard.setupForm()开始，则没有

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/

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

subscription =
  setupForm: ->
    $('#new_user').submit ->
      $('input[type=submit]').attr('disabled', true)
      if $('#card_number').length
        subscription.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, subscription.handleStripeResponse)

  handleStripeResponse: (status, response) ->
    if status == 200
      $('#user_stripe_card_token').val(response.id)
      $('#new_user')[0].submit()
    else
      $('#stripe_error').text(response.error.message)
      $('input[type=submit]').attr('disabled', false)

changecard.setupForm()

changecard =
  setupForm: ->
    $('#change_card').submit ->
      $('input[type=submit]').attr('disabled', true)
      if $('#card_number').length
        subscription.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, subscription.handleStripeResponse)

  handleStripeResponse: (status, response) ->
    if status == 200
      $('#user_stripe_card_token').val(response.id)
      $('#change_card')[0].submit()
    else
      $('#stripe_error').text(response.error.message)
      $('input[type=submit]').attr('disabled', false)

这是我的 update_card 操作

  def update_card
  @user = current_user
  cu = Stripe::Customer.retrieve(@user.stripe_customer_token)
  cu.card = params[:stripe_customer_token] # obtained with Stripe.js
  cu.save
  redirect_to edit_user_path(@user)
  end

感谢您坚持到现在!非常感谢您的想法。

编辑

单步执行 JavaScript 后，它暂停在

changecard.setupForm()  

这就是我开头的那句话:P。错误是

uncaught TypeError: Cannot call method 'setupForm' of undefined

似乎 Changecard 没有使用我上面放置的 CoffeeScript 正确定义。我不知道如何改变它，非常感谢任何帮助!

编辑2

通过 JavaScript 调试，这是最终代码，它似乎提供了 stripe_card_token

**# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
jQuery ->
  Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'))
  subscription.setupForm()
  changecard.setupForm()
subscription =
  setupForm: ->
    $('#new_user').submit ->
      $('input[type=submit]').attr('disabled', true)
      if $('#card_number').length
        subscription.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, subscription.handleStripeResponse)

  handleStripeResponse: (status, response) ->
    if status == 200
      $('#user_stripe_card_token').val(response.id)
      $('#new_user')[0].submit()
    else
      $('#stripe_error').text(response.error.message)
      $('input[type=submit]').attr('disabled', false)
changecard =
  setupForm: ->
    $('#change_card').submit ->
      $('input[type=submit]').attr('disabled', true)
      if $('#card_number').length
        changecard.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, changecard.handleStripeResponse)

  handleStripeResponse: (status, response) ->
    if status == 200
      $('#stripe_card_token').val(response.id)
      $('#change_card')[0].submit()
    else
      $('#stripe_error').text(response.error.message)
      $('input[type=submit]').attr('disabled', false)**

Answer 1

编辑2

通过 JavaScript 调试，这是最终代码，它似乎提供了 stripe_card_token

**# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
jQuery ->
  Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'))
  subscription.setupForm()
  changecard.setupForm()
subscription =
  setupForm: ->
    $('#new_user').submit ->
      $('input[type=submit]').attr('disabled', true)
      if $('#card_number').length
        subscription.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, subscription.handleStripeResponse)

  handleStripeResponse: (status, response) ->
    if status == 200
      $('#user_stripe_card_token').val(response.id)
      $('#new_user')[0].submit()
    else
      $('#stripe_error').text(response.error.message)
      $('input[type=submit]').attr('disabled', false)
changecard =
  setupForm: ->
    $('#change_card').submit ->
      $('input[type=submit]').attr('disabled', true)
      if $('#card_number').length
        changecard.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, changecard.handleStripeResponse)

  handleStripeResponse: (status, response) ->
    if status == 200
      $('#stripe_card_token').val(response.id)
      $('#change_card')[0].submit()
    else
      $('#stripe_error').text(response.error.message)
      $('input[type=submit]').attr('disabled', false)**