How to pass data to bootstrap modal and show dynamic data in PHP and Ajax

You can display dynamic data in a Bootstrap modal by passing a parameter to the modal and fetching data from MySQL database. Using PHP, MySQL and Ajax you can show dynamic data in a Bootstrap modal.

In this topic, I will develop an application to show how you can display data in a modal from database. There could be cases where you may NOT want to show descriptive information on the page itself. Instead, you want the user click on a link and view the descriptive data in a modal. See below code snippet:

Here, if the user clicks on "View Details", using "data-id", course_id is being sent to the modal. Using Ajax, we can get details for the course (like description, price etc.) and display in the modal.

dynamic content modal via ajax with jqueryAssumption

  1. You must have basic knowledge of HTML, CSS, JavaScript/jQuery and PHP.
  2. You must have basic understanding of Ajax. You can read below topics for more details:
    1. How to install xampp for Windows with setup for PHP development
    2. How to write PHP code with examples for beginners
    3. How to build a simple CRUD application in PHP and MySQL

How to Load Dynamic Content in Bootstrap ModalFolders and Files

Below is a screenshot of the folder structure and files I am using:

How to pass dynamic data in bootstrap modal

I have created a folder named 'courses' under 'xampp/htdocs' as I am using XAMPP. If you are using WAMP, create 'courses' folder under 'www'.

  1. Folder 'cfg' - In this folder I have kept dbconnect.php which is used to connect to the MySQL database.
  2. Folder 'css' - My custom stylesheet is in this folder
  3. Folder 'js' - In this folder I have my custom JavaScript file which has Ajax script in it to display the details of a course in a modal.
  4. index.php displays a list of courses with details such as course name, price and description of courses etc. But user has to click on "View Details" to see the description of courses.
  5. get_details.php - It is the PHP program executed as Ajax request to get details of the courses from database.

Below is the screenshot of output displayed by index.php

How do you make a modal dynamic

In the above screen, you can see list of courses are displayed, by clicking on the "View Details" link, user can see detail description of a course.

Step 1 - Create a MySQL table for the courses

Let us create a table named 'training_courses' in MySQL database. This table will have course details, like course name, price etc. I have a database called 'demo'. So this table will be created in demo database. If you have an existing database other than demo you can also use it. Just make sure same table does not exist already. Table structure is given below:

Table: training_courses

This table stores details of all training courses.

how to open modal using ajax

Table has 4 columns.

  1. course_id - It is the unique id of the course, primary key and auto incremented
  2. course_name - Name of the course
  3. price - Price of the course
  4. course_details - Detail description of the course
Create table script with data for this table is given below, you can use this code to create the table. You can also download and get the scripts by clicking on Download button given later in this topic.

training_courses.sql

After you create the table, verify if table structure is same as above and also verify courses are inserted in the table as below:

display synamic data in a modal in php

Step 2 - Connect to MySQL database (dbconnect.php)

Use below script to connect to the database. Note that we have this database connection php program in 'cfg' folder. This is written once and used in every program where database connection is needed. This will be easy for maintenance and also will enable reusability of the code.

dbconnect.php

I am using mysqli_connect() function which needs 4 parameters.

  1. server - in our case it is localhost
  2. userid - we are using root user
  3. password - no password for user root
  4. database name - demo in our case.

If connection is successful then it will return true and false otherwise. We will include this dbconnect.php in other php programs so that we do not need to write it again in the program. For detail database connection understanding please read topic How to Connect to MySQL database in PHP using mysqli_connect.

Step 3 - Display a list of courses (index.php)

Using index.php, a list of courses with links to view detail description of each course will be displayed. This is supposed to be very simple. All we need to do is select the rows from training_courses table using a select statement, then fetch them in a loop and display in a HTML table.

Below is the list of courses displayed by index.php

onclick popup modal jquery

It is a simple html table where I am displaying details of each course in a for loop after fetching from the database.

Display courses

Let's see the code for displaying courses in a table

Look at the table data for the last column of the table which is "Course Details". Here a modal is called (this modal is defined later). A parameter which is course_id is sent to the modal using data-id attribute. This id will be accessed by JavaScript function to run Ajax. Now let's define the modal.

The Modal

I have used Bootstrap modal here which has header, body and footer. See the code below:

Note that modal-body is empty now, using Ajax we will display the detail in modal body. When user clicks on "View Details" Ajax script will display the content here.

Below is the full index.php

index.php

Step 4 - Write Ajax script for modal display (modal_scripts.js)

Script in modal_script.js takes the parameter value sent to the modal and queries in the database to get the details of the course by making an Ajax call. Once details are received as Ajax response, it displays the data in the modal. Let's see the code below:

modal_scripts.js

Parameters of Ajax call are:

  1. url: get_details.php - request call to the php program which gets details of the course from database.
  2. type: post - Post method is used
  3. data: {id:id} - course id sent to the request
  4. dataType: text - output of Ajax call is text only
  5. success: When Ajax successfully gets response, we write the output of the get_details.php in the modal. In Line 10 details are displayed in the modal-body.
In case of any error we just need to print the error in the modal

Now, let us look at the php code in get_details.php to get course detail. This program simply takes the course_id, selects data from training_course table for that course_id and displays course name, course details and price. The output will be given back to Ajax as response and will be displayed in the modal finally.

Check below code form get_details.php

get_details.php

Step 5 - Add CSS (style.css)

Let us add below styles. I have already added style.css in index.php

style.css

These are simple styles. You can always add or change to make the screen look better. Keep this style.css file in your css folder.

display dynamic data in modal in phpTest the Application

Make sure in your XAMPP control panel Apache and MySQL services are running. Open the browser and run localhost/courses. You will see the home page displayed as below:

display data in modal jquery

You can see the course details are displayed. Click on "View Details" of any course, you should see the modal opened with the course details and price displayed in it. See below when I clicked on PHP course:

How to show dynamic data in popup with jQuery

Hope you could understand all the steps and you could test it successfully.

bootstrap modalImportant Note

  1. This was just an example to show how you can display details in a modal by fetching data from database using Ajax. Field names and details used here are just to simplify the example.
  2. I have used Bootstrap Modal which is very easy and simple to use. I have also used font-awesome library from CDN. This is used to display "$" sign. If you do not want to display the sign, you can remove font-awesome library.

download php code to display details in Modal dynamically in PHP and AjaxDownload Source Code

I have put all codes in a zip file. You can download it by clicking on the Download button below. You do not need to register yourself to download it. You can directly use the code or you can modify them as per your requirements.

Display data in bootstrap Modal dynamically in PHP and AjaxConclusion

In this example I have showed you how you can display dynamic data in a modal using Ajax. This was just an example to show details in modal after fetching data from database. You can use it anywhere in your project for similar requirement.

I have tried to explain the topic in detail as far as possible for your easy understanding. Hope it will be useful for you.