How can I show data using a modal when clicking a table row (using bootstrap)?

Question

I'm sort of a beginner on the whole web development thing and after researching a lot I still couldn't get this done. Any help is very much appreciated. I'm using latest rails version and bootstrap to make things prettier.

I have a page with a table which contains orders from a restaurant. If you click a row I want it to show the order details in a modal window using bootstrap. I have managed to open the modal via onclick+javascript function but it looks kinda messy and I still have no clue how to load the content div of the modal with the order info. Here's the code I have for this:

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"     }); }; 

Answer 1

One thing you can do is get rid of all those onclick attributes and do it the right way with bootstrap. You don't need to open them manually; you can specify the trigger and even subscribe to events before the modal opens so that you can do your operations and populate data in it.

I am just going to show as a static example which you can accommodate in your real world.

On each of your <tr>'s add a data attribute for id (i.e. data-id) with the corresponding id value and specify a data-target, which is a selector you specify, so that when clicked, bootstrap will select that element as modal dialog and show it. And then you need to add another attribute data-toggle=modal to make this a trigger for modal.

  <tr data-toggle="modal" data-id="1" data-target="#orderModal">             <td>1</td>             <td>24234234</td>             <td>A</td>   </tr>   <tr data-toggle="modal" data-id="2" data-target="#orderModal">             <td>2</td>             <td>24234234</td>             <td>A</td>         </tr>   <tr data-toggle="modal" data-id="3" data-target="#orderModal">             <td>3</td>             <td>24234234</td>             <td>A</td>   </tr> 

And now in the javascript just set up the modal just once and event listen to its events so you can do your work.

$(function(){     $('#orderModal').modal({         keyboard: true,         backdrop: "static",         show:false,      }).on('show', function(){ //subscribe to show method           var getIdFromRow = $(event.target).closest('tr').data('id'); //get the id from tr         //make your ajax call populate items or what even you need         $(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow  + '</b>'))     }); }); 

Demo

Do not use inline click attributes any more. Use event bindings instead with vanilla js or using jquery.

Alternative ways here:

Demo2 or Demo3

Answer 2

The solution from PSL will not work in Firefox. FF accepts event only as a formal parameter. So you have to find another way to identify the selected row. My solution is something like this:

... $('#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');  ...