Как я могу отображать данные с помощью модальности при нажатии строки таблицы (используя загрузку)

Я как бы новичок на всей веб-разработке, и после много исследований я все еще не мог этого сделать. Любая помощь очень ценится. Я использую последнюю версию рельсов и бутстрап, чтобы сделать вещи красивее.

У меня есть страница со столом, которая содержит заказы из ресторана. Если вы нажмете на строку, я хочу, чтобы она отображала детали заказа в модальном окне с помощью бутстрапа. Мне удалось открыть модальную функцию onclick + javascript, но она выглядит немного грязной, и я до сих пор не знаю, как загрузить содержимое div модального с информацией о заказе. Вот код для этого:

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

Ответ 1

Одна вещь, которую вы можете сделать, это избавиться от всех атрибутов onclick и сделать это с помощью начальной загрузки. Вам не нужно открывать их вручную; вы можете указать триггер и даже подписаться на события до того, как модальный откроется, чтобы вы могли выполнять свои операции и заполнять данные в нем.

Я собираюсь показать как статический пример, который вы можете разместить в своем реальном мире.

В каждом из <tr> добавьте атрибут данных для id (т.е. data-id) с соответствующим значением id и укажите data-target, который является указанным вами селектором, так что при нажатии кнопки bootstrap выберите этот элемент как модальный диалог и покажите его. И тогда вам нужно добавить еще один атрибут data-toggle=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>

А теперь в javascript просто настройте модальный только один раз, и событие прослушивает его события, чтобы вы могли выполнять свою работу.

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

Демо

Не используйте атрибуты встроенного клика. Используйте привязки событий вместо vanilla js или используя jquery.

Альтернативные способы:

Demo2 или Demo3

Ответ 2

Решение от PSL не будет работать в Firefox. FF принимает событие только как формальный параметр. Поэтому вам нужно найти другой способ определить выбранную строку. Мое решение выглядит примерно так:

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

...

Ответ 3

Лучшая практика заключается в том, чтобы ajax загружать информацию о заказе при щелчке тэга tr и отображать информацию html в $('# orderDetails') следующим образом:

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

В качестве альтернативы вы можете добавить класс для каждого td, который содержит информацию о заказе, и использовать метод jQuery $('. class'). html (html_string), чтобы вставить определенную информацию о заказе в ваш #orderDetails до того, как вы покажете модальное значение, например:

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

Что это. Но я настоятельно рекомендую вам узнать о ajax на Rails. Это довольно круто и эффективно.