How to dynamically load data and image in a Bootstrap modal using PHP and Ajax

There could be many instances when we want to display information in a modal popup screen. Even sometime we need to display a photo along with some details of the photo in a modal. Presenting the information in this format gives a better user experience.

In this topic I will develop an application to show how you can display an image in a Bootstrap modal along with other details from database using PHP and Ajax dynamically.

display Modal photo in PHP and Ajax

In the above screen, you can see list of users are displayed along with the photos, by clicking on the photo thumbnail, user can view the photo in a modal along with the nameas below:

Show dynamic data on modal popup using php

If user clicks on a photo, using "data-id" attribute, id of the user is sent to a modal and then by running Ajax script, details for the user (name, photo) can be displayed in the modal.

Below is the code snippet of the link used for the photo:

jquery ajax modal popup exampleAssumption

  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

What is the AJAX model in PHPFolders and Files

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

BootstrapModal with Dynamic MySQL Data using Ajax

I have created a folder named 'modal_photo' under 'xampp/htdocs' as I am using XAMPP. If you are using WAMP, create 'modal_photo' 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 photo in a modal.
  4. Folder 'uploads' - I have kept few image files in this folder. This is supposed to be the folder where photos are uploaded. Since I am not showing image upload, so I put some image files in this folder. Same image file names are also in the database table.
  5. index.php displays a list of users like name, email and photo thumbnail. User has to click on a photo thumbnail to see larger size of it along with the name in a modal.
  6. get_user_details.php - It is the PHP program executed as Ajax request to get details of the users from database.

Step 1 - Create a MySQL table for users

Let us create a table named 'user_profile' in MySQL database. This table will have user details, like name, email, photo 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:

image popup on click bootstrap

Table has 4 columns.

  1. id - It is the unique id of a user, primary key and auto incremented
  2. name - Name of the user
  3. email - email of the user
  4. image - Image file name of the photo of the user
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.

user_profile.sql

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

onclick image popup javascript

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; false otherwise. This Boolean value is returned and stored in the $conn variable. 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 users (index.php)

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

Below is the list of courses displayed by index.php

bootstrap modal with image and text

Display users

Let's see the code for displaying user details in a table:

Users are selected from user_profile table and are displayed row by row in a html table. Look at the table data for the last column of the table which is "Photo". Check line 24 above, here a modal is called (this modal is defined later). A parameter which is id of the user is sent to the modal using data-id attribute. This id will be accessed by JavaScript function to run Ajax. This will be explained later. Now let's define the modal.

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 the photo Ajax script will display the content here.

Below is the full code for index.php

index.php

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

Script in modal.js takes the parameter value sent to the modal and using that it queries in the database to get the details of the users 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.js

You can see, an anonymous function is written on onClick event of the photo thumbnail. In line 3, value of the parameter is taken in userId variable. Next, it makes an Ajax call to get data from database. Parameters of Ajax request are:

  1. url: get_user_details.php - request call to the php program which gets details of the users from database.
  2. type: post - Post method is used
  3. data: {UserId:UserId} - User id sent to the request
  4. dataType: text - Response of Ajax call is text only
  5. success: When Ajax successfully gets the response, we write the output of the get_user_details.php in the modal. In Line 10 it is written 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_user_details.php to get user details. This program simply takes the user_id, selects data from user_profile table for that user_id and displays photo of the user and user name.

Check below code form get_user_details.php

It is a simple php code, it gets the value of user_id and selects details of the user from user_profile table. Then displays the image and user name in line 8 and 9. This output goes as the response for Ajax and is printed in the modal. I have already explained, it is displayed in the modal in modal.js as below:

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.

show image in popup on clickTest the Application

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

How to show popup on image with jQuery

You can see the user details are displayed. For each user there is a photo thumbnail link at the end. Click on the photo of any user, you should see the modal opened with the photo and name of the user displayed below the photo. See below when I clicked on a photo:

In Bootstrap open Enlarge image in modal - ajax and jQuery

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

display image in modal jqueryImportant Note

  1. I have used Bootstrap Modal which is very easy and simple to use.
  2. I have used minimum styles, as our main focus is to show you how you can write code to display photo synamically in a modal and not the design of the screen how it should look like. There is always a scope to give the screen a better look. You can add your own stylesheet.
  3. In this application it was assumed that photos are already uploaded, we are just viewing the photos here. For enhancement purpose you can add the upload photo and then let the user view it after upload.

Scope of Improvement

Add upload photo section in this application, so that user can view it after upload in the same screen. You can show the upload photo section on the left side and view photo on the right side. Several topics are covered in this website on upload photo with/without using Ajax. Please see the related topics section below.

download php code to display Modal photo 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.

onclick image popup jqueryConclusion

Using modal is a very good option to display information to the user. It gives better user interface. So whenever possible, you can use modal if it is relevant to the requirement for your project. This was just an example to show details in modal dynamically after fetching data from database. You can use it in your project for similar requirement.

Related Topics

Popular Topics