Load dynamic content in Bootstrap Modal with AJAX, PHP and MySQL

by Clue Mediator · February 10, 2021

Today, we’ll explain to you how to load dynamic content in Bootstrap Modal with AJAX, PHP and MySQL.

The model is used to display a popup window or dialog box on the current web page. It is used for display form, image, lightboxes, notifications, information, terms and conditions etc. Implementing the Bootstrap popup is very easy because no third party jQuery plugin is required if you use Bootstrap in your web application.

In the previous article, we have learned Create a Modal Popup using jQuery without bootstrap.

Demo Example

Here, we will show the customers with the details button in the table. When the button is clicked fetch all customer’s details from the database and will display in the popup.

Output - Load dynamic content in Bootstrap Modal with AJAX, PHP and MySQL - Clue Mediator — Output – Load dynamic content in Bootstrap Modal with AJAX, PHP and MySQL – Clue Mediator

Steps to load dynamic content in bootstrap popup

Create database
Database connection
Create HTML using Bootstrap
Write jQuery script to open popup
PHP code to load data in the popup
Output

File Structure

load-dynamic-content-bootstrap-popup-php
- db_config.php
- get_data.php
- index.php

1. Create database

First, we will create a table named customers in the demo database. Run the following script to create a table with dummy records in the database.

