Show Dynamic data on modal popup using Ajax JQuery in Codeigniter

Show Dynamic data on modal popup using Ajax JQuery in Codeigniter
Published May 07,2019 by Kailash Singh
2 Comments 16916 Views
In this tutorial, we are going to learn about how to show dynamic data on modal popup using Ajax JQuery in Codeigniter
Step 1 :- Create table in Database.
CREATE TABLE `elevenstech`.`student_list` ( `id` INT(11) NOT NULL AUTO_INCREMENT , `name` VARCHAR(200) NOT NULL , `email` VARCHAR(250) NOT NULL , `phone` VARCHAR(50) NOT NULL , PRIMARY KEY (`id`)) ENGINE = InnoDB;
Step 2 :- Insert Data in Student Table.
INSERT INTO `student_list` (`id`, `name`, `email`, `phone`) VALUES
(1, 'kailash Singh', '[email protected]', '8588692393'),
(2, 'Amit Singh', '[email protected]', '8588692374');
Step 3 :- Create Model in Models Folder (Student_model.php)
In this step we are fetching the data from the student_list table.
<?php
class Student_model extends CI_Model{
public function student_list()
{
return $this->db->select('*')
->from('student_list')
->get()
->result();
}
}
?>
Step 4 :- Create Controller in Controllers Folder (Students.php)
In this step, we are going to pass the values from model to view.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Students extends CI_Controller
{
public function index()
{
$this->load->model('student_model');
$student_list = $this->student_model->student_list();
$this->load->view('students',['student_list'=>$student_list]);
}
}
?>
Step 5 :- Create view in views Folder (students.php)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
Step 6 :- Create view in views Folder (students.php)
In this step, we are creating a table to list all the data and also create a view button. If when we click on view button then particular row data will show on modal popup.
Note :- Also create a attribute in view button to pass student id. ( relid="<?php echo $student->id; ?>" )
Like this:-
<button class="btn btn-primary view_detail" relid="<?php echo $student->id; ?>">View</button>
Here is the full code:-
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th></th>
</tr>
</thead>
<tbody>
<?php $i = 1; foreach ($student_list as $student) { ?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $student->name; ?></td>
<td><?php echo $student->email; ?></td>
<td><?php echo $student->phone; ?></td>
<td>
<button class="btn btn-primary view_detail" relid="<?php echo $student->id; ?>">View</button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
Step 7 :- Write ajax and jquery code in view page (students.php)
In this step, we are writing ajax and jquery code to fetch the particular data of the row.
<script type="text/javascript">
$(document).ready(function() {
$('.view_detail').click(function(){
var id = $(this).attr('relid'); //get the attribute value
$.ajax({
url : "<?php echo base_url(); ?>students/get_student_data",
data:{id : id},
method:'GET',
dataType:'json',
success:function(response) {
$('#student_name').html(response.name); //hold the response in id and show on popup
$('#student_email').html(response.email);
$('#student_phone').html(response.phone);
$('#show_modal').modal({backdrop: 'static', keyboard: true, show: true});
}
});
});
});
</script>
Step 8 :- Create function in controller (Students.php)
In this step, we are creating a function in students controller to get the single row of the data.
public function get_student_data()
{
$id = $this->input->get('id');
$get_student = $this->student_model->get_student_data_model($id);
echo json_encode($get_student);
exit();
}
Step 9 :- Create Query in Model (Students_model.php)
public function get_student_data_model($id)
{
return $this->db->select('*')
->from('student_list')
->where(['id'=>$id])
->get()
->row();
}
Step 10 :- Create Modal Popup to show the data in view (students.php)
<div id="show_modal" class="modal fade" role="dialog" style="background: #000;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 style="font-size: 24px; color: #17919e; text-shadow: 1px 1px #ccc;"><i class="fa fa-folder"></i> Student Details</h3>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped">
<thead class="btn-primary">
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td><p id="student_name"></p></td> //here i am showing the data with the help of id
<td><p id="student_email"></p></td>//here i am showing the data with the help of id
<td><p id="student_phone"></p></td>//here i am showing the data with the help of id
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
Hope this will help our developers.
Because we believe Mantra means CodingMantra
2 Comments
Basil Kurien May 10, 2020
data displayed in table but modal not showing
SEARCH POST HERE
Support Us
Subscribe My YouTube Channel
Join Our Telegram Channel & Support Eachother
CATEGORIES
INTERVIEW QUESTIONS
PROJECT SOURCE CODE
POPULAR POSTS
Elevenstech Web Tutorials
Elevenstech Web Tutorials helps you learn coding skills and enhance your skills you want.
As part of Elevenstech's Blog, Elevenstech Web Tutorials contributes to our mission of “helping people learn coding online”.
Read More
Newsletter
Subscribe to get the latest updates from Elevenstech Web Tutorials and stay up to date