In this tutorial,We will learn how to use sweetalert as a confirmation box in Codeigniter 3. we will use sweet alert before deleting it in Codeigniter.
Follow some steps to use sweetalert box while deleting item:
Step 1:
Create items Table
CREATE TABLE IF NOT EXISTS `items` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`description` text COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=16 ;
Then insert some dummy data to delete it.
Step 2:
Add Routes
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
$route['item-list'] = 'ItemController/index';
$route['item-list/(:any)']['delete'] = "ItemController/delete/$1";
Step 3:
Create ItemController Controller
application/controllers/ItemController.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class ItemController extends CI_Controller {
/**
* Get All Data from this method.
*
* @return Response
*/
public function __construct() {
parent::__construct();
$this->load->database();
}
/**
* Create from display on this method.
*
* @return Response
*/
public function index()
{
$data['data'] = $this->db->get("items")->result();
$this->load->view('itemlist', $data);
}
/**
* Delete Data from this method.
*
* @return Response
*/
public function delete($id)
{
$this->db->delete('items', array('id' => $id));
echo 'Deleted successfully.';
}
}
Step 4:
Create View Files
application/views/itemlist.php
<!DOCTYPE html>
<html>
<head>
<title>Sweet alert for delete confirm in Codeigniter</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://lipis.github.io/bootstrap-sweetalert/dist/sweetalert.js"></script>
<link rel="stylesheet" href="https://lipis.github.io/bootstrap-sweetalert/dist/sweetalert.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Sweet alert for deleting item</h2>
</div>
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th width="220px">Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($data as $item) { ?>
<tr id="<?php echo $item->id; ?>">
<td><?php echo $item->title; ?></td>
<td><?php echo $item->description; ?></td>
<td>
<button type="submit" class="btn btn-danger remove"> Delete</button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<script type="text/javascript">
$(".remove").click(function(){
var id = $(this).parents("tr").attr("id");
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm) {
if (isConfirm) {
$.ajax({
url: '/item-list/'+id,
type: 'DELETE',
error: function() {
alert('Something is wrong');
},
success: function(data) {
$("#"+id).remove();
swal("Deleted!", "Your imaginary file has been deleted.", "success");
}
});
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
});
</script>
</body>
</html>
Thanks, I hope it will work for you.....