jQuery回调调用两次 [英] jQuery callback called twice

问题描述

我按照Rails转换来执行订阅结算。在这里：

I'm following a Rails cast to implement subscription billing. It's here:

http：/ /railscasts.com/episodes/288-billing-with-stripe

我的代码几乎完全相同，但我通过一些额外的字段到Stripe。麻烦的是，当提交按钮被击中时，javascript ALWAYS中的错误消息显示错误消息...即使成功的收费。我不确定Strip是否返回触发错误的东西，或者是否有JS问题。

My code is virtually identical, though I pass some additional fields to Stripe. The trouble is, the error message in the javascript ALWAYS displays the error message when the submit button is hit... even on successful charges. I'm not sure if Strip is returning something that triggers the error, or if there's a JS problem.

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

subscription =
  setupForm: ->
    $('#new_membership').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
      $('#membership_stripe_card_token').val(response.id)
      $('#new_membership')[0].submit()
    else
      $('#stripe_error').text(response.error.message)
      $('input[type=submit]').attr('disabled', false)

这是错误处理的例子。他们翻转过程并测试错误：

This is the example stripe gives for error handling. They flip the process and test for errors first:

function stripeResponseHandler(status, response) {
    if (response.error) {
        ...
        //show the errors on the form
        $(".payment-errors").html(response.error.message);
    } else {
        var form$ = $("#payment-form");
        // token contains id, last4, and card type
        var token = response['id'];
        // insert the token into the form so it gets submitted to the server
        form$.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
        // and submit
        form$.get(0).submit();
    }
}

更新：

我添加了一个控制台日志语句，现在可以看到 handleStripeResponse 被调用两次，一次当用户点击提交，并返回一个 200 ，然后它似乎再次（也许因为形式然后必须发布到Rails应用程序进行实际处理？并返回一个 0 ，它会踢出错误消息。但是 - 因为Rails现在正在处理服务器端，

I added a console log statement and can see now that handleStripeResponse is being called twice, once when the user hits submit, and it returns a 200, then it seems again (maybe because the form then has to be posted to the Rails app for actual processing? and it returns a 0, which kicks up the error message. BUT -- because Rails is now handling the processing server side, the charge goes through.

这是编译的JS，如果这有帮助：

Here's the compiled JS, if that helps:

(function() {
  var subscription;

  jQuery(function() {
    Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'));
    return subscription.setupForm();
  });

  subscription = {
    setupForm: function() {
      return $('#new_membership').submit(function() {
        $('input[type=submit]').attr('disabled', true);
        if ($('#card_number').length) {
          subscription.processCard();
          return false;
        } else {
          return true;
        }
      });
    },
    processCard: function() {
      var card;
      card = {
        number: $('#card_number').val(),
        cvc: $('#card_code').val(),
        expMonth: $('#card_month').val(),
        expYear: $('#card_year').val()
      };
      return Stripe.createToken(card, subscription.handleStripeResponse);
    },
    handleStripeResponse: function(status, response) {
      if (status === 200) {
        $('#membership_stripe_card_token').val(response.id);
        return $('#new_membership')[0].submit();
      } else {
        $('#stripe_error').text(response.error.message);
        return $('input[type=submit]').attr('disabled', false);
      }
    }
  };

}).call(this);

推荐答案

，因为第二次通过回调它总是返回一个0。

So, my hacky solution thus far is to do this, since the second time through the callback it consistently returns a 0.

 else if status == 0
      $('#stripe_error').text('Processing...')

用户未收到错误消息，并且提交按钮未重新激活。

At least that way, the user doesn't get the error message and the submit button isn't reactivated.

这篇关于jQuery回调调用两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！