bootstrap 3 подтвердить удаление модального в cakephp

Привет, у меня есть таблица записей, где есть ссылка на удаление для каждой строки. Если вы найдете cakephp для действия delete:

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')); } }

поэтому, когда я нажимаю кнопку удаления, необработанное диалоговое окно подтверждения javascript diplayed, чтобы подтвердить действие удаления в представлении. вот index.ctp, содержащий ссылку delete:

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

может кто-то помочь мне использовать jshelper для php торта для создания модального диалога bootstrap вместо стандартного.

Спасибо.

Я редактирую свой ответ и улучшаю код

На вашей индексной странице вместо 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); ?>

В вашем модуле добавьте postLink без подтверждающего сообщения, вместо сообщения поставьте false:

 <?php echo $this->Form->postLink( 'Confirm', array('action' => 'delete'), array('class' => 'btn btn-danger btn-sm active'), false, ) ); ?>

добавьте этот js-код после загрузки bootstrap.js

 $(document).ready(function() { $(".btn-confirm").on("click", function () { var action = $(this).attr('data-action'); $("form").attr('action',action); }); });

или, как было предложено пользователем1655410, добавьте этот код js

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

AJAX (это более гибко, но есть еще одно простое решение ниже): обновите свое представление для списка категорий: измените свою ссылку на удаление: // эта кнопка вызовет вызов 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>

В ваших категориях Контроллер добавляет эту функцию:

  public function ajax_show_delete_modal(){ $category_id = isset($_POST['category_id']) ? $_POST['category_id'] : 0; $this->set("category_id", $category_id); $this->layout = "ajax"; }

Добавить в ваше приложение / Просмотров / Категории /: ajax_show_delete_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(); });