Tôi có thể hiển thị dữ liệu bằng cách sử dụng phương thức khi nhấp vào hàng trong bảng (sử dụng bootstrap)

Question

Tôi là người mới bắt đầu trên toàn bộ điều phát triển web và sau khi nghiên cứu rất nhiều, tôi vẫn không thể thực hiện việc này. Bất kỳ giúp đỡ được rất nhiều đánh giá cao. Tôi đang sử dụng phiên bản đường ray mới nhất và bootstrap để làm cho mọi thứ đẹp hơn.

Tôi có một trang có bảng chứa các đơn đặt hàng từ nhà hàng. Nếu bạn nhấp vào một hàng tôi muốn nó hiển thị các chi tiết đơn đặt hàng trong một cửa sổ phương thức bằng cách sử dụng bootstrap. Tôi đã quản lý để mở các phương thức thông qua chức năng onclick + javascript nhưng có vẻ kinda lộn xộn và tôi vẫn không có đầu mối làm thế nào để tải div nội dung của phương thức với các thông tin đặt hàng. Dưới đây là đoạn code tôi có cho việc này:

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

Một điều bạn có thể làm là loại bỏ tất cả các thuộc tính onclick đó và thực hiện đúng cách với bootstrap. Bạn không cần mở chúng theo cách thủ công; bạn có thể chỉ định trình kích hoạt và thậm chí đăng ký các sự kiện trước khi phương thức mở để bạn có thể thực hiện các thao tác và điền dữ liệu vào đó.

Tôi sẽ chỉ hiển thị như một ví dụ tĩnh mà bạn có thể chứa trong thế giới thực của mình.

Trên mỗi <tr> của bạn 's thêm một thuộc tính dữ liệu cho id (tức data-id) với giá trị id tương ứng và chỉ định một data-target, đó là một chọn bạn chỉ định, để khi nhấn vào, bootstrap sẽ chọn yếu tố đó như modal và hiển thị nó. Và sau đó bạn cần phải thêm thuộc tính khác data-toggle=modal để kích hoạt chế độ này cho phương thức.

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

Và bây giờ trong javascript chỉ cần thiết lập phương thức một lần và sự kiện lắng nghe sự kiện để bạn có thể thực hiện công việc của mình.

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

Không sử dụng nhấp chuột inline thuộc tính nữa. Sử dụng sự kiện ràng buộc thay vì với vanilla js hoặc sử dụng jquery.

cách Alternative ở đây:

Demo2 hoặc Demo3

Answer 2

Cách tốt nhất là để ajax tải các thông tin đặt hàng khi nhấp chuột tr tag, và đưa ra html thông tin bằng $ ('# orderDetails') như sau:

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

Hoặc, bạn có thể thêm lớp cho mỗi thứ td tại có chứa các thông tin theo thứ tự, và sử dụng jQuery phương pháp $ (' lớp). html (html_string) để chèn thông tin thứ tự cụ thể vào #orderDetails bạn trước khi bạn hiển thị các phương thức, như:.

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

Vậy đó. Nhưng tôi khuyên bạn nên học sth về ajax trên Rails. Nó khá tuyệt và hiệu quả.

Answer 3

Các giải pháp từ PSL sẽ không làm việc trong Firefox. FF chỉ chấp nhận sự kiện như một tham số chính thức. Vì vậy, bạn phải tìm một cách khác để xác định hàng đã chọn. Giải pháp của tôi là một cái gì đó như thế này:

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

...