Published May 07,2019 by Kailash Singh
Show Dynamic data on modal popup using Ajax JQuery in Codeigniter

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', 'ks623039@gmail.com', '8588692393'),
(2, 'Amit Singh', 'amit2423@gmail.com', '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

Be First to Comment

Leave a Reply