Wie kann ich zeigen, Daten mit einem modalen beim Klicken auf eine Tabellenzeile (mit Bootstrap)

Question

Ich bin eine Art Anfänger auf die gesamte Web-Entwicklung, und nach der Erforschung viel ich konnte immer noch nicht getan werden. Jede Hilfe wird sehr geschätzt. Ich benutze die neueste Rails-Version und Bootstrap, um die Dinge schöner zu machen.

Ich habe eine Seite mit einer Tabelle, die Bestellungen von einem Restaurant enthält. Wenn Sie auf eine Zeile klicken, wird die Reihenfolge der Details in einem modalen Fenster mit dem Bootstrap angezeigt. Ich habe es geschafft, das Modal via onclick + javascript zu öffnen, aber es sieht irgendwie chaotisch aus und ich habe immer noch keine Ahnung, wie ich das Content div des Modals mit der Bestellinformation laden soll. Hier ist der Code, den ich für dieses:

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

Eine Sache, die Sie tun können, ist, all diese onclick Attribute loszuwerden und tun Sie es richtig mit Bootstrap. Sie müssen sie nicht manuell öffnen. Sie können den Trigger angeben und sogar Ereignisse abonnieren, bevor das Modal geöffnet wird, damit Sie Ihre Operationen ausführen und Daten darin auffüllen können.

Ich werde nur als ein statisches Beispiel zeigen, das Sie in Ihrer realen Welt unterbringen können.

Auf jeden Ihrer <tr> ‚s ein Datenattribut für id (dh data-id) mit dem entsprechenden ID-Wert hinzufügen und eine data-target angeben, unter der Sie einen Selektor angeben ist, so dass beim Anklicken Bootstrap dieses Element als modal wählen wird Dialog und zeige es. Und dann müssen Sie ein weiteres Attribut hinzufügen, um dies zu einem Auslöser für Modal zu machen.

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

Und jetzt in der Javascript nur die modalen nur einmal einrichten und Veranstaltung ihre Veranstaltungen hören, so dass Sie Ihre Arbeit tun können.

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

keine Inline-Klick-Attribute nicht mehr anwenden. Verwenden Sie stattdessen Ereignisbindungen mit vanilla js oder jquery.

Alternative Wege hier:

Demo2 oder Demo3

Answer 2

Die beste Vorgehensweise ist Ajax die Auftragsinformationen, wenn Klick tr-Tag laden, und machen die Informationen html in $ ('# Orderdetails') wie folgt aus:

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

Alternativ können Sie für jede Klasse td hinzufügen th bei enthält die Info-Bestellung, und jQuery Methode $ verwenden (‘Klasse.) html (html_string) bestimmte Reihenfolge Informationen in Ihre #orderDetails einzulegen, bevor Sie die Modal zeigen, wie:.

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

Das ist es. Aber ich empfehle dringend, dass Sie etwas über Ajax auf Rails lernen. Es ist ziemlich cool und effizient.

Answer 3

Die Lösung von PSL wird in Firefox nicht funktionieren. FF akzeptiert nur das Ereignis als formalen Parameter. Sie müssen also einen anderen Weg finden, um die ausgewählte Zeile zu identifizieren. Meine Lösung ist so etwas wie dieses:

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

...