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

Question

I'm having problems trying to make sweet alerts work on my codeigniter code, on the index of my clients module i have (part of code):

<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>

Then i have in my js this:

$('#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");
      }
    });
});

How can i add the id #AlertaEliminarCliente to my button

i have tried to add it and it just delete the row without asking for confirmation etc.. from sweet alert, is there something that i am missing? any guidance its really appreciated, thanks guy for your time!

</div>

Answer 1

Clicking on the button will take the user to the url clientes/delete/'.$c['id'] regardless of user interaction with sweet alert. You need to modify your jQuery to prevent the url change, and only redirect the user on their choice of the sweet alert prompt.

$('#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");
      }
    });
});

You may want to set a timeout to still display the final message before the url change

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

Final note: if you intend to use this method on more than one element on the page you should use .AlertaEliminarCliente rather than #AlertaEliminarCliente