[Javascript] 如何在點擊表格行時使用模式顯示數據(使用引導程序)


Answers

PSL的解決方案在Firefox中不起作用。 FF只接受事件作為形式參數。 所以你必須找到另一種方法來識別選定的行。 我的解決方案是這樣的:

...
$('#mySelector')
  .on('show.bs.modal', function(e) {
  var mid;


  if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) 
    mid = $(e.relatedTarget).data('id');
  else
    mid = $(event.target).closest('tr').data('id');

...
Question

我在整個網絡開發方面都是初學者,經過很多研究,我還是無法完成這個任務。 很感謝任何形式的幫助。 我正在使用最新的rails版本和bootstrap使事情更漂亮。

我有一個包含餐廳訂單的表格。 如果你點擊一行,我希望它使用引導在模態窗口中顯示訂單詳細信息。 我設法通過onclick + javascript函數打開模式,但它看起來有點亂,我仍然不知道如何加載模式的內容div與訂單信息。 這是我有這個代碼:

HTML:

<h1>Orders</h1>
<table class="table table-striped"
  <thead>
    <tr>
      <th>ID</th>
      <th>Customer</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <% @restaurant.orders.each do |order| %>
    <tr onclick="orderModal(<%= order.id  %>);">
      <td><%= order.id %></td>
      <td><%= order.customer_id %></td>
      <td><%= order.status %></td>
    </tr>
    <% end %>
  </tbody>
</table>

<div id="orderModal" class="modal hide fade" role="dialog" 
     aria-labelledby="orderModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3>Order</h3>
  </div>
  <div id="orderDetails"class="modal-body"></div>

  <div id="orderItems" class="modal-body"></div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

JS:

function orderModal(order_id){
    $('#orderModal').modal({
        keyboard: true,
        backdrop: "static"
    });
};



Links