带有 Codeigniter 的 Sweet Alert 用于删除事件

Question

我在尝试让甜蜜警报在我的 codeigniter 代码上工作时遇到问题，在我的客户模块的索引上（部分代码）：

<table class="table table-striped">
    <tr>
  <td>ID</td>
  <td>Empresa</td>
  <td>Contacto</td>
  <td>RNC</td>
  <td>Telefono</td>
  <td>Email</td>
  <td>Acciones</td>
    </tr>
 <?php foreach($clientes as $c): ?>
    <tr>
  <td><?php echo $c['id']; ?></td>
  <td><?php echo $c['empresa']; ?></td>
  <td><?php echo $c['contacto']; ?></td>
  <td><?php echo $c['rnc']; ?></td>
  <td><?php echo $c['telefono']; ?></td>
  <td><?php echo $c['email']; ?></td>
  <td>
            <a href="<?php echo site_url('clientes/edit/'.$c['id']); ?>" class="btn btn-info">Editar</a> 
            <a href="<?php echo site_url('clientes/delete/'.$c['id']); ?>" class="btn btn-danger">Eliminar</a>
            <a href="<?php echo site_url('clientes/view/'.$c['id']); ?>" class="btn btn-danger">Ver</a>

        </td>
    </tr>
 <?php endforeach; ?>

</table>

然后我的 js 中有这个：

$('#AlertaEliminarCliente').on("click", function() {
  swal({
      title: "Está seguro?",
      text: "No podrá recuperar el cliente una vez sea eliminado!",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: '#DD6B55',
      confirmButtonText: 'Si, Eliminarlo!',
      cancelButtonText: "No, Cancelar!",
      confirmButtonClass: "btn-danger",
      closeOnConfirm: false,
      closeOnCancel: false
    },
    function(isConfirm) {
      if (isConfirm) {
        swal("Eliminado!", "Su cliente ha sido eliminado!", "success");
      } else {
        swal("Cancelado", "Su cliente está a salvo! :)", "error");
      }
    });
});

如何将 ID #AlertaEliminarCliente 添加到我的按钮

我已经尝试添加它，但它只是删除了该行而没有要求确认等。从甜蜜的警报中，有什么我遗漏的吗？非常感谢任何指导，感谢您的宝贵时间！

Answer 1

无论用户是否与 sweet alert 交互，单击该按钮都会将用户带到 url clientes/delete/'.$c['id']。您需要修改 jQuery 以防止 url 更改，并且仅在用户选择甜蜜警报提示时重定向用户。

$('#AlertaEliminarCliente').on("click", function(e) {
  e.preventDefault();
  var url = $(this).attr('href');
  swal({
      title: "Está seguro?",
      text: "No podrá recuperar el cliente una vez sea eliminado!",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: '#DD6B55',
      confirmButtonText: 'Si, Eliminarlo!',
      cancelButtonText: "No, Cancelar!",
      confirmButtonClass: "btn-danger",
      closeOnConfirm: false,
      closeOnCancel: false
    },
    function(isConfirm) {
      if (isConfirm) {
        swal("Eliminado!", "Su cliente ha sido eliminado!", "success");
        window.location.replace(url);
      } else {
        swal("Cancelado", "Su cliente está a salvo! :)", "error");
      }
    });
});

您可能想要设置超时以在 url 更改

之前仍然显示最终消息

setTimeout(function(){ window.location.replace = url; }, 2000);

最后说明：如果您打算在页面上的多个元素上使用此方法，您应该使用 .AlertaEliminarCliente 而不是 #AlertaEliminarCliente

Answer 2

要停止默认操作（删除），请将 event.preventDefault(); 放在函数的开头。这将停止按钮（或 link）操作的发生。

$('#AlertaEliminarCliente').on("click", function(event) {
  event.preventDefault();
  swal({...

此外，我没有看到您有使用 ID AlertaEliminarCliente 的元素。我想你想要在这行代码中使用它。

<a href="<?php echo site_url('clientes/delete/'.$c['id']); ?>" 
    class="btn btn-danger" id="AlertaEliminarCliente">Eliminar</a>

带有 Codeigniter 的 Sweet Alert 用于删除事件

Sweet Alert with Codeigniter for Delete events

javascript

php

jquery

codeigniter

sweetalert