0

我有一个名为的页面/index，您可以添加一个Houseand Dog。该页面一开始是空白的，但侧面有链接，您可以单击这些链接以动态调出其中一个表单。这些形式是它们自己的部分。

对于这个问题/示例，我将使用 Dog 模型。ADog属于House。

class Dog
 attr_accessible :name, :primary_color, :secondary_color, :house_id......... 
 belongs_to :house
end

狗控制器

def new
 @dog = Dog.new

 respond_to do |format|
  format.js
 end
end

狗/_form.html.erb

<%= simple_form_for(@dog, :remote => true) do |f| %>
  <%= render :partial => "shared/error_message", :locals => { :f => f } %>
    <%= f.input :name %>
    <%= f.input :primary_color %>
    <%= f.input :secondary_color %>
    <%= f.association :house, :prompt => "Select a House" %>      
  <%= f.button :submit, 'Done' %>
<% end %>

页面控制器

def index

  respond_to do |format|
    format.html
  end
end

页面/index.html.erb

<li><%= link_to "Dog", new_dog_path, :remote => true %></li>

<div id="generate-form">
</div>

狗/new.js.erb

$("#generate-form").html("<%= escape_javascript(render(:partial => 'dogs/form', locals: { dog: @dog })) %>");

但现在有时，您可能正在添加一只狗，但需要先添加它所在的房子，然后才能继续。现在，如果您这样做，它只会删除整个 Dog 表格。切换到其他表单时如何保存这些字段的进度？当用户退出页面时怎么办？

4

1 回答 1

1

有很多方法可以做到这一点，这是我的。

首先，我将删除从您的 jQuery 中加载部分内容的调用。这就是你的问题所在。因为每次加载表单时，它都会编写一个新版本的表单。

相反，我会将它们都加载到 html 本身中，而不依赖于 jQuery 调用。然后允许 jQuery 调用只是切换隐藏/显示。像这样：

<div class="dog-form">
  <%= render(:partial => 'dogs/form', locals: { dog: @dog }) %>
</div>
<div class="house-form">
  <%= render(:partial => 'house/form', locals: { house: @house }) %>
</div>

然后，您的 jQuery 可以如下所示：

$("#toggle-dog-form").click(function(){ $(".dog-form").toggle() };
$("#toggle-house-form").click(function(){ $(".house-form").toggle() };

更新

如果你真的需要确保这些表格在那个电话中因为一些我没有听说过的外部原因而被重新加载。然后，您可以在原始 jQuery 调用中添加一个条件，以查看这些输入字段中的任何一个是否已被填充。

于 2012-06-17T15:49:50.943 回答