# Create orders table
CREATE TABLE `customers` (
customer_id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
customer_name varchar(255) NOT NULL,
customer_email varchar(255) NOT NULL,
customer_contact varchar(255) NOT NULL,
country varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

# Inserting data in the posts table
INSERT INTO `customers` (`customer_id`, `customer_name`, `customer_email`, `customer_contact`, `country`) VALUES
(1, 'John Marthin', 'jhon.marthin@gmail.com', '9999999992', 'Canada'),
(2, 'Denny vyanke', 'denny.vyanke@gmail.com', '9999999993', 'London'),
(3, 'Aiden Owen', 'aiden.owen@gmail.com', '9999999994', 'United State'),
(4, 'Levi Marthin', 'levi.marthin@gmail.com', '9999999995', 'Canada'),
(5, 'Joshua Denny', 'joshua.denny@gmail.com', '9999999996', 'London'),
(6, 'Lincoln Ryan', 'lincoin.ryan@gmail.com', '9999999997', 'United State'),
(7, 'Jaxon mateo', 'jaxon.mateo@gmail.com', '9999999998', 'Canada'),
(8, 'Isaiah caleb', 'isaiah.caleb@gmail.com', '9999999999', 'London');

# Create orders table

CREATE TABLE `customers` (

customer_id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,

customer_name varchar(255) NOT NULL,

customer_email varchar(255) NOT NULL,

customer_contact varchar(255) NOT NULL,

country varchar(255) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

# Inserting data in the posts table

INSERT INTO `customers` (`customer_id`, `customer_name`, `customer_email`, `customer_contact`, `country`) VALUES

(1, 'John Marthin', '[email protected]', '9999999992', 'Canada'),

(2, 'Denny vyanke', '[email protected]', '9999999993', 'London'),

(3, 'Aiden Owen', '[email protected]', '9999999994', 'United State'),

(4, 'Levi Marthin', '[email protected]', '9999999995', 'Canada'),

(5, 'Joshua Denny', '[email protected]', '9999999996', 'London'),

(6, 'Lincoln Ryan', '[email protected]', '9999999997', 'United State'),

(7, 'Jaxon mateo', '[email protected]', '9999999998', 'Canada'),

(8, 'Isaiah caleb', '[email protected]', '9999999999', 'London');

2. Database connection

We have to create a db_config.php file and add the following code to connect the database.

db_config.php

<?php
	$dbhost = "localhost";
	$dbuser = "root";
	$dbpass = "";
	$db = "demo";
	$con = mysqli_connect($dbhost, $dbuser, $dbpass , $db) or die($con);
?>

<?php

$dbhost = "localhost";

$dbuser = "root";

$dbpass = "";

$db = "demo";

$con = mysqli_connect($dbhost, $dbuser, $dbpass , $db) or die($con);

3. Create HTML using Bootstrap

Let’s create an HTML in the index.php file to list out the customer data in the table using bootstrap library.

On this page, when the Details button is clicked, the customer_id will be sent to the get_data.php file via AJAX request. The PHP script will retrieve the records from the database as per request id and return an HTML to load dynamically into the modal window.

index.php

<?php
include("db_config.php");
?>

<!DOCTYPE html>
<html>

<head>
  <title>Dynamically load content in Bootstrap Modal with AJAX, PHP MySQL - Clue Mediator</title>
  <!-- CSS -->
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
  <!-- Script -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js' type='text/javascript'></script>
</head>

<body>
  <div class="container">
    <h5 class="mt-3 mb-3">Dynamically load content in Bootstrap Modal with AJAX, PHP MySQL - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h5>
    <table class="table table-bordered table-sm">
      <thead class="thead-dark">
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <?php
        $query = "select * from customers";
        $result = mysqli_query($con, $query);
        while($row = mysqli_fetch_array($result)){
          $id = $row['customer_id'];
          $name = $row['customer_name'];
          $email = $row['customer_email'];

          echo "<tr>";
          echo "<td>".$name."</td>";
          echo "<td>".$email."</td>";
          echo "<td><button data-id='".$id."' class='btn btn-info btn-sm btn-popup'>Details</button></td>";
          echo "</tr>";
        }
        ?>
      </tbody>
    </table>

    <!-- Modal -->
    <div class="modal fade" id="custModal" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Customer Details</h4>
            <button type="button" class="close" data-dismiss="modal">×</button>
          </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>

  </div>

</body>

</html>

<?php

include("db_config.php");

<!DOCTYPE html>

<html>

<head>

<title>Dynamically load content in Bootstrap Modal with AJAX, PHP MySQL - Clue Mediator</title>

</head>

<body>

<h5 class="mt-3 mb-3">Dynamically load content in Bootstrap Modal with AJAX, PHP MySQL - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h5>

<tr>

<th>Email</th>

</tr>

</thead>

<tbody>

<?php

$query = "select * from customers";

$result = mysqli_query($con, $query);

while($row = mysqli_fetch_array($result)){

$id = $row['customer_id'];

$name = $row['customer_name'];

$email = $row['customer_email'];

echo "<tr>";

echo "<td>".$name."</td>";

echo "<td>".$email."</td>";

echo "<td><button data-id='".$id."' class='btn btn-info btn-sm btn-popup'>Details</button></td>";

echo "</tr>";

}

</tbody>

</table>

<h4 class="modal-title">Customer Details</h4>

</div>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

</body>

</html>

4. Write jQuery script to open popup

Let’s add the following code in the index.php file that sends the customer id to the server-side script via Ajax request when the Details button is clicked.

Get the response from the get_data.php file and display the HTML data to the div element with class modal-body.

index.php

<?php
include("db_config.php");
?>

<!DOCTYPE html>
<html>

<head>
  <title>Dynamically load content in Bootstrap Modal with AJAX, PHP MySQL - Clue Mediator</title>
  ...
  ...
</head>

<body>
  <div class="container">
    ...
    ...
  </div>

  <script type="text/javascript">
    $(document).ready(function () {

      $('.btn-popup').click(function () {
        var custId = $(this).data('id');
        $.ajax({
          url: 'get_data.php',
          type: 'post',
          data: { custId: custId },
          success: function (response) {
            $('.modal-body').html(response);
            $('#custModal').modal('show');
          }
        });
      });

    });
  </script>

</body>

</html>

<?php

include("db_config.php");

<!DOCTYPE html>

<html>

<head>

<title>Dynamically load content in Bootstrap Modal with AJAX, PHP MySQL - Clue Mediator</title>

...

</head>

<body>

...

</div>

$(document).ready(function () {

$('.btn-popup').click(function () {

var custId = $(this).data('id');

$.ajax({

url: 'get_data.php',

type: 'post',

data: { custId: custId },

success: function (response) {

$('.modal-body').html(response);

$('#custModal').modal('show');

}

});

</script>

</body>

</html>

5. PHP code to load data in the popup

At last, we will create a file named get_data.php. The Ajax request is sent to this PHP file and then fetches the customer record from the database based on the request id (custId).

get_data.php

<?php
include('db_config.php');

if(isset($_POST['custId'])){
	$id = $_POST['custId'];

	$sql = "select * from customers where customer_id=".$id;
	$result = mysqli_query($con,$sql);

	$response = "<table border='0' width='100%'>";
	while( $row = mysqli_fetch_array($result) ){
		$id = $row['customer_id'];
		$name = $row['customer_name'];
		$email = $row['customer_email'];
		$contact = $row['customer_contact'];
		$country = $row['country'];

		$response .= "<tr>";
		$response .= "<td>Name : </td><td>".$name."</td>";
		$response .= "</tr>";

		$response .= "<tr>";
		$response .= "<td>Email : </td><td>".$email."</td>";
		$response .= "</tr>";

		$response .= "<tr>";
		$response .= "<td>Contact : </td><td>".$contact."</td>";
		$response .= "</tr>";

		$response .= "<tr>";
		$response .= "<td>Country : </td><td>".$country."</td>";
		$response .= "</tr>";
	}
	$response .= "</table>";

	echo $response;
	exit;
}
?>

<?php

include('db_config.php');

if(isset($_POST['custId'])){

$id = $_POST['custId'];

$sql = "select * from customers where customer_id=".$id;

$result = mysqli_query($con,$sql);

$response = "<table border='0' width='100%'>";

while( $row = mysqli_fetch_array($result) ){

$id = $row['customer_id'];

$name = $row['customer_name'];

$email = $row['customer_email'];

$contact = $row['customer_contact'];

$country = $row['country'];

$response .= "<tr>";

$response .= "<td>Name : </td><td>".$name."</td>";

$response .= "</tr>";

$response .= "<tr>";

$response .= "<td>Email : </td><td>".$email."</td>";

$response .= "</tr>";

$response .= "<tr>";

$response .= "<td>Contact : </td><td>".$contact."</td>";

$response .= "</tr>";

$response .= "<tr>";

$response .= "<td>Country : </td><td>".$country."</td>";

$response .= "</tr>";

}

$response .= "</table>";

echo $response;

exit;

}

6. Output

Run the project and check the output in the browser.

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository

If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Join us

Load dynamic content in Bootstrap Modal with AJAX, PHP and MySQL

Demo Example

Steps to load dynamic content in bootstrap popup

File Structure

1. Create database

2. Database connection

3. Create HTML using Bootstrap

4. Write jQuery script to open popup

5. PHP code to load data in the popup

6. Output

Demo & Source Code

You may also like...

How to convert a date format in PHP

How to generate random Boolean values in PHP

How to Remove Special Characters from a String (Keeping Spaces) in PHP

How to convert PHP array to JavaScript array

Enable CORS for multiple domains in PHP

Set the cron job to run a PHP script in cPanel

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Tags

Join us