无法在 cakephp 3 中加载模式弹出窗口

Question

我想在单击编辑链接时加载模式弹出窗口。但它需要到新的页面。我使用了 e.preventDefault() 函数，但它不起作用。下面是我的代码。 它带我去http://localhost/projectname/PanelAdmin/Products/edit/1。请帮助解决我的问题，我是 cakephp 新手。

查看.ctp

<li>
          <?php              
          echo $this->Html->link("Edit Profucts","/PanelAdmin/Products/edit/".$prod->product_id, array('update' => '#flexModal','htmlAttributes' => array('data-toggle' => 'modal','data-target' => '#flexModal')));
              ?>
    </li> 

<script>
$(document).ready(function() {
    $("a[data-target=#flexModal]").click(function(ev) {
        ev.preventDefault();
        $("#flexModal .modal-body").load(target, function() {
            $("#flexModal").modal("show");
        });
    });
});
</script>

查看：edit.ctp

<div class="modal" data-target="#flexModal" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-title" id="myModalLabel"></h3>
            </div>
            <div class="modal-body">

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

ProductsController.php

public function edit()
{
    $this->render('edit', 'ajax');
}

Answer 1

您应该使用' 包装您的属性值，同时选择您的链接元素它应该是$("a[data-target='#flexModal']") 而不是这个$("a[data-target=#flexModal]")。

所以最终的js代码现在是这样的

$(document).ready(function() {
   $("a[data-target='#flexModal']").click(function(ev) {
       ev.preventDefault();
       $("#flexModal .modal-body").load(target, function() {
          $("#flexModal").modal("show");
       });
    });
});