CakePHP 3.3使用SweetAlert確認刪除記錄

Question

我正在使用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的初學者&謝謝您提前。

Answer 1

我以下面的概念解決了這個：

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(); 
});