주문형 모달 렌더링?

Question

현재 내가 이해하고있는 것처럼 jquery 모달은 페이지로드 중에 렌더링되고 hidden = true to hidden = false 값을 통해 사용자에 의해 트리거됩니다.

페이지 당 모달을 최소로 유지하면 좋지만 멋지게 작동합니다. 그러나 여기에 내 질문이 있습니다. 당신이 클릭 할 때 편집 할 모달 정보를 팝업하는 모달의 전체 목록을 가지고 있다면 어떨까요? 예를 들어 문서 격자를 말하면 문서를 클릭하고 모달 팝업을 사용하여 작은 문서를 편집 할 수 있습니다. 페이지를로드하는 동안 이러한 모든 문서를 렌더링하지 않으면 사용자 환경이 느려집니다. 요청에 따라 해당 모달을로드하고 렌더링하는 방법이 없습니까?

이 유형의 동작에 대한 표준 방법은 무엇입니까?

문서 당 새 페이지를로드하는 방법은 알고 있지만이 작업을 어떻게 수행 할 수 있는지 궁금합니다.

jQuery 군중에도이 라이브러리가 가장 익숙한 태그가 붙어 있습니다.

Answer 1

내 앱에서이 작업을 많이합니다. 이것은 내 앱 중 하나의 피드백 버튼 코드입니다.

대화 상자를 만들고 단추를 누르면 대화 상자의 내용이 동적으로로드됩니다.

$(function() { 
    var button= $("#FeedbackButton"); 
    if (button.length == 0) 
     button= $("<div id='FeedbackButton'>Feedback</div>").hide().appendTo("body"); 


    var dialog = $("#FeedbackDialog"); 
    if (dialog.length == 0) 
     dialog = $("<div id='FeedbackDialog'>Feedback</div>").hide().appendTo("body"); 

    button.click(function() { 
     button.hide(); 
     dialog.load("_FeedbackDialog.htm"); 
     $(dialog).dialog({ 
      title: "Feedback", 
      modal: true, 
      width: 800, 
      height: 300, 
      close: function() { 
       $(button).show(); 
      } 
     }); 
    }); 
}); 

Answer 2

요청에 따라 모달을 렌더링하면 AJAX 쿼리에 응답하는 것으로 가정합니다. 이 경우, 필요에 따라 모달을 구축 할 수있는 방법이 있습니다. 당신이해야 할 일은 컨트롤러에 AJAX 호출을하는 이벤트 리스너를 설정하는 것입니다.

# my_view.html 
/* inside JS event trigger */ 
$.get("/get_modal.js") 

그런 다음 컨트롤러에서, 그 AJAX 호출에 응답합니다.

# my_controller.rb 
def get_modal 
    respond_to do |format| 
    format.js # this will execute get_modal.js (or get_modal.js.erb) 
    end 
end 

어떤 희망을 할 무료 잎 귀하의 "보기"그러나 HTML되지 않습니다, 그것은 것입니다 JS.

# get_modal.js 
/* JS modal code */