How to Use Sweet Alert for Delete Confirm in Codeigniter?

By Hardik Savani November 5, 2023 Category : Codeigniter

In this example, i will share with you how to use sweetalert as confirmation box in codeigniter 3 application. we will use sweet alert before delete in codeigniter. we will use delete event with ajax, use sweet alert confirmation box with cancel and yes button in php codeigniter application.

If you are using bootstrap theme and you need to use confirm box before delete then i will must suggest you to use confirm box js for confirmation box in your codeigniter project. it will looks awesome and it is user friendly layout for confirm box.

In this example, we will create one items table and list all records with delete button in table structure. then we will write js code for conformation before delete. we will use sweet alert for confirmation box in codeigniter.

Just see bellow example and use that confirmation box in codeigniter.

Step 1: Create items Table

In this step we will create new database "test" and add new table "items" in test database. You can use following SQL Query for create "items" table. So let's create using bellow sql query:

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 ;

Step 2: Add Routes

In this step you have to add two new routes in our route file. so, two routes with GET and DELETE method. one route will list of all items and another for remove item, so let's put route as bellow code:

application/config/routes.php

<?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";

Read Also: Bootstrap Fancy Alert Box using SweetAlert Example

Step 3: Create ItemController Controller

Ok, now first we have to create one new controller ItemController with two method. so create ItemController.php file in this path application/controllers/ItemController.php and put bellow code in this file:

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

In this step, we will create one view file and we have to write there jquery confim box code.

application/views/itemlist.php

Read Also: How to Create a Custom Library in CodeIgniter?
<!DOCTYPE html>
<html>
<head>
    <title>How to use sweet alert for delete confirm in Codeigniter? - itsolutionstuff.com</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>How to use sweet alert for delete confirm in Codeigniter? - Itsolutionstuff.com</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>

Now you are ready to run example. you can also see demo from bellow link.

I hope you found your best solution....

Tags :
Previous

Laravel 5.8 Email Verification Example
Next

Task Scheduling with Cron Job in Laravel 5.8

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares