使用 Jquery UI 选项卡显示的表单的单独提交按钮答案

【问题标题】：Separate Submit Buttons For Forms Displayed With Jquery UI Tabs使用 Jquery UI 选项卡显示的表单的单独提交按钮
【发布时间】：2013-08-16 03:34:36
【问题描述】：

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

由于我使用 Devise 对用户进行身份验证，因此我使用 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>

个人资料设置部分

<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>

【问题讨论】：

标签： ruby-on-rails-3 jquery-ui

【解决方案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();
      }
    }
});

然后你可以在控制器中处理这个。

【讨论】：