Php Laravel动态数据以引导模式填充

我的引导模式已放置在仪表板中。按钮将填充我在另一个页面中放置的模式，并在其中扩展仪表板。 当我点击不同的产品id按钮时，与产品相关的信息会出现在模式中。我的问题是如何让它充满活力。意味着引导模式将基于我为快速查看而单击的产品进行填充

**button for quick view in index.blade.php :**

<div class="btn-quickview"> 
    <a href="#" data-toggle="modal" data-target="#modal-quickview">
        <i class="fa fa-search-plus" aria-hidden="true">
        </i> Quick View
    </a> 
</div>

  **Modal placed in dashboard.blade.php**

<div id="modal-quickview" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <div class="modal-body">
        <button type="button" class="close myclose" data-dismiss="modal">×</button>
        <div class="product-view-area">         
          <div class="col-xs-12 col-sm-7 col-lg-7 col-md-7 product-details-area">
            <div class="product-name">
              <h2>Lorem Ipsum is simply</h2>
            </div>
            <div class="price-box">
              <p class="special-price"> <span class="price-label">Special Price</span> <span class="price"> $329.99 </span> </p>
              <p class="old-price"> <span class="price-label">Regular Price:</span> <span class="price"> $359.99 </span> </p>
            </div>

          </div>
        </div>
      </div>
      <div class="modal-footer"> <a href="#" class="btn-services-shop-now" data-dismiss="modal">Close</a> </div>
    </div>
  </div>
</div>

**用于在index.blade.php中快速查看的按钮：**
**模态放置在dashboard.blade.php中**
×
Lorem Ipsum只是
特价$329.99
常规价格：359.99美元

您可以在锚定中添加所需的数据值，并将值附加到模式弹出窗口中。您可以这样实现：

<a href="#" data-title="Lorem Ipsum is simply" data-old-price="$359.99" data-special-price="$329.99" data-toggle="modal" data-target="#modal-quickview">
<i class="fa fa-search-plus" aria-hidden="true">
    </i> Quick View
</a>

<script>
    $(function(){
        $('.btn-quickview').on('click','a',function(ev){
            $('.product-name').find('h2').html($(this).attr('data-title'))
            $('.special-price').find('.price').html($(this).attr('data-special-price'))
            $('.old-price').find('.price').html($(this).attr('data-old-price'))
        })
    })

</script>

$（函数（）{
$（'.btn quickview'）。在（'click'，'a'，函数（ev）上{
$（'.product name'）.find（'h2'）.html（$（this.attr（'data-title'））
$（'.price'）.find（'.price'）.html（$（this.attr（'data-special-price'））
$（'.old-price'）.find（'.price'）.html（$（this.attr（'data-old-price'））
})
})

---

如果不想将数据属性附加到锚点，可以通过Ajax获取数据并适当设置值；）

您可以通过jQuery ajax加载引导模式的内容

<div id="view-modal" class="modal fade"  
    tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel" 
    aria-hidden="true" style="display: none;">
     <div class="modal-dialog"> 
          <div class="modal-content"> 

               <div class="modal-header"> 
                    <button type="button" class="close" 
                        data-dismiss="modal" 
                        aria-hidden="true">
                        ×
                     </button> 
                    <h4 class="modal-title">
                        <i class="glyphicon glyphicon-user"></i> User Profile
                    </h4> 
               </div> 
               <div class="modal-body"> 

                   <div id="modal-loader" 
                        style="display: none; text-align: center;">
                    <img src="ajax-loader.gif">
                   </div>

                   <!-- content will be load here -->                          
                   <div id="dynamic-content"></div>

                </div> 
                <div class="modal-footer"> 
                      <button type="button" 
                          class="btn btn-default" 
                          data-dismiss="modal">
                          Close
                      </button>  
                </div> 

         </div> 
      </div>
</div><!-- /.modal -->   

<button data-toggle="modal" data-target="#view-modal" 
    id="getUser" class="btn btn-sm btn-info"
    data-url="{{ route('dynamicModal',['id'=>$id])}}"
    >
        Submit
</button>

<script>
$(document).ready(function(){

    $(document).on('click', '#getUser', function(e){

        e.preventDefault();

        var url = $(this).data('url');

        $('#dynamic-content').html(''); // leave it blank before ajax call
        $('#modal-loader').show();      // load ajax loader

        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'html'
        })
        .done(function(data){
            console.log(data);  
            $('#dynamic-content').html('');    
            $('#dynamic-content').html(data); // load response 
            $('#modal-loader').hide();        // hide ajax loader   
        })
        .fail(function(){
            $('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
            $('#modal-loader').hide();
        });

    });

});

</script>

在控制器中

public function loadModal($id)
{
    // write your process if any
    return view('view_having_model_body',['data'=>$ifAnyData]);
}

---

另一种动态执行此操作的方法是，将产品id添加到数据目标，如

<a href="#"
  data-title="Lorem Ipsum is simply"
  data-old-price="$359.99"
  data-special-price="$329.99"
  data-toggle="modal"
  data-target="#modal-quickview{{$product->id}}"
>

对模态体id执行相同的操作，如

<div id="modal-quickview{{$product->id}}"
  class="modal fade"  
  tabindex="-1"
  role="dialog" 
  aria-labelledby="myModalLabel" 
  aria-hidden="true"
  style="display: none;"
>
  <div class="modal-dialog"> 
    <div class="modal-content"> 
      <div class="modal-header">

在这种情况下，laravel为每个模态生成一个唯一的id。在模态体中，您只需根据其id显示产品

<div id="modal-quickview{{$product->id}}"
  class="modal fade"  
  tabindex="-1"
  role="dialog" 
  aria-labelledby="myModalLabel" 
  aria-hidden="true"
  style="display: none;"
>
  <div class="modal-dialog"> 
    <div class="modal-content"> 
      <div class="modal-header">