Hello World, This is seventh tutorial of the series Learn Codeigniter From Scratch. In this turoail we will learn how to implement jquery ajax with codeigniter. We will apply jquery ajax on our existing todo application. I hope you are enjoying this tutorial. In the previous tutorial, we have learned that how we can implement pagination with codeigniter. In the previous tutorial we have used the codeigniter pagination library. I have divided this tutorial in following parts:
- Overview concept in todo application
- Implement jquery ajax
- Test the application
Overview concept in todo application
In this tutorial we will implement jquery ajax on our existing todo application. In this application we will apply a task status button on task list. When someone click on this button then we will perform action that task is completed or pending. See the following screenshot.
In the above screen, you can see that we have added a button which shows that status is complete or not with colour. Lets apply the functionality with jquery ajax.
Implement jquery ajax with codeigniter
- Open todo.php in application/views/todo folder and replace the previous code with following code.
<!DOCTYPE html>
<html>
<head>
<title><?php echo $page_title; ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('public/bootstrap.min.css') ?>" />
<!-- Include jquery -->
<script type="text/javascript" src="<?php echo base_url('public/jquery-3.1.1.min.js') ?>"></script>
</head>
<body>
<div class="container">
<h1 class="page-header">To-Do List
<span class="badge"><?php echo $totalResult; ?></span>
<a href="<?php echo site_url('todo/add'); ?>" class="btn btn-sm btn-danger pull-right">Add Task</a>
</h1>
<table class="table table-striped table-bordered">
<tr>
<th>Task</th>
<th>Status</th>
<th>Complete Action</th>
<th>Action</th>
</tr>
<?php
if($content['bool']==true){
foreach($content['d'] as $task){
?>
<tr>
<td><?php echo $task['task_title']; ?></td>
<td><?php echo $task['task_status']; ?></td>
<td><button class="btn btn-<?php echo ($task['task_status']=='completed') ? 'success':'warning'; ?> btn-xs task-status-action" data-task_status="<?php echo $task['task_status']; ?>"><?php echo $task['task_status']; ?></button></td>
<td>
<a href="#" class="btn btn-xs btn-primary">Edit</a>
<a href="#" class="btn btn-xs btn-danger">Delete</a>
</td>
</tr>
<?php
}
}else{
?>
<tr>
<td colspan="3">
<p class="alert alert-warning">No Data Found!!</p>
</td>
</tr>
<?php
}
?>
</table>
<?php
echo $this->pagination->create_links();
?>
</div>
</body>
</html>
In the above code, we have added button and jquery library.
- Open Todo Controller and add the following method
// Ajax Method
function ajax_change_status(){
echo json_encode($this->Todo_model->ajax_change_status());
}
- Open Todo model and add the following method in it.
// Change Status via AJax
function ajax_change_status(){
$res=array();
$task_id=$this->input->post('task_id');
$task_status=$this->input->post('task_status');
$updateData=array(
'task_status'=>$this->input->post('task_status')
);
$this->db->where('id',$task_id);
$query=$this->db->update('todo_list',$updateData);
if($this->db->affected_rows()>0){
if($task_status=='pending'){
$color='warning';
}else{
$color='success';
}
$res['bool']=true;
$res['htmlData']='<button class="btn btn-'.$color.' btn-xs task-status-action" data-task_id="'.$task_id.'" data-task_status="'.$task_status.'">'.$task_status.'</button>';
}else{
$res['bool']=false;
$res['htmlData']='<button class="btn btn-warning" btn-xs task-status-action" data-task_id="'.$task_id.'" data-task_status="'.$task_status.'">'.$task_status.'</button>';
}
return $res;
}
- Add the following code todo.php view file before closing tag of body.
<script>
$(document).ready(function(){
var ajaxUrl="<?php echo site_url(); ?>";
$("td").on('click','button.task-status-action',function(){
var task_id=$(this).data('task_id');
var task_status=$(this).data('task_status');
if(task_status=='pending'){
var make_status='completed';
}else{
var make_status='pending';
}
var parentElm=$(this).parent();
// Implement Jquery Ajax
$.ajax({
url:ajaxUrl+'/todo/ajax_change_status',
type:"POST",
data:{task_id:task_id,task_status:make_status},
dataType:'json',
success:function(response){
parentElm.html(response.htmlData);
}
});
});
});
</script>
Test the application
- When you open the application in the browser, you will see the button and when you will click on button then you will see that status has been changed without loading the page.
Congratulations, You have successfully implement Jquery Ajax with codeigniter. 🙂