Javascript 引导3在cakephp中确认删除模式

您好，我有一个记录表，其中每一行都有一个删除链接。您可以找到用于删除操作的cakephp：

public function delete($id){

        if ($this->request->is('get')) {
            throw new MethodNotAllowedException();
        }

        if ($this->Category->delete($id)) {
            $this->Session->setFlash( 'Votre élément a été supprimé.','default',array(),'success');
            return $this->redirect(array('action' => 'index'));
        }

    }

因此，当我单击delete按钮时，会显示一个原始javascript确认对话框，以确认视图中的删除操作。以下是包含删除链接的index.ctp：

<!--table content-->
  <table class="table table-striped table-condensed table-bordered">
    <tr>
        <th>title</th>
        <th>Actions</th>
    </tr>

    <?php foreach ($categorys as $category): ?>
    <tr>
        <td><?php echo $category['Category']['title']; ?></td>
        <td>
            <?php
            echo $this->Html->link('View',
                                   array('controller' => 'categories', 'action' => 'view', $category['Category']['id']),
                                   array('class' => 'btn btn-info btn-sm active')
                                   ); ?>
            <?php
            echo $this->Html->link(
                'Edit', array('action' => 'edit', $category['Category']['id']),
                          array('class' => 'btn btn-primary btn-sm active')
            );
            ?>
            <?php
            echo $this->Form->postLink(
                'Delete',
                array('action' => 'delete', $category['Category']['id']),
                array('confirm' => 'Do you want really to delete thi element?','class' => 'btn btn-danger btn-sm active')
            );
            ?>
        </td>
    </tr>
    <?php endforeach; ?>
    <?php unset($category); ?>
  </table>

标题
行动

因此，对于我想要的postlink，当我单击链接时，它将显示一个引导确认模式，如下所示：

 <!-- Modal -->
    <div class="modal fade" id="ConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <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" id="myModalLabel">Category deletion</h4>
                </div>
                <div class="modal-body">
                    Do you  really want  to delete thi element?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <a  class="btn btn-danger danger">Confirm</a>
                </div>
            </div>
        </div>
    </div>

&时代；
类别删除
是否确实要删除该元素？
接近
证实

有人能帮我使用cake php的jshelper来创建一个引导模式对话框，而不是默认的对话框吗

---

谢谢。

我编辑我的答案并改进代码

$('#ConfirmDelete').on('show.bs.modal', function(e) {
    $(this).find('form').attr('action', $(e.relatedTarget).data('action'));
});

在您的索引页上，而不是postLink，创建一个按钮或链接来调用模态，即

<?php 
echo $this->Html->link(
    $this->Html->tag('i', '', array('class' => 'glyphicon glyphicon-trash')), 
    '#', 
    array(
       'class'=>'btn btn-danger btn-confirm',
       'data-toggle'=> 'modal',
       'data-target' => '#ConfirmDelete',
       'data-action'=> Router::url(
          array('action'=>'delete',$category['Category']['id'])
       ),
       'escape' => false), 
false);
?>

或根据用户1655410的建议添加此js代码

$('#ConfirmDelete').on('show.bs.modal', function(e) {
    $(this).find('form').attr('action', $(e.relatedTarget).data('action'));
});

AJAX（这更灵活，但下面还有另一个简单的解决方案）： 更新类别列表的视图：将delete postlink更改为：//此按钮将触发ajax调用、添加ajx div和脚本

   <table class="table table-striped table-condensed table-bordered">
   <tr>
    <th>title</th>
    <th>Actions</th>
</tr>

    <?php foreach ($categorys as $category): ?>
<tr>
    <td><?php echo $category['Category']['title']; ?></td>
    <td>
        <?php
        echo $this->Html->link('View',
                               array('controller' => 'categories', 'action' => 'view', $category['Category']['id']),
                               array('class' => 'btn btn-info btn-sm active')
                               ); ?>
        <?php
        echo $this->Html->link(
            'Edit', array('action' => 'edit', $category['Category']['id']),
                      array('class' => 'btn btn-primary btn-sm active')
        );
        ?>
        <?php
          echo $this->Html->link(
          'Delete',
          "#",
           array("class"=>"btn btn-danger delete-btn", "data-id"=>$category['Category']['id'])
           );
         ?>
    </td>
</tr>
<?php endforeach; ?>
<?php unset($category); ?>
 </table>

  //add this div
    <div id="ajax_modal"></div>

  //add this script
    <script type="text/javascript">
        $(".delete-btn").click(function(){
        $.ajax({
        type: "POST",
        data:{
           category_id:$(this).attr("data-id"),
        },
        url: "<?php echo $this->base;?>/categories/ajax_show_delete_modal", //ajax function
        success:function(data) {
           $("#ajax_modal").html(data);
        }
    }); 
   });
   </script>

