.submit()
在第一次提交表单时没有被调用。一旦创建操作失败并且用户被重定向回页面,如果单击提交按钮,该函数就会被调用。我将调试器投入setUpForm()
,并且在第一次加载页面并提交表单时不会触发它。jquery .submit第一次没有被调用
第二个问题是.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: <%[email protected] %></p><br>
<p>From: <%[email protected]%> 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>
你可以创建一个jsfiddle。这将是非常容易调试jsfiddle.net –
的动画问题已解决 - 感谢与jsfiddle提示,花了约2秒。对于'.submit'问题,直到第一次提交失败并且浏览器重定向回页面后,事件才会被绑定。 – user2201289
整个'$(function()'在原始页面加载实体上没有被调用 – user2201289