내가 달성하기 위해 노력하고있어 <a href="https://richonrails.com/articles/basic-ajax-in-ruby-on-rails" rel="nofollow">here</a></p> <p>발견 내가 자습서를 따랐다

Question

원격 만들 수있는 링크 모달 편집 기록을 레일, 사용자가 조동사를 사용하여 인덱스 페이지에서 레코드를 편집 할 수 있도록하는 것입니다. 내 index.haml보기에서

나는이 있습니다

_edit.haml에서

- @bars.each do |bar| 
    = link_to "Edit", edit_bar_path(bar), remote: true, class: "btn btn-default" 

#bar-modal.modal.fade 

:

edit.js.erb _form.haml에서

$("#bar-modal").html("<%= escape_javascript(render 'edit') %>") 
$("#bar-modal").modal("show") 

에서

.modal-header 
    %h3= "Editing #{@bar.foo}" 
= render "form" 

= bootstrap_form_for @bar, remote: true do |f| 
    = f.text_field :foo 
    = f.button "Save" 

내 컨트롤러는 표준 레일즈 생성 CRUD 컨트롤러입니다.

링크를 클릭하면 몇 가지 이유로 모달이 표시되지 않습니다. 나는 다른 방식으로 작동하도록 만들었지 만 편집 한 형태가 아닌 '생성'형식을 열었습니다.

저는 부트 스트랩과 햄을 사용하고 있습니다. 나는 방화범에 오류가 없음을 확인했다.

무엇이 누락 되었습니까?

Answer 1

컨트롤러를 수정하여 js 응답을 렌더링 했습니까? 컨트롤러의 edit 행동

,

def edit 
    #find the record 
    respond_to |format| 
    format.js # this will render edit.js.haml 
    # other formats 
    end 
end 

추가 그리고 당신은 당신의 edit.js.haml에 haml와 erb을 혼합했다. 코드의 첫 번째 줄이 실행

$('#modal-container').html('#{ j(render 'edit') }'); 
$('#bar-modal').modal("show"); 

으로 #bar-modal 우리의 문서에 존재 함을 교체합니다. 그런 다음 modal 메서드를 호출하여 모달을 표시 할 수 있습니다.

j은 escape_javascript의 별칭입니다. (키 입력이 적음)

에 modal-container 인 ID가 div인지 확인하십시오. 그리고 귀하의 모달 (_edit.html.haml)의 ID는 bar-modal이어야합니다. 우리가 ID bar-modal과 모달을 가지고이이 index.html.haml에 있어야 자리 표시 자 DIV #modal-container로 렌더링됩니다

.modal.fade.in#bar-modal 
    .modal-dialog 
    .modal-content 
     .modal-header 
     %h3= "Editing #{@bar.foo}" 
     .modal-body 
     = render "form" 

참고 :

그리고 _form.html.haml에 모달는 다음과 같이 보일 것입니다. 그것은 이런 식이어야합니다.

%div{id: "modal-container"} 
    <!-- this is where the modal will go in --> 

- @bars.each do |bar| 
    = link_to "Edit", edit_bar_path(bar), remote: true, class: "btn btn-default" 

modal-container을 문서 맨 위에 추가하십시오.부트 스트랩의 문서,

모달 마크 업 위치에서

항상 모달의 모양 및/또는 기능에 영향을 미치는 다른 요소를 방지하기 위해 문서의 최상위 위치에 모달의 HTML 코드를 삽입하려고합니다.

희망이 있습니다.