Wie kann ich Daten mit einem Modal anzeigen, wenn ich auf eine Tabellenzeile klicke (mit Bootstrap)?

Lesezeit: 7 Minuten

Benutzer-Avatar
lhoppe

Ich bin eine Art Anfänger in der ganzen Webentwicklungssache und nach viel Recherche konnte ich das immer noch nicht hinbekommen. Jede Hilfe wird sehr geschätzt. Ich verwende 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, möchte ich, dass die Bestelldetails in einem modalen Fenster mit Bootstrap angezeigt werden. Ich habe es geschafft, das Modal über die Funktion onclick+javascript zu öffnen, aber es sieht irgendwie unordentlich aus und ich habe immer noch keine Ahnung, wie ich das Inhalts-Div des Modals mit den Bestellinformationen laden soll. Hier ist der Code, den ich dafür habe:

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

Benutzer-Avatar
PSL

Eine Sache, die Sie tun können, ist, all diese Onclick-Attribute loszuwerden und es mit Bootstrap richtig zu machen. 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 füllen können.

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

Auf jedem Ihrer <tr>‘s fügen ein Datenattribut für hinzu id (dh data-id) mit dem entsprechenden id-Wert und geben Sie a an data-target, das ist ein Selektor, den Sie angeben, sodass Bootstrap beim Klicken dieses Element als modales Dialogfeld auswählt und es anzeigt. Und dann müssen Sie ein weiteres Attribut hinzufügen data-toggle=modal um dies zu einem Trigger 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 richten Sie im Javascript das Modal nur einmal ein und hören sich seine Ereignisse an, damit Sie Ihre Arbeit erledigen 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

Verwenden Sie keine Inline-Klickattribute mehr. Verwenden Sie stattdessen Ereignisbindungen mit Vanilla js oder mit jquery.

Alternative Wege hier:

Demo2 oder Demo3

  • @PSL. Dies ist ein sehr hilfreiches Beispiel. Vielen Dank. Anstatt den Elternteil komplett auszugrauen. So ändern Sie die Farbe der Zeile oder fügen einer bestimmten Zelle eine Rahmenfarbe hinzu, die anzeigt, dass das Modal für die bestimmte Zelle aufgerufen wurde. Damit der Benutzer weiß, dass sich modal auf welche Zeile bezieht? Ich bin mir nicht sicher, ob dies bereits angesprochen wurde oder ein spezielles Q benötigt. Jede Hilfe ist willkommen. Vielen Dank

    – Benutzer5249203

    27. Juli 2016 um 18:04 Uhr

  • @PSL, muss keine bestimmte Zelle sein. Hervorheben der vollständigen Zeile in einer Weise, dass der Benutzer sich bewusst ist, dass er mit dem Modal der spezifischen Zeilendaten arbeitet. Lassen Sie mich wissen, wenn es ein separates Q SO sein muss. Ich kann daran arbeiten, eine zu erstellen. Vielen Dank

    – Benutzer5249203

    27. Juli 2016 um 18:12 Uhr

  • @PSL kann ich damit nach Daten in der Datenbank suchen? innerhalb von Modal?

    – Ingus

    25. April 2017 um 14:30 Uhr

Die Lösung von PSL funktioniert nicht in Firefox. FF akzeptiert event nur als formalen Parameter. Sie müssen also einen anderen Weg finden, um die ausgewählte Zeile zu identifizieren. Meine Lösung sieht ungefähr so ​​aus:

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

...

  • danke für den Hinweis, dass die Event-Show tatsächlich nicht ausgelöst wurde

    – unique_ptr

    22. August 2015 um 22:05 Uhr

  • Danke Paul, die Firefox-Lösung funktioniert auch für IE und Chrome. Ich würde vorschlagen, mit diesem Stück Code zu gehen.

    – Aritz

    12. November 2015 um 9:51 Uhr

Die beste Vorgehensweise besteht darin, die Bestellinformationen per Ajax zu laden, wenn Sie auf das tr-Tag klicken, und die Informationen im HTML-Format in $(‘#orderDetails’) wie folgt darzustellen:

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

Alternativ können Sie für jede td, die die Bestellinformationen enthält, eine Klasse hinzufügen und die jQuery-Methode $(‘.class’).html(html_string) verwenden, um bestimmte Bestellinformationen in Ihre #orderDetails einzufügen, BEVOR Sie das Modal anzeigen, 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 Ihnen dringend, etwas über Ajax auf Rails zu lernen. Es ist ziemlich cool und effizient.

  • Ich muss ein bisschen mehr recherchieren, um die Ajax-Anfrage zum Laufen zu bringen, aber ich verstehe die Idee. Vielen Dank!

    – lhoppe

    25. September 2013 um 5:36 Uhr

  • Ich kann einfach nicht herausfinden, wie man die Ajax-Anfrage macht. Ich habe versucht (basierend auf Ihrem 1. Beispiel), es in die Funktion “on show” zu setzen, aber es passiert nichts, und wenn ich versuche, es über die Browserkonsole auszuführen, erhalte ich “Konnte kein Restaurant mit id = get_order finden”, als würde es versuchen zu verwenden Teil der URL, um die @restaurant-Variable auf dem Controller festzulegen. Irgendwelche Gedanken?

    – lhoppe

    25. September 2013 um 23:50 Uhr

  • siehe diese Seite: guides.rubyonrails.org/working_with_javascript_in_rails.html

    – Max Wang

    26. September 2013 um 1:32 Uhr


1245680cookie-checkWie kann ich Daten mit einem Modal anzeigen, wenn ich auf eine Tabellenzeile klicke (mit Bootstrap)?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy