[FIXED] CakePHP 3.0 Confirm Delete Modal in Bake Template

Issue

I am trying to make a bake theme that integrates twitter bootstrap. And uses the bootstrap modal dialog to confirm deletion of data.

I am following this link here and also using CakePHP 3 Bootstrap Helpers.

I am creating the theme in my plugins/themename/src/Template/Bake/Template/index.ctp & view.ctp

Here is my code for the delete button in index.ctp

<?= $this->html->link(__($this->Html->faIcon('close').' Delete'),
['action' => '#'],
['escape' => false,
'class' => 'btn btn-sm btn-danger btn-confirm',
'data-toggle'=> 'modal',
'data-target' => '#ConfirmDelete',
'data-action'=> Router::url(['delete', <%= $pk %>]),
false]) ?>

Getting the error:

Error: Class 'Router' not found

when viewing the /bookmarks index page

I have use Cake\Routing\Router; at the top of my index.ctp

Then my view.ctp

<?= $this->Html->link(__($this->Html->faIcon('close')),
['action' => '#'],
['escape' => false,
'class' => 'btn btn-sm btn-danger btn-confirm',
'data-toggle'=> 'modal',
'data-target' => '#ConfirmDelete',
'data-action'=> ['/<%= $details['controller'] %>/delete/'.<%= $otherPk %>],
false]) %>

This seems to be working, but the resulting data-action is /Tags/delete/1 with a capital on the T - not sure if I will run into issues down the road?

Everything else is working, except for the Router::url in the index.ctp

Modal Code in plugins/themename/src/Template/Layout.default.ctp

<?php
$content = 'Are you sure you want to delete this element?';
echo $this->Modal->create(['id' => 'ConfirmDelete']) ;
echo $this->Modal->header('Confirm Delete', ['close' => false]) ;
echo $this->Modal->body($content, ['class' => 'my-body-class']) ;
echo $this->Modal->footer([
    $this->Form->button('Close', ['data-dismiss' => 'modal']),
    $this->Form->postLink(__('Delete'), ['action' => 'delete'],         
['class' => 'btn btn-danger'], false)]) ;
echo $this->Modal->end() ;
?>

jQuery code to change the postLink action in the modal

jQuery.noConflict();

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

Solution

This seems to work, unless this is not the true "CakePHP Way".

In index.ctp

Replacing Router::url() with $this->request->here

<?= $this->html->link(__($this->Html->faIcon('close')),
['action' => '#'],
['escape' => false,
'class' => 'btn btn-danger btn-confirm',
'data-toggle'=> 'modal',
'data-target' => '#ConfirmDelete',
'data-action'=> $this->request->here.'/delete/'.<%= $pk %>,
 false]) ?>

In view.ctp

Wrapping <%= $details['controller'] %> in strtolower()

<?= $this->Html->link(__($this->Html->faIcon('close')),
['action' => '#'],
['escape' => false,
'class' => 'btn btn-danger btn-confirm',
'data-toggle'=> 'modal',
'data-target' => '#ConfirmDelete',
'data-action'=> '/'.strtolower('<%= $details['controller'] %>').'/delete/'.<%= $otherPk %>,
false]) %>

Any input from more advanced Cake users?

Answered By - stillfire