3个并发问题：
- 模态表单内联验证未显示
- 模态表单未提交
- 在哪里定义 ajax 提交后发生的页面更改？UJS文件，js根目录下的jquery等。
对于上下文，这是流程：
- 非用户点击“购买”按钮
- 'transactions/form' 模态表单打开：包含一个创建新事务的表单和可选的 - 一个新用户（注册）
- 表单包含条纹信用卡字段和可选的密码/电子邮件字段，还包含有关帖子信息的隐藏字段（id、价格等...）
- 用户有两个选择 ：只输入信用详细信息 b. 输入信用详细信息和密码/电子邮件，即注册
- 点击提交
- IF：选项 a，仅输入了信用详细信息
- 验证卡
- 充值信用卡
- 关闭模式并对页面进行适当的更改
- IF：选项b，信用卡+注册信息已输入
- 验证卡和用户详细信息
- 创建用户
- 创建客户并收费客户
- 关闭模式并对页面进行适当的更改
- 帖子从“活动”更改为“非活动”
我正在使用 client_side_validations gem。
按照上述步骤的粗略顺序，这里是我的购买按钮、模态表单、jquery 和控制器的详细信息。
查看：使用购买按钮和模式形式发布项目：
/button that opens modal form
%a.btn.buy-button{remote: :true,"data-toggle" => "modal", :href => "#buy_modal", :role => "button"} Buy
/the modal form
%div#buy_modal.modal{:role => "dialog",:style=>"display:none"}
=render :partial => 'transactions/form'
模态形式：
=form_for @transaction, :validate => true, :html => {:class => "form"} do |f|
=yield(:user_validators)
- if @user.errors.any?
#error_explanation
%h2= "#{pluralize(@user.errors.count, "error")} prohibited this group from being saved:"
%ul
- @user.errors.full_messages.each do |msg|
%li= msg
/POST DETAILS
= f.hidden_field :stripe_card_token
= f.hidden_field :price
= f.hidden_field :tier_id
= f.hidden_field :premium
= f.hidden_field :notify_premium
= f.hidden_field :user_id
= f.hidden_field :customer_id
/CREDIT CARD STUFF
#credit-card{:style => @user.stripe_customer_id ? "display:none" : "display:block"}
#credit-card-errors{:style => "display:none"}
#stripe-error-message.alert-message.block-message.error
%div.row-fluid
= label_tag :credit_card_number
= text_field_tag :credit_card_number, params[:credit_card_number], :class=>"credit-number span12"
%div.row-fluid
%div.span6
= label_tag :expiry_date
= date_select "", :expiry_date, {:discard_day => true, :order => [:month, :year], :use_month_numbers => true, :start_year => Date.today.year, :end_year => Date.today.year + 25}, {:class =>"credit-expiry inline"}
%div.span3
%div.span3.credit-cvv
= label_tag :cvv, "CVV"
= text_field_tag :cvv, params[:cvv], :class=>"credit-cvv input-block-level"
/NEW USER STUFF
=f.label :email
=f.text_field :email
=f.label :password
=text_field_tag :password, params[:password]
=f.submit "Save"
管理模式的 Jquery：
$(document).ready(function() {
var $buy_dialog = $('#buy_modal').dialog({
autoOpen: false,
title: 'Edit',
modal: true,
draggable: false,
buttons: {
"Save": function() {
$("#new_transaction").submit(function(){
var valuesToSubmit = $(this).serialize();
$.ajax({
url: $(this).attr('action'), //sumbits it to the given url of the form
data: valuesToSubmit,
type: 'POST',
dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
}).success(function(json){
//act on result.
});
return false;
});
$('#buy_modal').dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
管理模式内联验证的 Jquery
$(document).ready(function(){
$('.form').enableClientSideValidations();
$('.form').on('shown', function() {
$(ClientSideValidations.selectors.forms).validate();
});
};
事务控制器，create动作：
def create
@transaction = Transaction.new(params[:transaction])
@user = User.new(:email => params[:transaction][:email], :password => params[:password])
respond_to do |format|
if params[:password]
#let's make a user and a transaction object
if @transaction.save
@user.save_with_payment
format.html { redirect_to @transaction, notice: 'Transaction was successfully created.' }
format.json { render json: @transaction, status: :created, location: @transaction }
else
format.html { render action: "new" }
format.json { render json: @transaction.errors, status: :unprocessable_entity }
end
else
if @transaction.save
@transaction.payment(params[:transaction][:tier_id],params[:transaction][:price],params[:transaction][:premium],params[:transaction][:premium_notify])
format.html { redirect_to @transaction, notice: 'Transaction was successfully created.' }
format.json { render json: @transaction, status: :created, location: @transaction }
else
format.html { render action: "new" }
format.json { render json: @transaction.errors, status: :unprocessable_entity }
end
end
end
end
用户控制器，create动作：
def create
@user = User.new(params[:user])
respond_to do |format|
#OPTION A, explained above
if params[:user][:password].nil?
# Charge the card and don't make a user
# get the credit card details submitted by the form
token = params[:stripeToken]
# create the charge on Stripe's servers - this will charge the user's card
charge = Stripe::Charge.create(
:amount => 1000, # amount in cents, again
:currency => "usd",
:card => token,
:description => params[:email]
)
#OPTION B, explained above
else
# create user, customer, and charge them
token = params[:stripeToken]
if @user.save_with_payment(token)
@user.payment()
format.html { redirect_to @user, notice: 'User was successfully created.' }
format.json { render json: @user, status: :created, location: @user }
else
#error message
format.html { render action: "new" }
format.json { render json: @user.errors, status: :unprocessable_entity }
end
end
end
end
我意识到这是一个庞大的问题，但这是一个非常常见的项目元素。我已经通过堆栈溢出来寻找每个组件的答案，但没有任何东西符合要求。
使用 jquery 以 ajax 方式在 Rails 中提交表单
Jquery modal box 表单验证（尝试重新发明轮子，而不是轨道，并且指导不规范）
使用 jquery 在模态窗口中验证表单输入时出现问题（此处没有 MVC，并且实际上没有回答问题）
在 jquery 模态视图中带有 formtastic 的 client_side_validations gem 不起作用（未回答）