添加到应用程序/视图/类别/：ajax\u show\u delete\u modal.ctp

 <div class="modal fade" id="ConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <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" id="myModalLabel">Category deletion</h4>
            </div>
            <div class="modal-body">
                Do you  really want  to delete this element?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <a  href="<?php echo $this->base.'/categories/delete/'.$category_id;?>" class="btn btn-danger danger">Confirm</a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $("#trigger").click();
</script>

&时代；
类别删除
是否确实要删除此元素？
接近
$（“#触发器”）。单击（）；

另一个简单的解决方案：

  <table class="table table-striped table-condensed table-bordered">
<tr>
    <th>title</th>
    <th>Actions</th>
</tr>

<?php foreach ($categorys as $category): ?>
<tr>
    <td><?php echo $category['Category']['title']; ?></td>
    <td>
        <?php
        echo $this->Html->link('View',
                               array('controller' => 'categories', 'action' => 'view', $category['Category']['id']),
                               array('class' => 'btn btn-info btn-sm active')
                               ); ?>
        <?php
        echo $this->Html->link(
            'Edit', array('action' => 'edit', $category['Category']['id']),
                      array('class' => 'btn btn-primary btn-sm active')
        );
        ?>
          <?php
         echo $this->Html->link(
       'Delete',
        "#",
        array("class"=>"btn btn-danger delete-btn", "data-id"=>$category['Category']['id']) //$category['Category']['id'])
        );
       ?>
    </td>
</tr>
   <?php endforeach; ?>
      <?php unset($category); ?>
  </table>

     <a data-target="#ConfirmDelete" role="button" data-toggle="modal" id="trigger"></a>
     <div class="modal fade" id="ConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
          <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" id="myModalLabel">Category deletion</h4>
              </div>
              <div class="modal-body">
                  Do you  really want  to delete this element?
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <div id="ajax_button"></div>
              </div>
          </div>
      </div>
  </div>
  <script type="text/javascript">
      $(".delete-btn").click(function(){
       $("#ajax_button").html("<a href='<?php echo $this->base;?>/categories/delete/"+ $(this).attr("data-id")+";?>' class='btn btn-danger'>Confirm</a>");
      $("#trigger").click();  
 });

标题
行动
你使用的是什么版本的引导程序？它是引导程序3吗？在循环中添加模态是不好的。如果有100个类别呢？将创建100个模态。最好使用ajax。@Salines您发送给我的javascript代码不起作用，它给出了错误/cateograies/delete不存在，因为它不更新post表单的操作，所以我使用了这段代码，它对我来说很好：$（'ConfirmDelete'）。on（'show.bs.modal'，function（e）{$（this）。find（'form'）.attr（'action'，$（e.relatedTarget）。data（'action'）；}）；您应该更新您的帖子，将其作为解决方案。我的javascript代码工作正常，在加载jquery和bootstrap js文件后放置此代码。这是简短的屏幕广播。请确保在第一个代码示例中添加btn确认类。-我也将您的代码作为我的答案的解决方案。是的，很抱歉，我忘记了btn确认类，因此您的解决方案也可以工作。
 <div class="modal fade" id="ConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <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" id="myModalLabel">Category deletion</h4>
            </div>
            <div class="modal-body">
                Do you  really want  to delete this element?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <a  href="<?php echo $this->base.'/categories/delete/'.$category_id;?>" class="btn btn-danger danger">Confirm</a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $("#trigger").click();
</script>

  <table class="table table-striped table-condensed table-bordered">
<tr>
    <th>title</th>
    <th>Actions</th>
</tr>

<?php foreach ($categorys as $category): ?>
<tr>
    <td><?php echo $category['Category']['title']; ?></td>
    <td>
        <?php
        echo $this->Html->link('View',
                               array('controller' => 'categories', 'action' => 'view', $category['Category']['id']),
                               array('class' => 'btn btn-info btn-sm active')
                               ); ?>
        <?php
        echo $this->Html->link(
            'Edit', array('action' => 'edit', $category['Category']['id']),
                      array('class' => 'btn btn-primary btn-sm active')
        );
        ?>
          <?php
         echo $this->Html->link(
       'Delete',
        "#",
        array("class"=>"btn btn-danger delete-btn", "data-id"=>$category['Category']['id']) //$category['Category']['id'])
        );
       ?>
    </td>
</tr>
   <?php endforeach; ?>
      <?php unset($category); ?>
  </table>

     <a data-target="#ConfirmDelete" role="button" data-toggle="modal" id="trigger"></a>
     <div class="modal fade" id="ConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
          <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" id="myModalLabel">Category deletion</h4>
              </div>
              <div class="modal-body">
                  Do you  really want  to delete this element?
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <div id="ajax_button"></div>
              </div>
          </div>
      </div>
  </div>
  <script type="text/javascript">
      $(".delete-btn").click(function(){
       $("#ajax_button").html("<a href='<?php echo $this->base;?>/categories/delete/"+ $(this).attr("data-id")+";?>' class='btn btn-danger'>Confirm</a>");
      $("#trigger").click();  
 });