Laravel 动态数据填充在引导模式中

Question

我的引导模式已放置在仪表板中。我将填充模式的按钮放置在另一个页面中，并在那里扩展了仪表板。\n当我点击不同的产品 ID 按钮时，产品相关信息应该以模式出现。我的问题是如何使其动态。意味着引导模式将根据我单击以快速查看的产品进行填充。

\n\n

**button for quick view in index.blade.php :**\n\n<div class="btn-quickview"> \n    <a href="#" data-toggle="modal" data-target="#modal-quickview">\n        <i class="fa fa-search-plus" aria-hidden="true">\n        </i> Quick View\n    </a> \n</div>\n\n  **Modal placed in dashboard.blade.php**\n\n<div id="modal-quickview" class="modal fade" role="dialog">\n    <div class="modal-dialog">\n      <div class="modal-body">\n        <button type="button" class="close myclose" data-dismiss="modal">\xc3\x97</button>\n        <div class="product-view-area">         \n          <div class="col-xs-12 col-sm-7 col-lg-7 col-md-7 product-details-area">\n            <div class="product-name">\n              <h2>Lorem Ipsum is simply</h2>\n            </div>\n            <div class="price-box">\n              <p class="special-price"> <span class="price-label">Special Price</span> <span class="price"> $329.99 </span> </p>\n              <p class="old-price"> <span class="price-label">Regular Price:</span> <span class="price"> $359.99 </span> </p>\n            </div>\n\n          </div>\n        </div>\n      </div>\n      <div class="modal-footer"> <a href="#" class="btn-services-shop-now" data-dismiss="modal">Close</a> </div>\n    </div>\n  </div>\n</div>\n

\n

Answer 1

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

\n\n

<div id="view-modal" class="modal fade"  \n    tabindex="-1" role="dialog" \n    aria-labelledby="myModalLabel" \n    aria-hidden="true" style="display: none;">\n     <div class="modal-dialog"> \n          <div class="modal-content"> \n\n               <div class="modal-header"> \n                    <button type="button" class="close" \n                        data-dismiss="modal" \n                        aria-hidden="true">\n                        \xc3\x97\n                     </button> \n                    <h4 class="modal-title">\n                        <i class="glyphicon glyphicon-user"></i> User Profile\n                    </h4> \n               </div> \n               <div class="modal-body"> \n\n                   <div id="modal-loader" \n                        style="display: none; text-align: center;">\n                    <img src="ajax-loader.gif">\n                   </div>\n\n                   <!-- content will be load here -->                          \n                   <div id="dynamic-content"></div>\n\n                </div> \n                <div class="modal-footer"> \n                      <button type="button" \n                          class="btn btn-default" \n                          data-dismiss="modal">\n                          Close\n                      </button>  \n                </div> \n\n         </div> \n      </div>\n</div><!-- /.modal -->   \n\n<button data-toggle="modal" data-target="#view-modal" \n    id="getUser" class="btn btn-sm btn-info"\n    data-url="{{ route(\'dynamicModal\',[\'id\'=>$id])}}"\n    >\n        Submit\n</button>\n\n<script>\n$(document).ready(function(){\n\n    $(document).on(\'click\', \'#getUser\', function(e){\n\n        e.preventDefault();\n\n        var url = $(this).data(\'url\');\n\n        $(\'#dynamic-content\').html(\'\'); // leave it blank before ajax call\n        $(\'#modal-loader\').show();      // load ajax loader\n\n        $.ajax({\n            url: url,\n            type: \'GET\',\n            dataType: \'html\'\n        })\n        .done(function(data){\n            console.log(data);  \n            $(\'#dynamic-content\').html(\'\');    \n            $(\'#dynamic-content\').html(data); // load response \n            $(\'#modal-loader\').hide();        // hide ajax loader   \n        })\n        .fail(function(){\n            $(\'#dynamic-content\').html(\'<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...\');\n            $(\'#modal-loader\').hide();\n        });\n\n    });\n\n});\n\n</script>\n

\n\n

在路线文件中

\n\n

Route::get(\'dynamicModal/{id}\',[\n    \'as\'=>\'dynamicModal\',\n    \'uses\'=> \'ControllerName@loadModal\'\n]);\n

\n\n

在控制器中

\n\n

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

\n

Answer 2

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

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

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