CakePHP 3.3使用SweetAlert确认删除记录

时间:2017-01-16 18:57:06

标签: javascript jquery twitter-bootstrap cakephp-3.0 sweetalert

我使用CakePHP 3.3,我有一个users列表,我想在确认取消删除特定用户之前显示SweetAlert确认框。

这是src/Template/Users/index.ctp文件的一个片段,其中包含用户列表:

<tbody>
        <?php foreach ($users as $user): ?>
        <tr>
            <td><?= $this->Html->image('../'.$user->avatar, ['class' => 'img-avatar']); ?></td>
            <td><?= h($user->username) ?></td>
            <td><?= h($user->role) ?></td>
            <td><?= h($user->created) ?></td>
            <td><?= h($user->modified) ?></td>
            <td class="actions">
                <span class="label label-default"><?= $this->Html->link(__('View'), ['action' => 'view', $user->id]) ?></span>
                <span class="label label-default"><?= $this->Html->link(__('Edit'), ['action' => 'edit', $user->id]) ?></span>
                <span class="label label-default"><?= $this->Form->postLink(__('Delete'), ['action' => 'delete', $user->id], ['confirm' => __('Are you sure you want to delete # {0}?', $user->id)]) ?></span>
            </td>
        </tr>
        <?php endforeach; ?>
 </tbody>
 <button class="btn-del">DUMMY BUTTON</button>

然后我的src/Template/Layout/default.ctp

中有一个脚本
<script>
    document.querySelector('.btn-del').onclick = function(){
        swal({
                title: "Are you sure?",
                text: "You will not be able to recover this imaginary file!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false
            },
            function(){
                swal("Deleted!", "Your imaginary file has been deleted.", "success");
            });
    };
</script>

我尝试过该脚本,它正在使用Dummy Button,但我不知道如何使其工作,因此它可以确认或取消删除user记录每次删除后重定向到index.ctp

对不起,我是CakePHP和JS&amp; amp;的初学者。提前谢谢。

2 个答案:

答案 0 :(得分:0)

我已使用以下概念解决了这个问题:

<强> HTML

<tr class="home-loan-table">
    <td><?= $this->Html->image($image, array('class' => 'profile-user-img img-responsive img-circle', 'width' => 100, 'height' => 100, 'alt' => 'User profile picture')) ?></td>
    <td><?= $testimonial->has('FromUser') ? $testimonial->FromUser->first_name : $testimonial->name ?></td>
    <td><?= $profile ?></td>
    <td><?= $testimonial->title ?></td>
    <!--<td><?= $testimonial->has('user') ? $this->Html->link($testimonial->user->id, ['controller' => 'Users', 'action' => 'view', $testimonial->user->id]) : '' ?></td>-->
    <td>
        <div class="table-wrap-elps">
            <?= ($testimonial->description) ?>
        </div>
    </td>
    <td><?= $this->Number->format($testimonial->rating) ?></td>
    <td class="actions text-center" style="white-space:nowrap">
        <?= $this->Html->link(__('View'), ['action' => 'view', $testimonial->id], ['class' => 'view-btn']) ?>
        <?= $this->Html->link(__('Edit'), ['action' => 'edit', $testimonial->id], ['class' => 'edit-icon']) ?>
        <?= $this->Form->postLink(__('Delete'), ['action' => 'delete', $testimonial->id], ['confirm' => __('Confirm to delete this entry?'), 'class' => 'crose-btn hide-postlink']) ?>
        <a href="javascript:;" class="crose-btn postlink-delete">Delete</a>
    </td>
</tr>

<强> CSS

<style>
.hide-postlink{
    display: none;
}
.postlink-delete{
    display: inline-block;
}

<强> 脚本

<script>
$(document).on('click', '.postlink-delete', function () {
    var delete_form = $(this).parent().find('form');
    //add sweetalert here then form submit
    delete_form.submit();
});

答案 1 :(得分:0)

index.ctp

<?= $this->Form->postLink(__('Delete'), ['action' => 'delete', $testimonial->id], ['class'=>'your_class','confirm' => __('Confirm to delete this entry?')]) ?>

脚本

$(".your_class").attr("onclick", "").unbind("click"); //remove function onclick button

$(document).on('click', '.your_class', function () {
    let delete_form = $(this).parent().find('form');
    swal({
        title: "Você tem certeza?",
        text: "Uma vez excluído, você não poderá mais recuperar!",
        icon: "warning",
        buttons: true,
    }).then((willDelete) => {
            if (willDelete) {
                delete_form.submit();
            }
        });
});