Question

我有以下代码：

order =
  setupForm: ->
    $('.new_order').submit ->
      $form = $(this)
      $form.find('input[type=submit]').attr('disabled', true)
      order.processCard($form)
      false

  processCard: ($form)->
    card =
      number: $form.find('.card_number').val()
      cvc: $form.find('.card_code').val()
      expMonth: $form.find('.card_month').val()
      expYear: $form.find('.card_year').val()
    Stripe.createToken card, (status, response) ->
      order.handleStripeResponse(status, response, $form)

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

它完全可以呈现错误（如果卡号错误/丢失等），但是当我输入Stripe提供的正确卡片详细信息时，它不会提交任何内容。

我确定这是一件非常明显的事情，但我需要一些新的眼睛来指出哪里有错误。

Answer 1

您的问题是您的提交处理程序调用您的提交处理程序，该处理程序调用您的提交处理程序...

事件的顺序如下：

提交了<form>。
提交处理程序调用{{1}}。
processCard通过processCard对条带进行AJAX调用。
Stripe.createToken回调电话createToken。
handleStripeResponse来电handleStripeResponse。
提交了$form.submit()。
...

如果我们看一个简化的仪表化示例，问题可能会更清晰。给定一个简单的<form>，其中包含一个提交按钮和此代码：

<form id="f">

当你点击提交按钮时，你会看到它循环三次，hand_break = 0 ajax_simulator = ($f) -> fn = -> console.log("AJAX callback called: #{hand_break}") $f.submit() setTimeout(fn, 500) $('#f').submit -> return false if(++hand_break > 3) console.log("submit handler called: #{hand_break}") ajax_simulator($(@)) false的东西只是手动停止无限循环。

演示：http://jsfiddle.net/ambiguous/JHF3f/

那你怎么打破这个循环呢？您的hand_break处理程序需要知道何时返回$('.new_order').submit以及何时返回false，如果您返回true，则表单将提交给服务器，一切都会正常。您已经存储了Stripe令牌：

true

所以你可以检查一下是否存在：

$form.find('.order_stripe_card_token').val(response.id)

您需要确保$('.new_order').submit -> return true if($form.find('.order_stripe_card_token').val()) #...已正确初始化，错误时清除等。

调试条纹付款coffeescript

1 个答案: