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     19405 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