web-dev-qa-db-fra.com

Comment puis-je afficher des données à l'aide d'un modal lorsque vous cliquez sur une ligne de tableau (à l'aide de bootstrap)

Je suis en quelque sorte un débutant dans le domaine du développement Web et, après de nombreuses recherches, je ne pouvais toujours pas le faire. Toute aide est fortement appréciée. J'utilise la dernière version Rails version et bootstrap) pour rendre les choses plus jolies.

J'ai une page avec une table qui contient les commandes d'un restaurant. Si vous cliquez sur une ligne, je souhaite qu’elle affiche les détails de la commande dans une fenêtre modale à l’aide de bootstrap. J'ai réussi à ouvrir le modal via la fonction onclick + javascript, mais ça a l'air un peu brouillon et je n'ai toujours aucune idée de la façon de charger le contenu div du modal avec les informations de commande. Voici le code que j'ai pour cela:

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"
    });
};
javascriptjqueryruby-on-railstwitter-bootstrap
33
lhoppe

Une chose que vous pouvez faire est de vous débarrasser de tous ces attributs onclick et de le faire correctement avec bootstrap. Vous n'avez pas besoin de les ouvrir manuellement. vous pouvez spécifier le déclencheur et même vous abonner à des événements avant l'ouverture du modal afin de pouvoir effectuer vos opérations et y renseigner des données.

Je vais simplement donner un exemple statique que vous pouvez adapter à votre monde réel.

Sur chacun de vos <tr> ajoute un attribut de données pour id (c.-à-d. data-id) avec la valeur id correspondante et spécifiez un data-target, qui est un sélecteur que vous spécifiez, de sorte que lorsque vous cliquez dessus, bootstrap sélectionnera cet élément comme boîte de dialogue modale et l'affichera. Ensuite, vous devrez ajouter un autre attribut data-toggle=modal pour en faire un déclencheur pour 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>

Et maintenant, dans le javascript, configurez le modal une seule fois et écoutez ses événements pour vous permettre de faire votre travail.

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

Démo

N'utilisez plus d'attributs de clic en ligne. Utilisez plutôt les liaisons d’événements avec Vanilla js ou jquery.

Manières alternatives ici:

Demo2 ou Demo

41
PSL

La solution de PSL ne fonctionnera pas dans Firefox. FF accepte l'événement uniquement en tant que paramètre formel. Vous devez donc trouver un autre moyen d'identifier la ligne sélectionnée. Ma solution ressemble à ceci:

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

...
9
Paul Manthey

La meilleure pratique consiste à charger ajax les informations de commande lorsque vous cliquez sur la balise tr et à restituer les informations html dans $ ('# orderDetails') comme ceci:

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

Vous pouvez également ajouter une classe pour chaque td contenant les informations de commande et utiliser la méthode jQuery $ ('. Class'). Html (html_string) pour insérer des informations de commande spécifiques dans vos #orderDetails AVANT d'afficher le modal, par exemple:

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

C'est ça. Mais je vous recommande fortement de vous renseigner sur l’ajax sur Rails. C'est plutôt cool et efficace.

3
Max Wong