Today i am going to explain you about, how to get / view / fetch dynamic data from database in codeigniter with bootstrap modal popup window, recently have worked on that, so i hope this will helps you also in some cases, so here i am going to explain you how to do that coding in codeigniter. Lets see the code below.
In my previous posts have explained you how to configure codeigniter, Previous Codeigniter tutorials.
CONTROLLER
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
Welcome_model.php
<?php class Welcome_model extends CI_Model { public function __construct() { parent::__construct(); } public function view_data(){ $query=$this->db->query("SELECT stu.* FROM student stu ORDER BY stu.id ASC"); return $query->result_array(); } public function get_marks($stu_id){ $query=$this->db->query("SELECT stu.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
Two view pages
1. welcome_message.php
2. modal.php
1. 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>
2. modal.php
Commenting the first line and we are putting that first in welcome_message page before we are including that modal.php file.
<!-- <div class="modal fade" tabindex="-1" id="myModal" role="dialog"> --> <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>
I hope this tutorial is really helpful to you, Keep visiting for update, please be in touch with us in social media. If you have any query, comment below, Thank you.
can u pls update or mail me this by adding pagination and filtering it will help me a lot
ReplyDeleteHey Mate, Nice Tut Indeed, BTW How Much Are You Earning Monthly By Adsense ?
ReplyDeleteDid he replied you?
DeleteHey friends share with me, how much he's earning monthly?
DeleteHe's earning $100 month
DeleteHey men one help me.
ReplyDeleteI upload pdf,ppt,doc file in mysql database using php pdo.
How to view any file like pdf,ppt,or doc in bootstrap modal dynamically from database.
Itsws Technologies provides best Mobile App development services iPhone, iPad and Android applications at affordable prices for every business.
ReplyDelete