Question

我有两个名为Parent和Child的不同模型。

我有一个名为House的网页，其中包含两个表单link_to：

pages / house.html.erb

link_to "Parent", new_parent_path

link_to "Child", new_child_path

当你从页面开始时，它是空的，没有任何表格。

我希望能够点击new_parent链接并在同一页面上生成父表单，但如果我点击new_child链接，我想删除父表单并将其替换为子表单由AJAX形成。我该怎么做？

Answer 1

我认为没有Ajax会更容易，但是使用css。在页面中生成2个表单（例如使用部分），然后放入隐藏的div（css样式：display: none）内部，并使用带有链接的javascript来显示/隐藏包含您想要的表单的div显示（使用JQuery show and hide effects）

Answer 2

这实际上非常简单。 This question和this one帮助我更好地理解了AJAX和jquery。

让我们以父母为例：

我将format.js放在我的控制器中以进行new操作：

ParentsController

def new
 @parent = Parent.new

 respond_to do |format|
  format.js
 end
end

我将parents/new.html.erb作为个人选择删除，并将其替换为我new.js.erb将调用的"Parent" link_to。

# parents/new.js.erb

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

然后在AJAX的部分remote => true中创建父表单。

# parents/_form.html.erb

<%= form_for(@parent, :remote => true) do |f| %>
    <%= f.input :full_name %>    
  <%= f.button :submit, 'Done' %>
<% end %>

然后我有一个页面同时包含两种形式。

PagesController

def index

  respond_to do |format|
    format.html
  end
end

然后是该页面上父母和孩子的链接。

#pages/index.html.erb

<li><%= link_to "Parent", new_parent_path, :remote => true %></li>
<li><%= link_to "Child", new_child_path, :remote => true %></li>

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

我的remote => true我的链接和表单会响应js行为的new格式，我的div id="generate-form"充当老板，将其中任何一种形式放在它。这会根据您单击的链接自动替换另一个，从而导致动态更改表单。

注意：子模型的代码是相同的（表单字段除外）。只需替换模型名称（Parent to Child）。

如何动态更改表单？

2 个答案: