Clue Mediator

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

📅February 10, 2021
🗁PHP

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

  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

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', '[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);
?-->

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");
?-->





  <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>



  <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>


          echo "";
          echo "";
          echo "";
          echo "";
          echo "";
        }
        ?>
      <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'];<p--><tr><td>".$name."</td><td>".$email."</td><td><button data-id="".$id."" class="btn btn-info btn-sm btn-popup">Details</button></td></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>

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");
?-->





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



  <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>

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');<p-->

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

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

	$response = "";
	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 .= "";
		$response .= "";
		$response .= "";

		$response .= "";
		$response .= "";
		$response .= "";

		$response .= "";
		$response .= "";
		$response .= "";

		$response .= "";
		$response .= "";
		$response .= "";
	}
	$response .= "<table border="0" width="100%"><tbody><tr><td>Name : </td><td>".$name."</td></tr><tr><td>Email : </td><td>".$email."</td></tr><tr><td>Contact : </td><td>".$contact."</td></tr><tr><td>Country : </td><td>".$country."</td></tr></tbody></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

AjaxBootstrapMySQLPopup

Categories

Tags

React ExampleReact HooksReact PackageArrayStringReact AdvancedDateTimeAPISetupImagejQueryFile or DirectoryTableReact BeginnerPickerRegular ExpressionURLErrorDropdownAG Grid