Question

首次提交表单时，不会调用.submit()。一旦创建操作失败并且用户被重定向回页面，如果单击提交按钮，则调用该函数。我将调试器抛入setUpForm()，并且在第一次加载页面并提交表单时不会触发它。

第二个问题是.animate不再有效。它是，但后来才停止。这是代码

purchase.js

$(function(){
    Stripe.setPublishableKey($('meta[name = "stripe-key"]').attr('content'));
    setUpForm();


        function setUpForm(){ $('#new_purchase').submit(function(){
            $('input[type= submit]').attr('disabled',true);
            processCard();
            return false
    });
}

 function processCard() {
        var card = {
            number : $("#card_number").val(),
            cvc: $('#card_code').val(),
            expMonth: $('#card_month').val(),
            expYear : $('#card_year').val()
        };
        Stripe.createToken(card, handleStripeResponse); 
    }

   var handleStripeResponse = function(status, response){
        if (response.error)
            {
                var originalColor = $('#stripe_error').css('background')
                $('#stripe_error').text(response.error.message).show();
                $('#stripe_error').animate({backgroundColor: "#FFFF00"}, 1000, function(){
                    $(this).animate({backgroundColor: originalColor}, 1000);
                });
            $('input[type=submit]').attr('disabled', false);
        // alert(response.error.message);

        }
  else
  {
        // alert(response.id);
    $('#purchase_stripe_customer_token').val(response.id)
        $('#new_purchase')[0].submit()
  }
 }
 });

ny.html.erb

<div class = "uk-width-4-6 greeting_div">

    <div class = "img_div"><img class="trip_page" src= <%= asset_path('top_empire.JPG') %>></div>
    <h1 class= "greetings"> Greetings from: </h6>


</div>

<div class = "uk-width-2-6 greeting_div_2">
    <img class= "stamp" src = <%= asset_path('us_stamp.jpg') %> >
    <div class= "trip_information">
        <p>To: <%=@purchase.trip.location %></p><br>

        <p>From: <%=@purchase.trip.cost%> for 10 days</p>
        <div class = "uk-form"> <%= render 'layouts/form' %></div>
    </div>

</div>

_form_html.erb

 <br>
        <legend> Buy Now! </legend>
       <%= form_for(@purchase, :method => :post) do |f| %>
        <% if @purchase.errors.any? %>
        <div class="error_messages">
            <ul>
                <%= @purchase.errors.full_messages.each do |error| %>
                    <li> <%= error %> <li>
                <% end %>
            </ul>
        </div>
        <%end%>

        <%= f.hidden_field :trip_id %>
        <%= f.hidden_field :stripe_customer_token %>
        <%= f.hidden_field :value_of_trip, value: "#{@purchase.trip.cost}"%>

        <% if @purchase.stripe_customer_token.present? %>
            <p> Your card has been provided <p>
        <% else %>
        <div id="stripe_error">
                    <noscript> Javascript must be enabled to use this form </noscript>  

            </div></br> 
                <div class = "uk-form-row">
                    <%= label_tag :card_number, "Credit Card Number" %>
                    <%= text_field_tag :card_number, nil, name: nil %>
                </div>
                <div class = "uk-form-row">
                    <%= label_tag :card_code, "Security Code" %>
                    <%= text_field_tag :card_code, nil, name: nil %>
                </div>
                <div class = "uk-form-row">
                    <%= label_tag :card_month, "Credit 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><br>
        <% end %>
            <div class = "uk-form-row submit">
                <%= f.submit "Purchase" %>
            </div>
    <% end %>

来源

 <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/uikit.almost-flat.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/uikit.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/home_pages.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/purchases.css?body=1" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="https://js.stripe.com/v1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/form.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/purchases.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/uikit.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>

Answer 1

<强> Turbolinks

这听起来像是Turbolinks

的问题

基本上，Turbolinks通过保持<head>代码不变来更快地加载Rails页面，用ajax更改<body>。问题是这使得您的标准JS认为页面没有改变，因此仅在刷新后工作

有两种方法可以修复Turbolinks问题：

代表

使用Turbolinks page:load＆amp; page:change

<强>代表

如果要绑定到submit事件，那么delegating对象中最好document（不会更改）：

$(document).on("submit", "#new_purchase", function() {
  //submit code
});

<强>事件

有two Turbolinks events called page:load and page:change可以为您提供极大的帮助：

$(document).ready(your_function);
$(document).on('page:load', your_function);
$(document).on('page:change', your_function);

Answer 2

如果我理解正确您的表格上的脚本提交检查信用卡数据，并在成功验证后再次提交整个表格

修改你的setupForm方法：

/**
 * Simulate form submit with click on submit button
 */
$('input[type= submit]').on('click', function (e) {
    e.preventDefault();
    $(this).attr('disabled', true);
    processCard();
});

和回调

var handleStripeResponse = function (status, response) {
    if (response.error) {
        var originalColor = $('#stripe_error').css('background')
        $('#stripe_error').text(response.error.message).show();
        $('#stripe_error').animate({
            backgroundColor: "#FFFF00"
        }, 1000, function () {
            $(this).animate({
                backgroundColor: originalColor
            }, 1000);
        });
        $('input[type=submit]').attr('disabled', false);
        // alert(response.error.message);

    } else {
        // alert(response.id);
        $('#purchase_stripe_customer_token').val(response.id)
        /**
         * Trigger submit on form after succesfull validation
         */
        $('#new_purchase').trigger('submit');
    }
}

jquery .submit第一次没有被调用

2 个答案: