Wednesday 28 September 2016

PHP Ajax Display Dynamic MySQL Data in Bootstrap Modal




Hello friends in this tutorial we are going to learn how to display dynamic mysql data in Bootstrap Modal by using PHP programming with Jquery Ajax without page refresh. Now a days Bootstrap Modals are become most accepted and main user interface for any type of web application and with the help of modals we can do different type of things. Mainly Modals are useful for insert, edit and remove data from database and you can also use for displaying dynamic data on Bootstrap modal. Here we will use Jquery Ajax method for displaying Database content on Bootstrap modals. So it is very useful user interface for show data in details without going to other page, we can see the data in detail on that page without going to other page and without refreshing page. This is the power of Bootstrap with Jquery Ajax, We can get detail information about employee data on page and we do not want to create other new page for displaying data in details. We can use this type of user interface in our we project, it will increase the productivity and working speed of your php web application and it is Bootstrap so it is responsive so it will be adjust on any device. With help of ajax call we can fetch particular data from table and display that data on Bootstrap modal without page refresh.



Source Code


tbl_employee



--  
 -- Table structure for table `tbl_employee`  
 --  
 CREATE TABLE IF NOT EXISTS `tbl_employee` (  
  `id` int(11) NOT NULL AUTO_INCREMENT,  
  `name` varchar(50) NOT NULL,  
  `address` text NOT NULL,  
  `gender` varchar(10) NOT NULL,  
  `designation` varchar(100) NOT NULL,  
  `age` int(11) NOT NULL,  
  PRIMARY KEY (`id`)  
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=22 ;  
 --  
 -- Dumping data for table `tbl_employee`  
 --  
 INSERT INTO `tbl_employee` (`id`, `name`, `address`, `gender`, `designation`, `age`) VALUES  
 (1, 'Bruce Tom', '656 Edsel Road\r\nSherman Oaks, CA 91403', 'Male', 'Driver', 36),  
 (5, 'Clara Gilliam', '63 Woodridge Lane\r\nMemphis, TN 38138', 'Female', 'Programmer', 24),  
 (6, 'Barbra K. Hurley', '1241 Canis Heights Drive\r\nLos Angeles, CA 90017', 'Female', 'Service technician', 26),  
 (7, 'Antonio J. Forbes', '403 Snyder Avenue\r\nCharlotte, NC 28208', 'Male', 'Faller', 32),  
 (8, 'Charles D. Horst', '1636 Walnut Hill Drive\r\nCincinnati, OH 45202', 'Male', 'Financial investigator', 29),  
 (9, 'Beau L. Clayton', '3588 Karen Lane\r\nLouisville, KY 40223', 'Male', 'Extractive metallurgical engin', 33),  
 (10, 'Ramona W. Burns', '2170 Ocala Street\r\nOrlando, FL 32801', 'Female', 'Electronic typesetting machine operator', 27),  
 (11, 'Jennifer A. Morrison', '2135 Lakeland Terrace\r\nPlymouth, MI 48170', 'Female', 'Rigging chaser', 29),  
 (12, 'Susan M. Juarez', '3177 Horseshoe Lane\r\nNorristown, PA 19403', 'Female', 'Control and valve installer', 25),  
 (13, 'Ellan D. Downie', '384 Flynn Street\r\nStrongsville, OH 44136', 'Female', 'Education and training manager', 26),  
 (14, 'Larry T. Williamson', '1424 Andell Road\r\nBrentwood, TN 37027', 'Male', 'Teaching assistant', 30),  
 (15, 'Lauren M. Reynolds', '4798 Echo Lane\r\nKentwood, MI 49512', 'Female', 'Internet developer', 22),  
 (16, 'Joseph L. Judge', '3717 Junkins Avenue\r\nMoultrie, GA 31768', 'Male', 'Refrigeration mechanic', 35),  
 (17, 'Eric C. Lavelle', '1120 Whitetail Lane\r\nDallas, TX 75207', 'Male', 'Model', 21),  
 (18, 'Cheryl T. Smithers', '1203 Abia Martin Drive\r\nCommack, NY 11725', 'Female', 'Personal banker', 23),  
 (19, 'Tonia J. Diaz', '4724 Rocky Road\r\nPhiladelphia, PA 19107', 'Female', 'Facilitator', 29),  
 (20, 'Stephanie P. Lederman', '2117 Larry Street\r\nWaukesha, WI 53186', 'Female', 'Mental health aide', 27),  
 (21, 'Edward F. Sanchez', '2313 Elliott Street\r\nManchester, NH 03101', 'Male', 'Marine oiler', 28);  



index.php



<?php  
 $connect = mysqli_connect("localhost", "root", "", "testing");  
 $query = "SELECT * FROM employee";  
 $result = mysqli_query($connect, $query);  
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
      </head>  
      <body>  
           <br /><br />  
           <div class="container" style="width:700px;">  
                <h3 align="center">Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP</h3>  
                <br />  
                <div class="table-responsive">  
                     <table class="table table-bordered">  
                          <tr>  
                               <th width="70%">Employee Name</th>  
                               <th width="30%">View</th>  
                          </tr>  
                          <?php  
                          while($row = mysqli_fetch_array($result))  
                          {  
                          ?>  
                          <tr>  
                               <td><?php echo $row["name"]; ?></td>  
                               <td><input type="button" name="view" value="view" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs view_data" /></td>  
                          </tr>  
                          <?php  
                          }  
                          ?>  
                     </table>  
                </div>  
           </div>  
      </body>  
 </html>  
 <div id="dataModal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Employee Details</h4>  
                </div>  
                <div class="modal-body" id="employee_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>  
 <script>  
 $(document).ready(function(){  
      $('.view_data').click(function(){  
           var employee_id = $(this).attr("id");  
           $.ajax({  
                url:"select.php",  
                method:"post",  
                data:{employee_id:employee_id},  
                success:function(data){  
                     $('#employee_detail').html(data);  
                     $('#dataModal').modal("show");  
                }  
           });  
      });  
 });  
 </script>


select.php



<?php  
 if(isset($_POST["employee_id"]))  
 {  
      $output = '';  
      $connect = mysqli_connect("localhost", "root", "", "testing");  
      $query = "SELECT * FROM employee WHERE id = '".$_POST["employee_id"]."'";  
      $result = mysqli_query($connect, $query);  
      $output .= '  
      <div class="table-responsive">  
           <table class="table table-bordered">';  
      while($row = mysqli_fetch_array($result))  
      {  
           $output .= '  
                <tr>  
                     <td width="30%"><label>Name</label></td>  
                     <td width="70%">'.$row["name"].'</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Address</label></td>  
                     <td width="70%">'.$row["address"].'</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Gender</label></td>  
                     <td width="70%">'.$row["gender"].'</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Designation</label></td>  
                     <td width="70%">'.$row["designation"].'</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Age</label></td>  
                     <td width="70%">'.$row["age"].' Year</td>  
                </tr>  
                ';  
      }  
      $output .= "</table></div>";  
      echo $output;  
 }  
 ?>

31 comments:

  1. Thanks man, I really needed this.

    ReplyDelete
  2. Hi, i have two table one where firstname, lastname,id,age and another have two column one id and person's brothers name. I first want to show data in page firstname,lastname,view then click view will open modal at which will display table such as table header (fistname,lastname,id,age)tbody(mamun,rashid,2,29,view) click view will open modal and display mamun's brothers name.

    ReplyDelete
  3. Thank you very muuch for your tutorial.

    I had changed this example with PDO, if you wish you can tell me when I can to put this examples and I do it.

    ReplyDelete
  4. Doesn't work!


    I'm exhausted figuring out the AJAX POST

    ReplyDelete
  5. Hi, my modal is showing but no records are coming up

    ReplyDelete
  6. why does it not work anymore

    ReplyDelete
  7. why does it not work anymore

    ReplyDelete
  8. Hey I tried but its not working . everything is fine but when I click the view button the modal doesn't show up

    ReplyDelete
  9. Hey I tried but its not working . everything is fine but when I click the view button the modal doesn't show up

    ReplyDelete
  10. Thank you for sharing your knowledge. Very useful! On index file, you can correct table of employees with tbl_employee on 3-th row to work perfect. I am watching your videos. Best regards!

    ReplyDelete
  11. thank you so much it's working for me and it is super

    ReplyDelete
  12. thanks it was very helpful ! but i don't understand why i can't display the picture in the modal can u please help me ?

    ReplyDelete
  13. thank you, pounding my head and this helped

    ReplyDelete
  14. where did you get "employee-id"

    ReplyDelete
  15. Thanks a lot man your articles have really helped me, I really appreciate it.

    ReplyDelete
  16. this tutorial is very clear and added a nice touch in my project website! thanks a lot!

    ReplyDelete
  17. Good presentation!

    But if a field in each record also has a picture, how can we show that picture?

    ReplyDelete
  18. This is great you saved my job

    ReplyDelete
  19. you saved my day buddy, I really appreciate it.

    ReplyDelete
  20. Im having trouble combining 2 table in the select.php file. pls help

    ReplyDelete
  21. Im having trouble joining 2 table in select.php page. Any help pls

    ReplyDelete
  22. This Code Worked Very Well But only on local server , On Live Server is Having Trouble in It's Model

    ReplyDelete
  23. I need the same script but with Ajax plain. I mean Ajax like xhr.

    ReplyDelete
  24. For those who are wondering why it doesn't work:
    $query = "SELECT * FROM employee"; should be $query = "SELECT * FROM tbl_employee";
    cause the table is named tbl_employee when he created the table on mysql

    ReplyDelete