트위터 부트 스트랩의 모달에 테이블 내용을 렌더링 할 수 없습니까?

Question

은 여기 내 JS

$(document).ready(function() {  
$('#submit').prop('disabled', true).removeClass("btn btn-success").addClass("btn btn-default"); 
$('#btn_AddToList').click(function() { 
$('#submit').prop('disabled', true).removeClass("btn btn-warning").addClass("btn btn-default"); 
var val = $('#txt_RegionName').val(); 
var val2 = $('#txt_Region').val(); 
var val3 = $('#txt_Regio').val(); 
var val4 = $('#txt_Regi').val(); 
$('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>'); 
$('#txt_RegionName').val('').focus(); 
$('#txt_Region').val(''); 
    $('#txt_Regio').val(''); 
    $('#txt_Regi').val(''); 
$('#btn_AddToList1').click(function() { 
    $('#submit').prop('disabled', false).removeClass("btn btn-default").addClass('btn btn-warning'); 
}); 
    }); 
}); 

코드 작품을 _new.html.erb

<div class="container"> 
<hr> 
<div class = "row"> 
<div class = "span9"> 
    <div class = "well"> 
     <%= form_for (@replication) do |f| %> 
     <table> 
    <tr> 
    <td> 
     <%= f.label :SR_NO %> 
    </td> 
    <td> 
     <%= f.text_field :sr_no , :id => "txt_RegionName" %> 
    </td> 
</tr> 
<tr> 
    <td> 
    <%= f.label :Particular %> 
    </td> 
    <td> 
    <%= f.text_area :particular , :id => "txt_Region" %> 
    </td> 
</tr> 
<tr> 
    <td> 
    <%= f.label :Unit %> 
    </td> 
    <td> 
    <%= f.text_field :unit ,:id => "txt_Regio" %> 
    </td> 
    </tr> 
    <tr> 

    <td> 
    <%= f.label :Required_Quantity %> 
    </td> 
    <td> 
    <%= f.text_field :quantity ,:id => "txt_Regi" %> 
    </td> 
    </tr> 
    <tr> 
    <td></td> 
    <td> 
    <table> 
    <tr><td> 
    <input type="button" name="add" id="btn_AddToList" value="add"  class="btn btn-primary" /> 
    </td><td><input type="button" name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" /> 
    </td></tr> 
    </table> 
    </td> 
</tr> 

</table> 
<% end %> 
<table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed"> 
<tr> 
<td>SR_NO</td> 
<td>Item Name</td> 
<td>Particular</td> 
<td>Cost</td> 
</tr> 
</table> 
<input type="button" id= "submit" value="Submit Repication" class="btn btn-success" data-toggle="modal" data-target="#myModal" /> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 

    <h4 class="modal-title" id="myModalLabel"><center>REPLICATION SLIP</center></h4> 
    </div> 
    <div class="modal-body"> 
    <table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed"> 

</table> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
    </div> 
    </div> 
</div> 
</div> 
</div> 
</div> 
</div> 

내 코드하지만 난 테이블의 내용이 modal에 있어야 submit replication 버튼을 클릭 할 때 내가 원하는 . 모달 안에 테이블을 가져 오지 않았다.

감사합니다.

Answer 1

유 부트 스트랩 조동사 이벤트 http://getbootstrap.com/javascript/#modals를 사용하는 것을 할 수있는,을 먼저 div 내부에 테이블을 추가하고 u는 u는 복제를 제출을 클릭하면 모달에 테이블을 추가하고 싶어하기 때문에 지금 그것을 ID/클래스

<div id="table-lst-regions">  
    <table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed"> 
     <tr> 
      <td>SR_NO</td> 
      <td>Item Name</td> 
      <td>Particular</td> 
      <td>Cost</td> 
     </tr> 
    </table> 
</div> 

을 제공 당신의 js에서

는

$('body').on('shown.bs.modal', '#myModal', function() { 
    $(".modal-body").html($("#table-lst-regions").html()); 
}); 

는 u는 더 모달 이벤트에 대한 위의 링크를 참조 할 수 있습니다 추가 할 수 있습니다.