ボタンを使用して在庫アイテムの詳細を含むページを開く

Question

私の意図は、リンクを使って商品をインデックスページに表示することです。リンクがクリックされると、その製品の詳細を示す「モーダル」ページが表示されます。

商品ページにリンクするボタンがありますが、インデックスページの他のアイテムはリンクされていません。

このリンクを使用して各製品ページを開く方法を教えてください。

ボタンのコード：

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#details-1">Details</button> 

モーダル：

<?php 
include 'details-modal-item01.php'; 
include 'details-modal-item02.php'; 
?> 

ページ詳細モーダル-item01.phpは、多かれ少なかれ他の項目のためのテンプレート：

<div id="item01" class="modal fade item01" tableindex="-1" role="dialog" aria-labelledby="details-1" aria-hidden="true"> -- rest of code goes here --</div> 

ご協力いただければ幸いです。

Answer 1

多くの製品を入手した後は管理できなくなるすべてのインクルードジャズの代わりに、jsonからモーダルコンテンツセクションにコンテンツ/パーシャルまたはビルドをロードするためにajaxを使用する必要があります。

わかりやすく言ったので、ここに例があります。

---

これは私がajaxとpartialsを使用してどのように行うのかです。

リンクの場合は、data-url=""属性を部分的なものにする必要があります。

<a href="javascript:void(0)" class="ajax-modal" data-url="/link/to/partial" data-size="modal-md" role="button" data-toggle="modal"><i class="fa fa-plus fa-fw"></i> Open Modal</a> 

モーダルラッパー。これは、</body>の前にテンプレートの一番下に配置されます。

<div id="ajax-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title">Loading...</h4> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="Close">×</button> 
      </div> 
      <div class="modal-body slow-warning"><p>Please wait...</p></div> 
     </div> 
    </div> 
</div> 

部分、リンクから提供されるだろうエンドポイントは、要求がAJAXでチェックし、部分的に、その代わりに、ページ全体を表示しない場合を示すことができました。

<div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title">Foo Bar</h4> 
    </div> 
    <div class="modal-body"></div> 
</div> 

そしてモーダルにコンテンツをロードする処理jqueryの、。

<script> 
    var ajax_modal = function(e) { 
     e.preventDefault(); 

     $('#ajax-modal').modal('show'); 

     var modal = '.modal-content'; 

     var default_content = '' + 
      '<div class="modal-header">' + 
      ' <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>' + 
      ' <h4 class="modal-title">' + 
      '  Loading...' + 
      ' </h4>' + 
      '</div>' + 
      '<div class="modal-body">' + 
      ' <p class="slow-warning">Please wait...</p>' + 
      '</div>'; 

     $(modal).html(default_content); 

     setTimeout(function() { 
      if ($(document).find('.slow-warning').length > 0) { 
       $(document).find('.slow-warning').html('Content failed to load, please refresh your browser and try again.'); 
      } 
     }, 5000); 

     // 
     var dialog_size = $(this).data('size'); 

     if (dialog_size == 'modal-lg') { 
      $(modal).parent().removeClass('modal-sm modal-md modal-lg').addClass('modal-lg'); 
     } 
     else if (dialog_size == 'modal-sm') { 
      $(modal).parent().removeClass('modal-sm modal-md modal-lg').addClass('modal-sm'); 
     } 
     else { 
      $(modal).parent().removeClass('modal-sm modal-md modal-lg').addClass('modal-md'); 
     } 

     // 
     var request = $.ajax({ 
      url: $(this).data('url'), 
      method: "GET", 
      dataType: "html", 
      cache: false 
     }); 

     request.done(function(data) { 
      $(modal).replaceWith($('<div />').html(data).find(modal)[0]); 
     }); 

     request.fail(function(jqXHR, textStatus) { 
      console.log('modal failed to load', textStatus); 
     }); 
    }; 

    $(document).find('.ajax-modal').off('click').on('click', ajax_modal); 
</script>