phpyii2yii2-basic-app

Yii2 delete confirmation modal


I'm trying to make a delete confirmation modal with yii2. I have a grid view with an action button which deletes item of gridview.

When a user clicks on this button, a popup modal shows up and I cannot get the id of the item which must be deleted.

Here the code of my gridview (only the action button):

'buttons' => [
                'view' => function ($url, $model) {
                            return Html::a('', $url, ['class' => 'btn btn-success btn-xs glyphicon glyphicon-eye-open']);
                        },
            'edit'   => function ($url, $model) {
                            if (Yii::$app->user->getIdGroupe() != 1)
                            {
                                return Html::a('');
                            }
                            return Html::a('', $url, ['class' => 'btn btn-warning btn-xs glyphicon glyphicon-pencil']);
                        },
                        'delete' => function ($url, $model) {
                            return Html::a('', $url, ['class' => 'btn btn-danger btn-xs glyphicon glyphicon-trash', 'data-toggle' => 'modal', 'data-target' => '#modal', 'data-id' => $model->idRessource, 'id' => 'popupModal']);
                        },
                ],
'urlCreator'  => function ($action, $model, $key, $index) {
                            if ($action == 'view') {
                                $url = Url::to(['/ressource/view', 'id' => $model->idRessource]);
                            } else if ($action == 'edit') {
                                $url = Url::to(['/ressource/edit', 'id' => $model->idRessource]);
                            } else {
                                $url = '#';
                            }
                            return $url;
                    },

Then the modal :

<?php $url = Url::to(['ressource/delete']); ?>

<?php Modal::begin([
    'header' => '<h2 class="modal-title"></h2>',
    'id'     => 'modal-delete',
    'footer' => Html::a('Supprimer', $url, ['class' => 'btn btn-danger']),
]); ?>

<?= 'Etes vous sur de vouloir supprimer la ressource ...'; ?>

<?php Modal::end(); ?>

And finally javascript :

<?php
$this->registerJs("$(function() {
   $('#popupModal').click(function(e) {
        e.preventDefault();
        $('#modal-delete').modal('show').find('.modal-body')
        .load($('.modal-dialog'));
        var modal = $(this);
        var triggered = $(e.relatedTarget);
        var id = triggered.data('id');
        $('.modal-title').text('Supprimer la ressource ' + id);
   });
});"); ?>

And the problem is I can't get the id of the item and I need it when I build the $url because the action 'actionDelete' need the id of the item.

Hope it is clear and you'll be able to help me ! Thanks


Solution

  • I've found the solution by myself and thanks to @XiaosongGuo so here is the full answer

    My delete button :

    'delete' => function ($url, $model) {
        return Html::a('', $url, [
            'class'       => 'btn btn-danger btn-xs glyphicon glyphicon-trash popup-modal',
            'data-toggle' => 'modal',
            'data-target' => '#modal',
            'data-id'     => $model->idRessource,
            'data-name'   => $model->nomRessource,
            'id'          => 'popupModal',
        ]);
    },
    

    My url creator :

    'urlCreator'     => function ($action, $model, $key, $index) {
        $url = Url::to(['/ressource/delete', 'id' => $model->idRessource]);
        return $url;
    },
    

    My modal :

    <?php Modal::begin([
        'header' => '<h2 class="modal-title"></h2>',
        'id'     => 'modal-delete',
        'footer' => Html::a('Supprimer', '', ['class' => 'btn btn-danger', 'id' => 'delete-confirm']),
    ]); ?>
    
    <?= 'Etes vous sur de vouloir supprimer cette ressource ?'; ?>
    
    <?php Modal::end(); ?>
    

    and finally the JavaScript :

    <?php
    $this->registerJs("
        $(function() {
            $('.popup-modal').click(function(e) {
                e.preventDefault();
                var modal = $('#modal-delete').modal('show');
                modal.find('.modal-body').load($('.modal-dialog'));
                var that = $(this);
                var id = that.data('id');
                var name = that.data('name');
                modal.find('.modal-title').text('Supprimer la ressource \"' + name + '\"');
    
                $('#delete-confirm').click(function(e) {
                    e.preventDefault();
                    window.location = 'delete?id='+id;
                });
            });
        });"
    );
    

    If you have better solutions than my answer please do not hesitate to tell me !

    Thanks for the help everyone :)