How to integrate sweetalert2 with cakephp form

user_10903616 0
Viewed 27

I am very new to cakephp framework and i am trying to use sweetalert confirmation instead of normal javascript confirm method. But i have no clue how to integrate this with cakephp form.

 $this->Form->postLink(
                __('Withdraw'),
                ['action' => 'request'],
                ['confirm' => __('Are you sure?'), 'class' => 'btn btn-outline-dark mb-0 ms-auto']
            );

The above confirm element creates below code where form name is created on random by cakephp.

enter image description here

I want to replace confirm method with sweetalert confirmation which is provided below

Swal.fire({  
  title: 'Are you sure?',  
  showCancelButton: true,  
  confirmButtonText: `Yes`,  
  denyButtonText: `No`,
}).then((result) => {   
    if (result.isConfirmed) {    
        //Proceeds to submit form
    } else if (result.isDenied) {    
        //Just closing the confirmation  
    }
});
    }

cakephp version: 3.10.1

sweetalert2 sweetalert cakephp php javascript
1 Answers

You could overwrite the confirmJs form helper template to use custom JS.

For FormHelper::postLink() calls the template will, among others, receive the template variables confirmMessage, which is a JSON string with the confirm message, and formName, which is a literal string holding the form name. For FormHelper::button() calls there will be no formName, so you'd need to take that into account if you want to support that usage too!

While you could put the whole sweet alert code in the confirmJs template, I'm not sure that all browsers do finally support linebreaks in HTML attributes, so to be on the safe side you may want to use a helper function (it's also more readable).

For example:

<script>
    function swalConfirm(buttonOrLink, message, formName) {
        Swal.fire({
            title: message,
            showCancelButton: true,
            confirmButtonText: `Yes`,
            denyButtonText: `No`,
        }).then((result) => {
            if (result.isConfirmed) {
                //Proceeds to submit form
                if (formName) {
                    // it's a `postLink` form
                    document[formName].submit();
                } else if (buttonOrLink.form) {
                    // it's a regular form
                    buttonOrLink.form.submit();
                } else {
                    // it's something that shouldn't exist,
                    // possibly a form button outside a form...
                }
            } else if (result.isDenied) {
                //Just closing the confirmation
            }
        });
    }
</script>

<?php
$this->Form->setTemplates([
    'confirmJs' => 'swalConfirm(this, {{confirmMessage}}, "{{formName}}"); event.returnValue = false; return false;',
]);
?>

Then you could simply use your postLink() call as-is:

echo $this->Form->postLink(
    __('Withdraw'),
    ['action' => 'request'],
    ['confirm' => __('Are you sure?'), 'class' => 'btn btn-outline-dark mb-0 ms-auto']
);

See also

ps. Note that as of CakePHP 4, the confirmMessage template variable will not be a JSON string anymore, but an HTML entity encoded string literal, so you'd have to explicitly put it in quotes:

'swalConfirm(this, "{{confirmMessage}}", "{{formName}}")',

or use the data-confirm-message attribute that has been introduced with 4.x:

'swalConfirm(this, this.getAttribute("data-confirm-message"), "{{formName}}")',

or for modern browsers:

'swalConfirm(this, this.dataset.confirmMessage, "{{formName}}")',
user_13923790
Related