Codeigniter Tutorials

Home » Codeigniter »

How to dynamic data show on modal popup using ajax in codeigniter?

controller

File Name : Welcome.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

public function __construct()
{
parent::__construct();
$this->load->helper('url');
$this->load->model('Welcome_model','welcome');
}

public function index()
{
$this->data['view_data']= $this->welcome->view_data();
$this->load->view('welcome_message', $this->data, FALSE);
}

public function getmarks()
{
$stu_id = $_POST['stu_id'];
$data['marks'] = $this->welcome->get_marks($stu_id);
$this->load->view("modal", $data);
}

}

Model

File Name : Welcome_model.php

<?php
class Welcome_model extends CI_Model
{
public function __construct()
{
parent::__construct();
}

public function view_data(){
$query=$this->db->query("SELECT *
FROM student
ORDER BY id ASC");
return $query->result_array();
}

public function get_marks($stu_id){

$query=$this->db->query("SELECT name, mark
FROM student as stu
LEFT JOIN marks as mark
ON stu.id = mark.student_id
WHERE stu.id = $stu_id");
return $query->result_array();
}

}

View

File Name : welcome_message.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2my4edge Bootstrap 3 Table</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>S.no</th>
<th>Name</th>
<th>Reg No</th>
<th>View mark</th>
</tr>
</thead>
<tbody>
<?php
if(isset($view_data) && is_array($view_data) && count($view_data)): $i=1;
foreach ($view_data as $key => $data) {
?>
<tr>
<td><?php echo $data['id']; ?></td>
<td><?php echo $data['name']; ?></td>
<td><?php echo $data['r_number']; ?></td>
<td><a data-toggle="modal" data-target="#myModal"

onclick="javascript:load_marks(<?php echo $data['id']; ?>)">View</a>

</td>
</tr>
<?php
}
endif;
?>
</tbody>
</table>
</div>

<script type="text/javascript">
//$(".modal-dialog").hide();
function load_marks(stu_id)
{
$.ajax({
type: "POST",
url: "<?php echo site_url('welcome/getmarks');?>",
data: "stu_id="+stu_id,
success: function (response) {
$(".displaycontent").html(response);

}
});
}
</script>

<div class="modal fade displaycontent" id="myModal">

<?php include('modal.php'); ?>

</body>
</html>

modal popup

File Name : modal.php

<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">×</span>

</button>
<h4 class="modal-title">Mark Datails of <?php echo $marks[0]['name']; ?></h4>
</div>
<div class="modal-body">
<table class="table table-striped">
<tbody>
<?php
if(isset($marks) && is_array($marks) && count($marks)): $i=1;
foreach ($marks as $key => $data) {
?>
<tr>
<td>Name</td>
<td><?php echo $data['name']; ?></td>
</tr>
<tr>
<td>Language</td>
<td><?php echo $data['language']; ?></td>
</tr>
<tr>
<td>English</td>
<td><?php echo $data['english']; ?></td>
</tr>
<tr>
<td>Maths</td>
<td><?php echo $data['maths']; ?></td>
</tr>
<tr>
<td>Science</td>
<td><?php echo $data['science']; ?></td>
</tr>
<tr>
<td>S Science</td>
<td><?php echo $data['s_science']; ?></td>
</tr>

<?php
}
endif;
?>
</tbody>
</table>
</div>
</div>
</div>
</div>

File Name :

$(document).ready(function(){

$('.userinfo').click(function(){

var userid = $(this).data('id');

// AJAX request
$.ajax({
url: 'ajaxfile.php',
type: 'post',
data: {userid: userid},
success: function(response){
// Add response in Modal body
$('.modal-body').html(response);

// Display Modal
$('#empModal').modal('show');
}
});
});
});

Itechtuto

Codeigniter Tutorials

How to dynamic data show on modal popup using ajax in codeigniter?

File Name : Welcome.php

File Name : Welcome_model.php

File Name : welcome_message.php

File Name : modal.php

File Name :

File Name :

Connect Us Socially:

Quick Links