Question

我想在点击编辑链接时加载模态弹出窗口。但它需要新页面。我使用了e.preventDefault（）函数，但它无法正常工作。以下是我的代码。它带我去http://localhost/projectname/PanelAdmin/Products/edit/1。请帮我解决我的问题我是cakephp的新手。

View.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");
       });
    });
});

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

1 个答案: