어떻게 양식을 동적으로 변경할 수 있습니까?

Question

나는 Parent과 Child이라는 두 가지 모델이 있습니다.

페이지/house.html.erb 시작

link_to "Parent", new_parent_path

link_to "Child", new_child_path

:

나는 둘 다의 형태로 link_to을 가지고 House라는 페이지가 페이지에서 양식이 없으면 비어 있습니다.

은 내가 new_parent 링크를 클릭하고 같은 페이지에서 부모 폼을 생성 할 수 있기를 원하지만 내가 new_child 링크를 클릭하면 내가 부모 폼을 제거하고 AJAX에 의해 자식 폼으로 대체하고자합니다. 어떻게하면 좋을까요?

Answer 1

실제로 이것은 매우 간단하게 만들 수 있습니다. This question 및 this one을 사용하면 AJAX 및 jquery를 더 잘 이해할 수있었습니다.

나는 new 조치를 내 컨트롤러에 format.js을 넣어 :

예로 들어 부모를 사용할 수 있습니다

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>   

내 링크와 형태, 내 new 행동과 보스로 내 div id="generate-form" 행위의 js 형식으로 응답 배치하거나 그것의 부분적인 내부를 형성 할의 remote => true. 이렇게하면 클릭 한 링크에 따라 자동으로 하나를 다른 것으로 대체하므로 양식이 동적으로 변경됩니다.

참고 : 하위 모델의 코드는 양식 필드를 제외하고 동일합니다. 모델 이름 (Parent to Child)을 바꿉니다.

Answer 2

아약스가 없으면 더 쉽게 할 수 있다고 생각하지만 CSS를 사용하면됩니다. 페이지에서 2 개의 폼을 생성하고 (예 : partials를 사용하여) 숨겨진 div (CSS 스타일 : display: none) 내부에 넣고 링크와 함께 javascript를 사용하여 표시 할 양식이 포함 된 div를 표시하거나 숨 깁니다 (JQuery 사용). show and hide effects)