How to edit, delete and update data without refreshing page in codeigniter ?

In this tutorial I will explain you how to edit, delete and update data without refreshing page in codeigniter.
We will use jQuery datatable for pagination and search purpose.For that you need to include the jQuery datatable CDN.
We will use ajax so we can edit and update the datatable without refreshing whole page.Just follow the below instructions and
later on you can modify your code according to your requirement. If you do not want to refresh the page durinf edit and updateyou have to make html in the
controller or you can make html in ajax sccess call depend on you what you want to do.
I will make the html in controller.
Here I will not doing the CSS so the table might not look good but you can style table according to your need.

first create the table and insert some data in the table.

CREATE TABLE IF NOT EXISTS `ml_subdomains` (
 `id` int(20) NOT NULL AUTO_INCREMENT,
 `user_name` varchar(50) DEFAULT NULL,
 `contact_no` varchar(100) NOT NULL DEFAULT '',
 `email` varchar(20) DEFAULT NULL,
 `price` varchar(50) DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

Now insert some data statically in the table.So we can auto-load inserted data to edit.

Create a view file with name testView.php in your view folder and copy and paste the following code in file.
You need to include the jQuery datatable CDN in the top of the file for pagination purpose.

 

  1. <link href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet">
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  3. <script src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
  4.     $(document).ready(function(){
  5.         $('.hide').hide();
  6.            $('.myTable').DataTable();
  7.         });
  8.     function deleteDomain(id)
  9.     {
  10.         if (confirm("Are you sure!") == true) {
  11.         var id = id;
  12.         $('#hide'+id).show();
  13.         $.ajax({
  14.             url:"<?php echo site_url('Test/deleteDomain');?>/"+id,
  15.             success:function(data)
  16.             {
  17.            
  18.             $('#domain'+id).hide();
  19.                
  20.             }
  21.                
  22.             });
  23.         }
  24.     }
  25.     function editDomain(id)
  26.     {
  27.         var id = id;
  28.         $('#hide'+id).show();
  29.         $.ajax({
  30.             url:"<?php echo site_url('Test/editDomain');?>/"+id,
  31.             success:function(data)
  32.             {          
  33.             $('#domain'+id).html(data);
  34.             $('.hide').hide(); 
  35.             }      
  36.             });
  37.     }
  38.     function updateDomain(id)
  39.     {
  40.         var id = id;
  41.         alert(id);
  42.          var data = $("#myForm"+id).serialize();
  43.         //alert(data);
  44.         $.ajax({
  45.                     type:"POST",
  46.                     url:"<?php echo site_url('Test/updateDomain');?>/"+id,
  47.                     data:data,
  48.                     success:function(data)
  49.                     {
  50.                         console.log(data);
  51.                         if(data == "false"){
  52.                         alert("domain name already in use");
  53.                         }else{
  54.                         //alert(data);
  55.                         $('.updatedData'+id).html(data);
  56.                             }
  57.                     }
  58.                 });
  59.     }
  60.     function cancel()
  61.     {
  62.         alert("hello");
  63.         Location.reload();
  64.     }
  65. </script>              
  66.             <table border="0" width="100%" cellpadding="0" cellspacing="0"  class="myTable">
  67.             <thead>
  68.                 <tr>               
  69.                     <th >Full Name  </th>
  70.                     <th >Contact No.</th>
  71.                     <th >Email</th>
  72.                     <th >Amount</th>                   
  73.                     <th >Options</th>
  74.                 </tr>
  75.             <?php
  76.                 //echo "<pre>";
  77.                 //print_r($result);
  78.             foreach($result as $row)
  79.             {
  80.             ?> 
  81.                     <tr id="domain<?php echo $row->id;?>">
  82.                     <td><?php echo $row->user_name;?></td>
  83.                     <td><?php echo $row->contact_no;?></td>
  84.                     <td><?php echo $row->email;?></td>
  85.                     <td><?php echo $row->price;?></td>
  86.                     <td class="options-width">
  87.                    
  88.                     <a href="javascript:void(0)" title="Edit" onclick="editDomain(<?php echo $row->id;?>)" class="icon-1 info-tooltip">Edit</a>
  89.                     <a href="javascript:void(0)" onclick="deleteDomain(<?php echo $row->id;?>)"  title="Delete" class="icon-2 info-tooltip">Delete</a>
  90.                 <a href="javascript:void(0)" class="hide" id="hide<?php echo $row->id;?>">Please wait...</a>
  91.                    
  92.                     </td>
  93.                
  94.                 </tr>
  95.                
  96.             <?php
  97.             }
  98.             ?>
  99.         </tbody>
  100.     </table>

Now create a controller with Test.php name in controller folder and copy and paste the following code in the file.
Here we will select and update the data and make the html to update and edit the table data.

  1. <?php
  2.      
  3.         class Test extends CI_Controller {
  4.          
  5.                public function __construct()
  6.                {
  7.                 parent::__construct();
  8.                     //$this->load->library('database');
  9.                     $this->load->helper(array('url'));
  10.                      //   $this->load->model('test_model');
  11.               }
  12.              public function index()
  13.               {
  14.                 //echo "hello";die;
  15.                 $this->db->select('*');
  16.                 $this->db->from('ml_subdomains');
  17.                 $query = $this->db->get();
  18.                 $data['result'] = $query->result();
  19.                 $this->load->view('testView',$data);
  20.                  
  21.               }
  22.             public function deleteDomain($id)
  23.               {
  24.                 //echo $id;die;
  25.                 $this->db->where('id',$id);
  26.                 $this->db->delete('ml_subdomains');
  27.                 die;
  28.                  
  29.               }    
  30.             public function updateDomain($id)
  31.             {  
  32.                     $data = array('subdomain_name'=>$this->input->post('domain_name'),
  33.                     'user_name'=>$this->input->post('user_name'),
  34.                     'email'=>$this->input->post('email'),
  35.                     'contact_no'=>$this->input->post('contact_no'),
  36.                     'price'=>$this->input->post('price'),
  37.                     );
  38.                     //echo "<pre>";
  39.                     //print_r($data);die;
  40.                     $this->db->where('id',$id);
  41.                     $this->db->update('ml_subdomains',$data);
  42.                     $this->db->select('*');
  43.                     $this->db->where('id',$id);
  44.                     $this->db->from('ml_subdomains');
  45.                     $query = $this->db->get();
  46.                     $result = $query->result();
  47.                     //print_r($result );
  48.                     //echo $result[0]->id;die;
  49.                     echo $html = "<tr id='domain".$id."'>                  
  50.                     <td style='width:360px'>".$result[0]->user_name."</td>
  51.                     <td style='width:360px'>".$result[0]->contact_no."</td>
  52.                     <td style='width:360px'>".$result[0]->email."</td>
  53.                     <td style='width:360px'>".$result[0]->price."</td>
  54.                     <td style='width:360px'>                   
  55.                     <a href='javascript:void(0)' title='Edit' onclick='editDomain(".$id.")' class='icon-1 info-tooltip'>Edit</a>
  56.                     <a href='javascript:void(0)' onclick='deleteDomain(".$id.")'  title='Delete' class='icon-2 info-tooltip'>Delete</a>
  57.                 <a href='javascript:void(0) class='hide' id='".$id."'></a>                 
  58.                 </td>              
  59.                 </tr>";    
  60.         }
  61.     public function editDomain($id)
  62.       {    
  63.             $this->db->select('*');
  64.             $this->db->from('ml_subdomains');
  65.             $this->db->where('id',$id);
  66.             $query = $this->db->get();
  67.             $result = $query->result();
  68.             //print_r($result );die;
  69.             echo $html = '
  70.             <td colspan="10" class="updatedData'.$id.'">
  71.             <form method="POST" role="form" id="myForm'.$result[0]->id.'">     
  72.             <input type="text" name="user_name" class="inp-form" value="'.$result[0]->user_name.'">
  73.             <input type="text" name="contact_no" class="inp-form" value="'.$result[0]->contact_no.'">
  74.             <input type="text" name="email" class="inp-form" value="'.$result[0]->email.'">
  75.             <input type="text" name="price" class="inp-form" value="'.$result[0]->price.'">                
  76.             <input type="button" value="Update" onclick="updateDomain('.$result[0]->id.')" class="form-submit" />                  
  77.             <a href=""   title="Cancel" >Cancel</a>
  78.             <a href="javascript:void(0)" class="hide" id="hide'.$result[0]->id.'">Please wait...</a>           
  79. </form>
  80.     </td>
  81.                 ';
  82.         die;
  83.          
  84.       }
  85. }

 

Now run the controller and edit and update your data without refreshing page.
Hope this article how to edit, delete and update data without refreshing page in codeigniter will help you. If you like this article please share with your friends on facebook and like my page.
Keep reading and mail me if you want to request any tutorial.

  • dd

    good