Jquery UI选项卡显示的表单的单独提交按钮

Question

使用Devise构建Rails 3.1应用程序Ruby 1.9以进行用户身份验证。

由于我使用Devise对用户进行身份验证，所以我使用了在users/edit视图中显示的jquery UI选项卡。我有一个选项卡用于显示用户配置文件设置的表单，另一个用于显示用户安全设置的表单。

问题是，当我单击"提交"来更新配置文件或安全信息时，它会尝试提交两者的表单。我为每个选项卡分别设置了提交按钮。我如何设置它，以便我可以单独提交每个选项卡上的表格？

我的用户/edit.html.erb文件

div id="tabs">
<ul id="user-config-tabs">
<li><a href="#profile-tab">Profile Settings</a></li>
<li><a href="#security-tab">Security Settings</a></li>
</ul>
<div id="profile-tab"> <!-- Start security settings tab info-->
<%= render 'profilesettings'%>
</div>
<div id="security-tab"> <!-- Start Profile settings tab info-->
<%= render 'securitysettings'%>
</div>
</div>

配置文件设置PArtial

<h3 style = "text-align: left">Profile Settings</h3>
<div class="row">
<p id="privacy"><%=link_to "privacy policy", privacy_path%></p>
<div class="span6 offset3">
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put }) do |f| %>

<fieldset>
<legend>General Information</legend>
 <div><%= f.label "First Name" %>
 <%= f.text_field :name, :autofocus => true %>
 <%= f.label "Last Name" %>
 <%= f.text_field :last_name, :autofocus => true %>
  <%= f.label "Age" %>
 <%= f.text_field :age, :autofocus => true%>
 <%= f.label "Gender" %>
 <%= f.select :gender, User::GENDER_TYPES, prompt: 'Select'%>
 </div>
 </fieldset>
  <div><%= f.submit "Update", class: "btn btn-large btn-primary" %></div>
 <% end %>
 </div>
 </div>

Answer 1

难道不能让整个表单提交，然后只使用您想要的信息吗？

如果你不想提交页面，那么我会使用ajax提交表单，并只序列化你需要的内容。例如：

$.ajax({
  url: "/post_path",
  type: 'POST',
  cache: false,  
  async: false,
  data: $("#security_form").serialize(),
    success: function(data){
      if(data.valid == "true"){
        $('#notice').html("Updated succesfully").slideDown();
      }else{
        $('#errors').html(data.errors).slideDown();
      }
    }
});  

然后您可以在控制器中处理此问题。