Как я могу изменить формы динамически?

Question

У меня есть 2 разных модели под названием Parent и Child.

У меня есть страница под названием House, который имеет link_to для обеих форм на нем:

страниц/house.html.erb

link_to "Parent", new_parent_path

link_to "Child", new_child_path

При запуске на странице он пуст без форм.

Я хочу, чтобы иметь возможность щелкнуть ссылку new_parent и сгенерировать родительскую форму на той же странице, но если я нажму ссылку new_child, я хочу удалить родительскую форму и заменить ее на дочернюю форму AJAX. Как мне это сделать?

Answer 1

На самом деле это было очень просто создать. 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 })) %>"); 

Затем создайте форму Родитель в частичное что remote => true для AJAX.

# 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 моих ссылок и форм будут реагировать на формат моих new действий и мои div id="generate-form" действуют как босс js, размещение либо образуют частичные внутри него. Это автоматически заменяет одно на другое в зависимости от выбранной вами ссылки, что приводит к динамическому изменению форм.

Примечание: код для детской модели одинаков (кроме полей формы). Просто замените имя модели (от родителя к ребенку).

Answer 2

Я думаю, что это будет проще сделать без Ajax, но с помощью css. Создайте 2 формы на странице (используя, например, частичные) и поместите, чем внутри скрытого div (css style: display: none), и используйте javascript со своими ссылками, чтобы показать/скрыть div, содержащий форму, которую вы хотите отобразить (с помощью JQuery show and hide effects)