CODEWITHSUNDEEP
javascriptphpjquerycodeignitersweetalert
Carlos Sanchez
Carlos Sanchez

Reputation: 35

Sweet Alert with Codeigniter for Delete events

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!

Upvotes: 0

Views: 7250

Answers (2)

DFriend
DFriend

Reputation: 8964

To stop the default action (the deletion) put event.preventDefault(); at the beginning of your function. That will stop the button (or link) action from occurring.

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

Also, I don't see that you have an element using the id AlertaEliminarCliente. I think you want it in this line of code.

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

Upvotes: 0

Tristan
Tristan

Reputation: 3321

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

Upvotes: 2

Related Questions