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

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.

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.

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

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.

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 and PDO.

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

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

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:

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

Step 5 - Add CSS (style.css)

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

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.