In this tutorial, we Load Dynamic Content in Bootstrap Modal using Ajax. Modal is a popup where we use to shows the content on the same web page. It is a very useful element for displaying HTML content and also display dynamic MySQL data in bootstrap modal.
We create step by step process where we start from creating HTML part also including Bootstrap CDN (Content Delivery Network) links. Steps to creating bootstrap modal which load content dynamically,
- Import the MySQL data to the PHPMyAdmin DB.
- Creating a database connection file.
- Fetch data from the database.
- Creating a Bootstrap modal and including Bootstrap CDN links.
- Load dynamic Content on the Bootstrap modal using Ajax
- Complete Source code
Import the MySQL data to the PHPMyAdmin DB
Here is the MySQL code, copy whole code and paste on SQL tab in PHPMyAdmin,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
CREATE TABLE `employee` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `emp_name` varchar(100) NOT NULL, `salary` varchar(50) NOT NULL, `gender` varchar(10) NOT NULL, `city` varchar(80) NOT NULL, `email` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; INSERT INTO `employee` (`id`, `emp_name`, `salary`, `gender`, `city`, `email`) VALUES (1, 'Bikash', '13000', 'male', 'Kanpur', 'phpcodertech@gmail.com'), (2, 'Vishal', '12800', 'male', 'Pune', 'phpcodertech@gmail.com'), (3, 'Vijay', '5000', 'male', 'Jaipur', 'phpcodertech@gmail.com'), (4, 'Rahul', '2500', 'male', 'Kanpur', 'phpcodertech@gmail.com'); |
Creating a Database Connection File
Here we create connection file for database. From there we load the dynamic data which shows on bootstrap modal.
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "dynamic_modal"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); } |
Fetch Data From the Database
Here we fetch those data which we interested previously on SQL database. And those data populated on Bootstrap modal.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<table id="myTable" border="1"> <thead class="thead-dark"> <tr> <th scope="col">Sr. No.</th> <th scope="col">Name</th> <th scope="col">Email</th> <th scope="col">Action</th> </tr> </thead> <?php $query = "select * from employee"; $result = mysqli_query($con,$query); while($row = mysqli_fetch_array($result)){ $id = $row['id']; $name = $row['emp_name']; $email = $row['email']; ?> <tr> <td><?php echo $id;?></td> <td><?php echo $name;?></td> <td><?php echo $email;?></td> <td><button data-id='<?php echo $id;?>' class='userinfo'>Info</button></td> </tr> <?php } ?> </table> |
Creating a Bootstrap Modal with Including Bootstrap CDN Links
Bootstrap and jQury CDN Links
|
1 2 3 4 |
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' rel='stylesheet' type='text/css'> <script src="https://code.jquery.com/jquery-migrate-3.1.0.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> |
Bootstrap Modal
Creating this bootstrap modal for downplaying dynamic content from MySql database.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- Modal --> <div class="modal fade" id="empModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">User Info</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> |
Load Dynamic Content on the Bootstrap Modal Using Ajax
We use the above button class for calling jQuery AJax function.
|
1 |
<td><button data-id='<?php echo $id;?>' class='userinfo'>Info</button></td> |
Ajax Code to Call External Query File
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script type='text/javascript'> $(document).ready(function(){ $('.userinfo').click(function(){ var userid = $(this).data('id'); // AJAX request $.ajax({ url: 'ajaxfile.php', type: 'post', data: {userid: userid}, success: function(response){ // Add response in Modal body $('.modal-body').html(response); // Display Modal $('#empModal').modal('show'); } }); }); }); </script> |
Complete Code
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<?php $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "dynamic_modal"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); } ?> <!doctype html> <html> <head> <title>Display Dynamic MySQL Data in Bootstrap Modal using Ajax</title> <link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'> <!-- Script --> <script src="https://code.jquery.com/jquery-migrate-3.1.0.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body > <div class="container" > <!-- Modal --> <div class="modal fade" id="empModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">User Info</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <br/> <table id="myTable" border="1"> <thead class="thead-dark"> <tr> <th scope="col">Sr. No.</th> <th scope="col">Name</th> <th scope="col">Email</th> <th scope="col">Action</th> </tr> </thead> <?php $query = "select * from employee"; $result = mysqli_query($con,$query); while($row = mysqli_fetch_array($result)){ $id = $row['id']; $name = $row['emp_name']; $email = $row['email']; ?> <tr> <td><?php echo $id;?></td> <td><?php echo $name;?></td> <td><?php echo $email;?></td> <td><button data-id='<?php echo $id;?>' class='userinfo'>Info</button></td> </tr> <?php } ?> </table> <script type='text/javascript'> $(document).ready(function(){ $('.userinfo').click(function(){ var userid = $(this).data('id'); // AJAX request $.ajax({ url: 'ajaxfile.php', type: 'post', data: {userid: userid}, success: function(response){ // Add response in Modal body $('.modal-body').html(response); // Display Modal $('#empModal').modal('show'); } }); }); }); </script> </div> </body> </html> |
ajaxfile.php
In this file, we create a query for calling data dynamically on modal with OnClick function.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?php $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "dynamic_modal"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); } $userid = $_POST['userid']; $sql = "select * from employee where id=".$userid; $result = mysqli_query($con,$sql); $row = mysqli_fetch_assoc($result); ?> <form role="form" method="POST" action="#" enctype="multipart/form-data"> <div class="form-group"> <label for="category"><span class="glyphicon glyphicon-user"></span> Name </label> <input type="text" class="form-control" name="category" value="<?php echo $row['emp_name'];?>"> <input type="hidden" name="main_id" value="<?php echo $id;?>"> </div> <div class="form-group"> <label for="bname"><span class="glyphicon glyphicon-eye-open"></span> Salary </label> <input type="text" class="form-control" name="bname" value="<?php echo $row['salary'];;?>"> </div> <div class="form-group"> <label for="aname"><span class="glyphicon glyphicon-eye-open"></span> Gender </label> <input type="text" class="form-control" name="aname" value="<?php echo $row['gender'];;?>"> </div> <div class="form-group"> <label for="bookid"><span class="glyphicon glyphicon-eye-open"></span> City </label> <input type="text" class="form-control" name="bookid" value="<?php echo $row['city'];;?>"> </div> <div class="form-group"> <label for="bookid"><span class="glyphicon glyphicon-eye-open"></span> Email </label> <input type="text" class="form-control" name="bookid" value="<?php echo $row['email'];;?>"> </div> </form> <?php exit; ?> |
Complete Source code
Here is complete source code to display bootstrap modal load content dynamically.
Download Complete Code from here,
[sociallocker][wpdm_package id=’1546′] [/sociallocker]
Let me know if any issue. This is the complete code for download.
Also Check:
- Send Mail Attachments with PHP Mail()
- Selection in CSS | CSS ::selection
- How to Integrate Google Translate on website
Happy Coding..!
Was this article helpful?
YesNo
[…] Load Dynamic Content in Bootstrap Modal using Ajax […]
[…] Load Dynamic Content in Bootstrap Modal using Ajax […]
[…] Load Dynamic Content in Bootstrap Modal using Ajax […]
[…] Load Dynamic Content in Bootstrap Modal using Ajax […]