모달을 사용하여 편집 경로 표시

Question

매우 간단한 레일 3 애플리케이션에 루비를 쓰고 있습니다 : 사용자는 자신의 홈페이지에 표시되는 게시물을 만들고이 게시물을 편집하고 삭제할 수 있습니다. 내 질문은 편집 기능과 관련이있다. 뭔가를 편집하는 일반적인 방법은 전화 할 것입니다.

<%= link_to "edit", edit_post_path(post_item) %> 

여기서 post_item은 선택한 게시물입니다. 그러나 사용자를 편집 페이지 (/views/posts/edit.html.erb)로 리디렉션하는 대신 사용자가 편집 버튼을 클릭하면 편집 페이지가 모달로 렌더링됩니다. 트위터 - 부트 스트랩을 사용하고 모달을 만드는 방법을 알고 있습니다. 어떤 아이디어?

Answer 1

, 나는 비슷한 문제를 가지고 있었고, 다음을 수행하여이를 해결 확실하지 : 만들 수 없습니다로서 나는 JQuery와 - UI 대화 상자를 사용하고

를, 부트 스트랩하지 모달 그것은 작동합니다. 그래서 라이브러리에 라이브러리가 없으면 추가하십시오. 자산/자바 스크립트/application.js에서

내가 내 레이아웃에서 다음

$(document).ready(function() { 

     var modal=$('#modal'); 
     $('#edit_house_link').click(function(e) { 
      var edit_url = $(this).attr('href'); 
      modal.load(edit_url + ' #content',function(){ 
      modal.dialog("open"); 
      }); 
     }); 
     modal.dialog({ autoOpen: false, title: "Your title", draggable: true, 
     resizable: false, modal: true, width:'auto'}); 

    }); 

이/application.html.erb 내가있는 페이지의 본문, 내부

<p id="modal"></p> 

어딘가에 우리가 모든 정보를로드 할 요소.

내 인덱스보기에서 나는 이것을 처리하는 링크가 있는데, 내 모델은 집이라고 불리우며, 귀하의 이름이 무엇이든 변경됩니다. 당신이 볼 수 있듯이

<%= link_to 'Edit', edit_house_path(house), :remote => true, :id => 'edit_house_link' %> 

것은, 나는 내가 application.js 파일에 참조하고있어 이것을 edit_house_link ID를주는거야. 집 내부 컨트롤러

제가 가지고

def update 
    @house = House.find(params[:id]) 
    respond_to do |format| 
    if @house.update_attributes(params[:house]) 
     format.js 
    else 
     format.js 
    end 
    end 
end 

을하고 난 세 전망을 가지고, 하나의 의견/주택 대한 edit.html.erb, update.js.erb 및 _form.html.erb은 폴더.

때문에 내부 인원/주택/update.js.erb 제가 가지고

<%- if @house.errors.any? %> 
    $('#modal').html('<%= escape_javascript(render('form')) %>'); 
<%- else %> 
    $('#modal').dialog('close'); 
    $('#modal').remove(); 
    window.location.reload(); 
<%- end %> 

이 코드는 에러가 있어야 닫히는 모달을 방지하는 것이다. 보시다시피 오류가 없으면 대화 상자가 닫히고 페이지가 새로 고쳐져 변경 사항이 표시됩니다. 이 견해/주택/edit.html.erb 파일에

내가 무엇을 가지고 : 당신이 application.js 파일의 콘텐츠 ID를 다시 볼 그렇다면

<div id="content"> 
<%= render :partial => 'form' %> 
</div> 

을, 우리는이를로드하는 모달 안에.

그리고 마지막으로 부분보기/houses/_form.html.당신이 정상적인 양식을함으로써 사용자의 요구에 적응할 수 있도록 ERB

<%= simple_form_for(@house, :html => { :class => 'form-vertical' }, :remote => true) do |f| %> 
<fieldset> 
    <%= f.input :address %> 
    <%= f.input :postcode %> 
    <%= f.input :city %> 
    <%= f.input :country %> 
</fieldset> 
    <div class="form-actions"> 
    <%= f.button :submit %> 
    </div> 
<% end %> 

나는, simple_form을 사용하고 있습니다,하지만 난 추가했다 : 실제로 작동하는 원격 => 진정한 속성을.

잘하면이 도움이!

Answer 2

가장 쉬운 방법은 링크에 remote => true 옵션을 설정하는 것입니다. 그리고 클라이언트 쪽에서 폼에 부분적으로 렌더링 할 js를 렌더링하고 $ ('myModal'). modal (options)을 호출하고 대화 상자를 엽니 다. 당신은 여전히이 작업을하는 경우