Come posso mostrare i dati usando una modale quando si fa clic su una riga di tabella (usando bootstrap)

Question

Sono una specie di principiante sull'intero sviluppo del web e dopo aver fatto ricerche su molti non riuscivo ancora a farlo. Qualsiasi aiuto è molto apprezzato. Sto usando la versione più recente di rails e bootstrap per rendere le cose più belle.

Ho una pagina con un tavolo che contiene gli ordini di un ristorante. Se fai clic su una riga, voglio che mostri i dettagli dell'ordine in una finestra modale usando bootstrap. Sono riuscito ad aprire il modal tramite la funzione onclick + javascript ma sembra un po 'disordinato e non ho ancora idea di come caricare il contenuto div del modal con le informazioni sull'ordine. Ecco il codice che ho per questo:

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

Una cosa che puoi fare è eliminare tutti quegli attributi onclick e farlo nel modo giusto con bootstrap. Non è necessario aprirli manualmente; è possibile specificare il trigger e persino iscriversi agli eventi prima dell'apertura della modal in modo da poter eseguire le operazioni e popolare i dati al suo interno.

Mostrerò solo un esempio statico che puoi inserire nel tuo mondo reale.

su ciascun <tr> 's aggiungere un attributo di dati per id (cioè data-id) con il valore id corrispondente e specificare un data-target, che è un selettore si specifica, in modo che quando si fa clic, bootstrap selezionerà l'elemento come modale dialogo e mostralo. E quindi è necessario aggiungere un altro attributo data-toggle=modal per rendere questo un trigger per modale.

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

E ora in javascript appena istituito il modal solo una volta ed evento intercettare i relativi eventi in modo da poter fare il vostro lavoro.

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

Non utilizzare in linea fare clic su Attributi più. Usa invece i binding di eventi con vanilla js o jquery.

modi alternativi qui:

Demo2 o Demo3

Answer 2

La pratica migliore è all'Ajax caricare le informazioni ordine quando tag click TR, e rendere il codice html informazioni in $ ('# OrderDetails') come questo:

$.get('the_get_order_info_url', { order_id: the_id_var }, function(data){ 
    $('#orderDetails').html(data); 
    }, 'script') 

in alternativa, è possibile aggiungere classe per ogni td ° all'indirizzo contiene le informazioni ordine, e utilizzare il metodo jQuery $ (' class.) html (html_string) per inserire specifiche informazioni ordine nelle vostre #orderDetails prima di mostrare il modal, come:.

<% @restaurant.orders.each do |order| %> 
    <!-- you should add more class and id attr to help control the DOM --> 
    <tr id="order_<%= order.id %>" onclick="orderModal(<%= order.id %>);"> 
    <td class="order_id"><%= order.id %></td> 
    <td class="customer_id"><%= order.customer_id %></td> 
    <td class="status"><%= order.status %></td> 
    </tr> 
    <% end %> 

js:

function orderModal(order_id){ 
    var tr = $('#order_' + order_id); 
    // get the current info in html table 
    var customer_id = tr.find('.customer_id'); 
    var status = tr.find('.status'); 

    // U should work on lines here: 
    var info_to_insert = "order: " + order_id + ", customer: " + customer_id + " and status : " + status + "."; 
    $('#orderDetails').html(info_to_insert); 

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

Questo è tutto. Ma ti consiglio vivamente di imparare sth su ajax su Rails. È abbastanza bello ed efficiente.

Answer 3

La soluzione da PSL non funziona in Firefox. FF accetta eventi solo come parametro formale. Quindi devi trovare un altro modo per identificare la riga selezionata. La mia soluzione è qualcosa di simile:

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

...