Cakephp 3 delete entry confirmation using bootstrap modal? - php

Question

I am trying to use a bootstrap modal to confirm delete operation. I am using Cakephp 3 and am new to it.
So far I am able to create this much.
If i can successfully replace with the id of the button that was clicked, Then the issue will be solved
UsersController.php
public function delete($id)
{
$this->request->allowMethod(['post', 'delete']);
$user= $this->Users->get($id);
if ($this->Users->delete($user)) {
$this->Flash->success(__('The user with id: {0} has been deleted.', h($id)));
return $this->redirect(['action' => 'index']);
}
}
index.ctp
<?= $this->Html->tag('i','',['class' => 'fa fa-times fa-fw icon-delete deleteUser', 'data-toggle' => 'modal', 'data-target' => '#confirmModal' , 'id' => $user->user_id ]) ?>
<!-- Modal -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">Are you sure?</div>
<div class="modal-footer">
<?= $this->Form->postLink(
$this->Html->tag('button','Delete',['class' => 'btn btn-default pull-right']),
['action' => 'delete', <id_here>],
['escape' => false])
?>
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">Cancel</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
The generated markup for the delete button part in the modal is
<form action="/boot/users/delete/ABCD20090004" name="post_56e141b0297cc915184088" style="display:none;" method="post"><input name="_method" value="POST"></form>
<a href="#" onclick="document.post_56e141b0297cc915184088.submit(); event.returnValue = false; return false;">
<button class="btn btn-default pull-right">Delete</button>
</a>

Answer 1

Try:
<?= $this->Form->postLink(
$this->Html->tag('button','Delete',['class' => 'btn btn-default pull-right']),
['action' => 'delete',array('id'=>$user->user_id)],
['escape' => false])
?>
Note: you will need a modal for each element in your list(loop)

Answer 2

Pass the user id of the record to be deleted on the delete button on the modal as opposed to the delete button you are clicking on to display the modal. Modify the index.ctp as follows
Do not pass the user id at this point
<?= $this->Html->tag('i','',['class' => 'fa fa-times fa-fw icon-delete deleteUser', 'data-toggle' => 'modal', 'data-target' => '#confirmModal']) ?>
Pass the id on the delete button below
<!-- Modal -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">Are you sure?</div>
<div class="modal-footer">
<?= $this->Form->postLink(__('Delete'), ['action' => 'delete', $user->id], ['class' => 'btn btn-default pull-right']); ?>
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">Cancel</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Also, do not forget to initialize the modal
<script>
$(document).ready(function () {
$('#confirmModal').modal('show');
});
</script>