yii2 button click event precedes data-confirm message

Question

I have used data-confirm attribute with Html::a tags in datagrids and it worked. But now I want to use it with a button like this:

    <?php echo Html::button("<span class='icon delete'></span>", [
        "class" => "delete",
        "title" => Yii::t("app-upload-list", "delete"),
        "data-confirm" => Yii::t("yii", "Are you sure you want to delete this item?"),
    ])

I don't use anchor here because this button doesn't do anything in server-side. But when I attach a click event to the button, it precedes the confirm box. I can get round it by write the confirm code myself in the click event and use a data-my-confirm (or so) attribute to prevent the double confirm boxes, but it is not so nice. Can I do that with data-confirm?

score 1 · Answer 1 · answered Oct 02 '18 at 12:24

I had the same problem. Here is Yii's listener (yii.js, line 486):

// handle data-confirm and data-method for clickable and changeable elements
$(document).on('click.yii', pub.clickableSelector, handler)
    .on('change.yii', pub.changeableSelector, handler);

It uses Event Delegation

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

In this case, the listener is attached to the document node, which is listening for clicks to bubble up from the clicked element. Listeners placed on the clickable elements themselves or anything that is a child of the document node will fire before those on the document node i.e. before Yii's listener.

To ensure Yii's listener fires before your listener you will have to attach your listener to the document node as Yii has done; Listeners on the same node are invoked in the order of their registration.

$(document).on('click', '.delete', yourHandlerFunction);

Note: Event delegation is used when you need a listener for elements that don't necessarily exist when the listener is added or to listen to a single node rather than several. It is usually recommended to use the nearest parent element that exists at the time of adding the listener and that continues to exist while needed. I wouldn't suggest putting listeners on the document node without good reason.

score 1 · Answer 2 · answered Nov 09 '19 at 08:20

Even if it's an old question I'd like to contribute what I know.

In case you want to use html::button() instead of html::a()

Here is an example

 <?php echo Html::button("<span class='icon delete'></span>", [
    "class" => "delete",
    "title" => Yii::t("app-upload-list", "delete"),
    "onclick" => 'if(confirm("Are you sure you want to delete this item?")){
                     return true;
                    }else{
                     return false;
                    }',
]) ?>

I'm sure it should work.

ManuelCash · Accepted Answer · 2017-09-13T15:19:07.480

I think you can find an example of something similar to that in the Yii2 template of a View.

In my view I have the following code:

 <?= Html::a('Delete', ['delete'], [
            'class' => 'btn btn-danger',
            'data' => [
                'confirm' => 'Are you sure you want to delete this item?',
                'method' => 'post',
            ],
        ]) ?>

I have to admit that I have not try to use it with Html::button. But you can try something like this:

 <?php echo Html::button("<span class='icon delete'></span>", [
        "class" => "delete",
        "title" => Yii::t("app-upload-list", "delete"),
        "data" => [
                    'confirm' => 'Are you sure you want to delete this item?',
                    'method' => 'post',
                ],
    ]) ?>

EDIT: Yes, this way do not Work.

What is recommended is to use a link (Html::a) and style it as you wish. If you want to submit a Form you should use: Html::submitButton()

If you want to use a button... you can make it work with jQuery as mentioned by Stu here: https://stackoverflow.com/a/12697511/2437857

Yes, I got the same example but what works for the anchor does not work for the button. But the data-confirm attribute fires the confirm box, so I think it would have to work some way. — Bitskey Tamás, Sep 09 '17 at 07:50
I edited my answer. I hope this helps you If just haven´t resolved it yet. — ManuelCash, Sep 13 '17 at 15:19

yii2 button click event precedes data-confirm message

3 Answers3