web-dev-qa-db-ja.com

テーブル行をクリックするときにモーダルを使用してデータを表示するにはどうすればよいですか（ブートストラップを使用）

私はWeb開発全体の初心者です。多くのことを研究した後、私はまだこれを成し遂げることができませんでした。どんな助けも大歓迎です。最新のRailsバージョンとbootstrapを使用して、物事をきれいにしています。

レストランからの注文を含むテーブルのあるページがあります。行をクリックすると、ブートストラップを使用してモーダルウィンドウに注文の詳細を表示します。私は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"
    });
};
javascriptjqueryruby-on-railstwitter-bootstrap
33
lhoppe

できることの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またはDemo

41
PSL

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');

...
9
Paul Manthey

ベストプラクティスは、trタグをクリックすると注文情報を読み込み、次のように$（ '＃orderDetails'）の情報htmlをレンダリングすることです。

  $.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 on Railsについて学ぶことを強くお勧めします。とてもクールで効率的です。

3
Max Wong