无法在Twitter Bootstrap中将表的内容呈现为模式？

Question

HERE IS MY CODE IN _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>

MY 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');
});
  });
});

the code works but i want when i click on the submit replication button the content of the table should be in the modal .how to render i did not get the table inside the modal.

thank you.

Answer 1

firstly add your table inside a div and give it a id/class

<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>

now since u wanted to add table in modal when u click on submit replication, u can do that using bootstrap modals event http://getbootstrap.com/javascript/#modals

in your js add

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

u can refer above link for more modal events.