Tablo satırını tıklatırken (önyükleme kullanarak) bir model kullanarak verileri nasıl gösterebilirim?

Question

Tüm web geliştirme konusunda yeni başlayan biriyim ve çok fazla araştırma yaptıktan sonra hala bunu yapamadım. Herhangi bir yardım çok takdir edilmektedir. En güzel raylar versiyonunu kullanıyorum ve daha güzel şeyler yapmak için bootstrap kullanıyorum.

Restorandan siparişleri içeren bir sayfam var. Bir satır tıklarsanız, önyükleme kullanarak bir modal pencerede sipariş ayrıntılarını göstermesini istiyorum. Modal'ı onclick + javascript işleviyle açmayı başardım ama biraz dağınık görünüyor ve modalın içerik div'inin sipariş bilgisiyle nasıl yükleneceğine dair bir fikrim yok.

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

Yapabileceğiniz tek şey, bu onclick özelliklerinden kurtulmak ve bunu bootstrap ile doğru şekilde yapmaktır. Onları elle açmak zorunda değilsiniz; Tetikleyiciyi belirtebilir ve modlar açılmadan önce etkinliklere abone olabilirsiniz, böylece işlemlerinizi gerçekleştirebilir ve veriyi bu dosyalara ekleyebilirsiniz.

Sadece gerçek dünyanızda barındırabileceğiniz statik bir örnek olarak göstereceğim. senin <tr> her günü

'ın karşılık gelen kimlik değeri ile (yani data-id) id için bir veri niteliği ekleyebilir ve tıklandığında önyükleme modal olarak o öğeyi seçmek, böylece belirttiğiniz bir seçici, bir data-target belirtmek iletişim ve göster. Ve bu, modal için bir tetikleyici yapmak için data-toggle=modal başka bir öznitelik eklemeniz gerekir.

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

Ve şimdi javascript sadece bir kez modal kurmak ve işinizi yapabilir böylece olay olaylarının dinleneceğini

.

Demo

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

satır içi tıklama artık niteliklerini kullanmayın. Bunun yerine vanilya js veya jquery kullanarak olay bağlamaları kullanın.Burada

alternatif yolları:

Demo2 veya Demo3

Answer 2

iyi uygulama sipariş bilgilerini tıklama tr etiketi yüklenmeden AJAX, ve bilgi html kılmaktır İşte ben bunun için var kod $ böyle ('# ORDERDETAILS') 'de: Alternatif

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

, her td inci için sınıf ekleyebilir adresindeki sipariş bilgisi içerir ve benzeri kalıcı göstermek ÖNCE #orderDetails içine belirli düzen bilgi eklemek için jQuery yöntemi $ (' sınıfı.) html (html_string) kullanın:

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

İşte bu kadar. Ama Rails hakkında ajax hakkında sth öğrenmenizi şiddetle tavsiye ederim. Oldukça havalı ve verimli.

Answer 3

PSL gelen çözüm Firefox'ta çalışmaz. FF olayı sadece resmi bir parametre olarak kabul eder. Bu yüzden seçilen satırı tanımlamanın başka bir yolunu bulmalısın. Benim çözüm böyle bir şey olur: İşe ajax isteği almak için biraz daha araştırma gerekecek

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

...