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.

Online Demo

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:

jacob.mcphillips11 October 2016 at 15:52
Thanks man, I really needed this.
rahamihi0629 November 2016 at 04:11
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.
Roberto8 March 2017 at 14:21
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.

Unknown25 May 2017 at 07:31
Doesn't work!

I'm exhausted figuring out the AJAX POST

Unknown24 September 2017 at 10:06
Hi, my modal is showing but no records are coming up
betty4 March 2018 at 17:47
why does it not work anymore
betty4 March 2018 at 17:47
why does it not work anymore
Unknown7 April 2018 at 07:29
Hey I tried but its not working . everything is fine but when I click the view button the modal doesn't show up
Unknown7 April 2018 at 07:29
Hey I tried but its not working . everything is fine but when I click the view button the modal doesn't show up
Unknown18 May 2018 at 13:03
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!
Dinesh Kushwaha23 May 2018 at 23:19
thank you so much it's working for me and it is super
Unknown30 July 2018 at 18:57
where put tbl_employee
Unknown10 August 2018 at 19:59
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 ?
Vivzon.in24 August 2018 at 04:42
Thanks sir.
Doggie18 October 2018 at 16:53
thank you, pounding my head and this helped
interest4 November 2018 at 05:46
where did you get "employee-id"
Kolay Video Dersleri17 November 2018 at 05:00
you are the best
Victor Dominic22 January 2019 at 02:03
Thanks a lot man your articles have really helped me, I really appreciate it.
Sarah6 April 2019 at 02:05
this tutorial is very clear and added a nice touch in my project website! thanks a lot!
Hemn Ameen9 April 2019 at 01:44
Thanks, you are the best.
paco5 August 2019 at 03:26
Good presentation!

But if a field in each record also has a picture, how can we show that picture?
Shahid24 December 2019 at 01:06
good
Anonymous31 January 2020 at 01:52
This is great you saved my job
Unknown7 February 2020 at 22:56
you saved my day buddy, I really appreciate it.
Anunaki17 February 2020 at 19:03
Im having trouble combining 2 table in the select.php file. pls help
Anunaki17 February 2020 at 19:04
Im having trouble joining 2 table in select.php page. Any help pls
Unknown13 April 2020 at 15:16
This Code Worked Very Well But only on local server , On Live Server is Having Trouble in It's Model
salim10 November 2020 at 05:02
screen become small
Luis S. Batista Tavarez28 December 2020 at 18:24
I need the same script but with Ajax plain. I mean Ajax like xhr.
Unknown28 January 2021 at 07:35
mine won't work
Unknown9 December 2021 at 06:04
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

Webslesson

PHP, Node.js, React.js, MySql, Jquery, AngularJS, Ajax, Codeigniter, Laravel Tutorial

Wednesday, 28 September 2016