레일이 부분적으로 모달로 표현됩니다.

Question

로컬 변수가있는 모달에서 부분을 표시하는 데 정말 고심하고 있습니다. 저는 Javascript에 익숙하지 않아 새로운 대화 상자 형식으로 부분을 렌더링하는 방법을 알아낼 수 없습니다. 현재 "display : none"으로 부분을 렌더링하고 "Click me"를 클릭하면 부분이 페이지에 표시되고 빈 대화 상자가 열립니다. 불행히도, 내 의도는 부분적으로 작동하지 않는 대화 상자를 표시하는 것입니다.

뷰 :

<div id="groups_show" style="display:none"> 
     <%= render partial: 'groups/group_full', :locals => {:group => group} %> 
    </div> 
    <%= link_to "Click me", root_url, class: "groups_showme" %> 

자바 스크립트 :

$('.groups_showme').on('click', function(e) { 
    e.preventDefault(); 
    $('#groups_show').show(); 
    var htmlString = $(this).html(); 
    var dialog_form = $('<div id="dialog-form">Loading</div>').dialog({ 
    autoOpen: false, 
    width: 520, 
    modal: true, 
    open: function() { 
     return $(this).html(htmlString); 
    }, 
    close: function() { 
     $('#dialog-form').remove(); 
    } 
}); 

Answer 1

는 아마도 이것은 당신

$('.groups_showme').on('click', function(e) { 
    e.preventDefault(); 

    $('<div id="dialog-form">Loading</div>').dialog({ 
     autoOpen: true, 
     width: 520, 
     modal: true, 
     open: function() { 
      $(this).append($('#groups_show').show()); 
     }, 
     close: function() { 

     } 
    }); 
}); 

을 위해 작동 할 http://fiddle.jshell.net/aeuzF/3/