PHP Ajax Display Dynamic MySQL Data in Bootstrap Modal

Today, We want to share with you PHP Ajax Display Dynamic MySQL Data in Bootstrap Modal.In this post we will show you how to display data from database in php using ajax?, hear for Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP we will give you demo and example for implement.In this post, we will learn about Loading Dynamic Content on a Bootstrap Modal using jQuery with an example.

PHP Ajax Display Dynamic MySQL Data in Bootstrap Modal

There are the Following The simple About PHP Ajax Display Dynamic MySQL Data in Bootstrap Modal Full Information With Example and source code.

As I will cover this Post with live Working example to develop Dynamically load content in Bootstrap Modal with AJAX, so the php ajax insert data in mysql by using bootstrap modal for this example is following below.

Step 1 : Create a MySQL TABLE and Dumping Data

tbl_leader

--  
 -- Table structure for table `tbl_leader`  
 --  
 CREATE TABLE IF NOT EXISTS `tbl_leader` (  
  `id` int(11) NOT NULL AUTO_INCREMENT,  
  `name` varchar(50) NOT NULL,  
  `person_types` 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_leader`  
 --  
 INSERT INTO `tbl_leader` (`id`, `name`, `person_types`, `gender`, `designation`, `age`) VALUES  
 (1, 'Narendra Modi', 'Mann ki Baat and periodic public person_typeses to children', 'Male', 'Prime Minister’s', 36),  
 (5, 'AMIT Shah', 'the BJP pulled off a win in Gujarat ', 'male', 'Despite anti-incumbency', 24),  
 (6, 'Dipak Misra', ' set to retire on October 2. With many former judges, CA 90017', 'Female', 'post-retirement ', 26),  
 (7, 'Mohan Bhagwat', 'Despite speculation that the BJP has grown too big for the RSS', 'Male', 'RSS', 32),  
 (8, 'SoNIA GANDHI', 'Mamata and old warhorse Pawar, OH 45202', 'Male', 'political ', 29),  
 (9, 'Mamata Banerjee', 'increased her tally from the 2016 Assembly polls', 'Male', 'mass leader in West Bengal', 33),  
 (10, 'RajNATH SINGH', 'credited with paving the way for a dialogue', 'Female', 'Intelligence Bureau chiefDineshwar', 27),  
 (11, 'Arjun JAITLEY', 'Revenue collections from GST and a higher growth trajectory', 'Female', 'Punjab National Bank scandal', 29),  
 (12, 'Yogi ADITYANATH', 'Despite the massive setback in the Gorakhpur and Phulpur Lok Sabha', 'Female', 'Deputy Chief Minister Keshav Prasad Maurya', 25),  
 (13, 'Mukesh Ambani', 're-entry into the telecom business through Jio', 'Female', 'world’s richest puts', 26),  
 (14, 'Rahul Gandhi', 'Gandhi has positioned himself as a challenger to PM Modi', 'Male', 'Congress chief', 30),  
 (15, 'NITIN GADKARI', 'the Delhi-Meerut Expressway', 'Female', 'Motor Vehicles Bill', 22),  
 (16, 'MAYAVATI', ' Samajwadi Party’s, 9 MLAs in the 403-member UP Assembly', 'Male', 'BSP, in the bypolls', 35),  
 (17, 'Akhilesh Yadav', 'support for SP candidates in return for support in the Rajya Sabha', 'Male', ' BSP chief Mayawati to formally', 21),  
 (18, 'Lalu Prashad', 'Lalu now in jail, Tejashwi has stepped up, shouldering charge of the party', 'Female', 'politician', 23),  
 (19, 'Virat Kohli's', 'World Top 1st Ranking in Cricket Worlds', 'Male', 'Cricketer', 28);  

Step 2 : Main HTML interface View Files

index.php

Read Also:  jQuery Form Validator Script

jquery Ajax Loaded Bootstrap Modal with PHP & MySQL

<?php  
 $db_connect = mysqli_connect("localhost", "root", "[email protected]", "leaders");  
 $query = "SELECT * FROM leader";  
 $result = mysqli_query($db_connect, $query);  
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Pakainfo.com Web Tutorial | Bootstrap Modal with Dynamic MySQL Data using Ajax and PHP Mysqli</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>  
           <hr /><br />  
           <div class="container" style="width:700px;">  
                <h3 align="center">Bootstrap Modal with Dynamic MySQL Data using Ajax & PHP - Pakainfo.com</h3>  
                <hr />  
                <div class="table-responsive">  
                     <table class="table table-bordered">  
                          <tr>  
                               <th width="70%">Leader Name</th>  
                               <th width="30%">View</th>  
                          </tr>  
                          <?php  
                          while($dataleaders = mysqli_fetch_array($result))  
                          {  
                          ?>  
                          <tr>  
                               <td><?php echo $dataleaders["name"]; ?></td>  
                               <td><input type="button" name="view" value="view" id="<?php echo $dataleaders["id"]; ?>" class="btn btn-info btn-xs Leader_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">×</button>  
                     <h4 class="modal-title">Leader Details</h4>  
                </div>  
                <div class="modal-body" id="leader_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(){  
      $('.Leader_data').click(function(){  
           var leader_id = $(this).attr("id");  
           $.ajax({  
                url:"select.php",  
                method:"post",  
                data:{leader_id:leader_id},  
                success:function(data){  
                     $('#leader_detail').html(data);  
                     $('#dataModal').modal("show");  
                }  
           });  
      });  
 });  
 </script>

Step 3 : PHP Get Dynamic MySQL Data

select.php

<?php  
 if(isset($_POST["leader_id"]))  
 {  
      $results = '';  
      $db_connect = mysqli_connect("localhost", "root", "[email protected]", "leaders");  
      $query = "SELECT * FROM leader WHERE id = '".$_POST["leader_id"]."'";  
      $result = mysqli_query($db_connect, $query);  
      $results .= '  
      <div class="table-responsive">  
           <table class="table table-bordered">';  
      while($dataleaders = mysqli_fetch_array($result))  
      {  
           $results .= '  
                <tr>  
                     <td width="30%"><label>Leader Name</label></td>  
                     <td width="70%">'.$dataleaders["name"].'</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Leader Types</label></td>  
                     <td width="70%">'.$dataleaders["person_types"].'</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Gender of Leader</label></td>  
                     <td width="70%">'.$dataleaders["gender"].'</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Leader Designation</label></td>  
                     <td width="70%">'.$dataleaders["designation"].'</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Age of Leader</label></td>  
                     <td width="70%">'.$dataleaders["age"].' Year</td>  
                </tr>  
                ';  
      }  
      $results .= "</table></div>";  
      echo $results;  
 }  
 ?>

Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  Laravel 5.8 Multiple Images Upload

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about PHP Ajax Display Dynamic MySQL Data in Bootstrap Modal.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.