Display MySQL Data In A Modal On Button Click Using Ajax Jquery PHP

In this tutorial, we will learn how to display MySQL data in a bootstrap modal on button click using ajax jQuery PHP. It seems very unprofessional while redirecting to another web page just to view some information. To simplify this problem, we will use a bootstrap modal which looks very user-friendly.

After clicking the button,

Below are some of the proven steps to be followed

1. Create a table in your database.

CREATE TABLE student (
id int(10) unsigned NOT NULL AUTO_INCREMENT,
student_name varchar(225) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
phone_no varchar(225) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
age int(20) DEFAULT NULL,
date_of_birth date DEFAULT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

2. Fetch the table data on a web page in a tabular format with the help of a PHP script as shown below.

3. Create a button in an extra column of the table and include the row id from the database as shown below

<td><button type = “button” class = “btn btn-info btn-sm inv” data-toggle=”modal” data-target=”#modaldata” id=”<?php echo $value[‘id’];?>”>View Details</button></td>

4. Pass the id from button to bootstrap modal through ajax request with the help of jQuery.

5. Send the ajax request to MySQL database and get the response using “JSON” as shown below.

6. Include the response using the field id or text id of the bootstrap modal.

How to send the ajax request to the MySQL database

In order to send the ajax request to the MySQL database, we call the ajax function using jquery and pass the following parameters inside the ajax function.

• URL (Data are passed via this URL)
• type (This is a request type). It can be GET or POST.
• data (This is the place where the button id is placed or any other data from the request).
• dataType (The default dataType is “JSON”). We can get the response from the MySQL database with the help of JSON using the below function in PHP script.

Also, Read, Dropdown search box jquery example with select2.min.js

Complete Code:-

Note:-

Download the bootstrap CSS and js files from google and include the path of the files in the href attribute of link tag and src attribute of the script tag respectively as shown below.

<link rel="stylesheet" href="bootstrap.css" crossorigin="anonymous">

<!-- Optional theme -->

<link rel="stylesheet" href="bootstrap-theme.css" crossorigin="anonymous">

<script src="jquery-3.2.1.min.js"></script>

<script src="bootstrap.min.js"></script>

Also Read, How to export MySQL table data into excel using jQuery

Conclusion:- I hope this article will help you to display MySQL data in a modal on button click.