CodeIgniter Ajax Driven Editable Table – CodeIgniter
In this post we will show you CodeIgniter Ajax Driven Editable Table, hear for CodeIgniter Ajax Driven Editable Table we will give you demo and example for implement.
The contenteditable attribute is one in every of the new most useful addition in HTML5. these days we have a tendency to square measure utilising the contenteditable attribute in HTML5 to create a straightforward mythical being driven editable tables in CodeIgniter. For sake of simplicity, the table contains simply 2 columns that|during which|within which} one in every of which is ID and different one is Title of journal Posts and after you double click Title column it becomes editable and you’ll be able to save its contents by pressing Enter Key. though this tutorial is created with a demo CodeIgniter application, you’ll be able to simply customise it for any PHP comes.
SO LET’S begin CODING for CodeIgniter Ajax Driven Editable Table
Controller for CodeIgniter Ajax Driven Editable Table
complete code within the Tables controller is given below for easy mythical being Driven Editable Table victimisation CodeIgniter.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Tables extends CI_Controller
{
// construct function
Public function __construct()
{
parent::__construct();
$this->load->model('Tablemodels');
}
// index function
public function index()
{
$datas['posts'] = $this->Tablemodels->posts();
$this->load->view('header');
$this->load->view('tablepage',$datas);
$this->load->view('footer');
}
// datasave function
public function datasave()
{
If( $_SERVER['REQUEST_METHOD'] != 'POST' )
{
redirect('table');
}
$id = $this->input->post('id',true);
$title = $this->input->post('title',true);
$fields_val = array(
'title' => $title,
);
$this->Tablemodels->posts_save($id,$fields_val);
echo "Successfully data saved";
}
}
The datasave() method is triggered by Ajax to update the content of the table. For the sake of simplicity, i’m not doing any form of type validations in this technique Instead, I do basic checks like whether or not the requested technique is that the post or not and a few basic XSS cleanup by giving the second parameter of the CodeIgniter input category post as true.
Model for CodeIgniter Ajax Driven Editable Table
The complete code for Tablemodels is given below for easy Ajax Driven Editable Table mistreatment CodeIgniter.
<?php
class Tablemodels extends CI_Model
{
// construct function
function __construct()
{
// hear we call model constructor
parent::__construct();
}
// posts function
function posts()
{
$query = $this
->db
->limit(10)
->get('posts');
if($query->num_rows()>0)
{
return $query->result();
}
else
{
return null;
}
}
// posts_save function
function posts_save($id,$fields_val)
{
$this ->db
->where('id',$id)
->update('posts',$fields_val);
}
}
Paste your text here and click on “Next” to look at this text editor do it’s factor.
don’t have any text to check? don’t have any text to check? Click “Select Samples”.The model is extremely basic with 2 functions one for attractive details and one for change details. No huge deal.
View Page for CodeIgniter Ajax Driven Editable Table
Before we glance at the contents of our read page lets take a glance at javascript perform that is triggered once pressing Enter Key. The datasave() methodology is accountable for handling Ajax requests for easy Ajax Driven Editable Table victimisation CodeIgniter.
<script>
// CodeIgniter Ajax Driven Editable Table script
// datasave function
function datasave(e,id,title)
{
if(e.keyCode === 13)
{
if (confirm('Are you sure, you want to save this data into server?'))
{
// ajax call
e.preventDefault();
$.ajax({
type: "POST",
url: "<?php echo base_url('tables/datasave')?>",
data: { '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>',
'id': id,
'title' :title,
},
success: function(response_data){
// success
alert(response_data);
}
});
}
}
}
</script>
The keycode thirteen represent Enter Key and if user press Enter key and true the confirmation alert then the jQuery Ajax operate is triggered.
Note: don’t forget to pass CSRF Token along side Ajax POST request as higher than if you switch on CSRF protection in CodeIgniter config file. Cross website Request Forgery protection is by default turned off in CodeIgniter. If you wish to urge most security in your application you’ll flip it on config.php file. If you change CSRF protection do not forget to show csrf_regenerate to false because it causes issues with back/forward navigation, multiple tabs/windows, asynchronous actions, etc.
For debugging and to check Ajax post parameters you’ll use Firebug in Firefox or Google Chrome DevTools. Firebug is my favorite and simple to use however Google Chrome developer tools conjointly work well. Monitor the Network tab within the console.
Now the entire code for tablepage.php file
<style>
.inEdit{
background-color: #ccd;
border: 1px solid #332 ;
border-radius: 15px;
}
</style>
<!-- CodeIgniter Ajax Driven Editable Table -->
<div class="divclass container">
<h3 class=" divclasstext-center">CodeIgniter Ajax Driven Editable Table - onlinecode</h3>
<div class="col-md-8 divclass col-md-offset-2">
<div class="table-responsive divclass">
<table class="table table-bordered divclass" width="99%" >
<thead>
<tr>
<th>ID</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<?php
foreach ($posts as $post_val)
{
?>
<tr>
<!-- id of post_val -->
<td><?php echo $post_val->id; ?></td>
<!-- title of post_val -->
<td title="Hear double click to Edit and press Enter to Save" ondblclick="this.contentEditable=true; this.className='inEdit';" onblur="this.contentEditable=false; this.className='';" onkeypress="datasave(event,'<?php echo $post_val->id; ?>',$(this).html() )"><?php echo $post_val->title; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
<script>
<!-- hear we Refer Above Javascript Code -->
</script>
On double click, the contentEditable property of that cell become true and a replacement category inEdit is allotted to that. On blur, the contentEditable property and inEdit category ar removed. each time you kind one thing in editable cell datasave() technique is named. I used this keyword to represent this cell within the table.
Hope this code and post will helped you for implement CodeIgniter Ajax Driven Editable Table. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org