Ajax dynamic data load process in codeigniter with Bootstrap modal | 2my4edge

10 January 2017

Ajax dynamic data load process in codeigniter with Bootstrap modal

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.

Ajax dynamic data load process in codeigniter with Bootstrap modal
DOWNLOAD                   DATABASE FILE                         LIVE DEMO

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">&times;</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.

5 comments:

  1. can u pls update or mail me this by adding pagination and filtering it will help me a lot

    ReplyDelete
  2. NihaRika Shetty3/03/2017 9:49 PM

    Hey Mate, Nice Tut Indeed, BTW How Much Are You Earning Monthly By Adsense ?

    ReplyDelete
    Replies
    1. Did he replied you?

      Delete
    2. Sagar Chavda3/04/2017 9:25 AM

      Hey friends share with me, how much he's earning monthly?

      Delete
    3. Sagar Chavda3/08/2017 11:44 PM

      He's earning $100 month

      Delete

^