How to display dynamic data in Bootstrap modal in CodeIgniter 3 with Ajax

If you want to display dynamic data in a bootstrap modal in CodeIgniter, you can do this with the help of Ajax call. In this topic, we will create a simple Codeigniter 3 application to show how you can display data from MySQL database in a modal using Ajax and jQuery.

It will display a list of courses with their details, when user clicks on "view details" link, it makes a ajax call to get data from MySQL database and display data in a modal. The application will be developed using CodeIgniter 3 with Ajax and MySQL.

Step 1 - Create a table in MySQL database for courses

Let us create a table named 'training_courses' in MySQL database. This table will have course details, like course name, price etc. Table structure is given below:

Table: training_courses

This table stores details of all training courses.

display data in modal popup codeigniter

Below are the columns in this table.

  1. course_id - It is 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 for this table are given below; you can use this code to create the table.

training_courses.sql

After you create the table, verify that the table structure is same as above and the rows are inserted in the table. Rows in the table should be as below:

how to display data in modal popup

Before I go to next step, let me show the folder structure I am using. I have created a folder named 'modal' under xampp/htdocs and kept all CodeIgniter folder/files in this folder along with our custom files. So, the root directory is xampp/htdocs/modal.

display data in modal popup using jquery

You can see, we have Controller - CourseController.php, Model - ModelCourse.php and the view (view_course.php) under views folder. Folder 'assets' is created for the purpose of keeping all custom stylesheets, JavaScripts and image files. Here we have css/style.css for our application.

Step 2 - Create the view to display list of courses (view_course.php)

The view displays the list of a courses with links to view detail description of each course. There is a custom css file for the styles. Below is a list of courses displayed.

How do I pass data to modal popup

It is a simple html table where I am displaying details of each course in a for loop. Controller sends the course data to the view and using a for loop each course is displayed. Let's see the code:

application/views/view_course.php

All courses are selected from the table "training_courses" and displayed data row by row in a html table. Look at the table data for the last column which is "Course Details". Here, a modal is called. course_id is passed to the modal as data-id value. This id will be used by JavaScript function to run Ajax.

There is a custom stylesheet used in the views. It is given below:

assets/css/style.css

I just added few simple styles here, you can always add better styles.

Step 3 - Write Ajax Scripts

Ajax script is written in the view itself. It takes the value sent to the modal and using that it queries in the database to get the details of the course by making an Ajax request. Once details are received as Ajax response, it displays the data in the modal. So, this way we are loading dynamic content in bootstrap modal. Let's see the code below:

Parameters of the Ajax request are:

  • url: get_course_details - request call to the controller method get_course_details() of course controller to get details of the course from database.
  • type: post - Post method is used
  • data: {course_id:courseId} - course id sent to the request
  • dataType: text - output of Ajax call is text only
  • success: When Ajax successfully gets response, we write the output (response) from the controller method in the modal.

Step 4 - Write Controller code (CourseController.php)

Our controller class will have an index() method to display the courses and get_course_details() method which is called by Ajax.

Controller method index()

index() method runs a model method get_course() to get all courses and loads the view "view_course" with the course data.

Controller Method get_course_details()

When user clicks on "View Deatils" link for a course, this method is called as an Ajax request with course_id as parameter.

You can see it calls the same model method get_course(), but with a parameter course_id. It returns a single row for a course_id. Then it displays the details of the course along with course name and price. Note that these details of a course are displayed in the modal body in the Ajax Script we already discussed.

Our controller methods are done, next let us see the methods in the model.

Step 5 - Write Model code (ModelCourse.php)

We have seen only one method of the model used in the controller. This is get_course(). So now let's see the code for this method in the model:

application/models/ModelCourse.php

get_course() method has an optional course_id parameter, if course_id has a value, it selects data from training_courses table for the course_id. But if course_id is blank, it selects all courses from the table.

Our views, controller and models are developed. Now we need to do some setup changes before we run the application. Let's do that in next step.

Step 6 - Update Configuration files and Test the Application

Let us now update few setup files before we run the application.

We will update below files in config folder:

How to display data in modal popup in codeigniter

  1. Update autoload.php (application/config/autoload.php)

    I have added 'database' in autoload libraries.

    Also, 'url' are added in helper array.

  2. Update config file (application/config/config.php)

    Set 'base_url' and 'index_page' as below in this file:

  3. Update database setup file (application/config/database.php)

    As I mentioned before, I am using a database named 'demo' in localhost with user 'root' and blank password, so I updated database.php as below:

  4. Update routes file (application/config/routes.php) I updated routes.php for default controller which is CourseController. So, below code is for routes.php:
  5. Update .htaccess (hypertext access) file to remove index.php from the URL

    .htaccess file is used to do configuration changes for a directory. I have kept .htaccess file in my root folder which is xampp/htdocs/modal.

    How to pass data into a bootstrap modal

    Content of .htaccess file is given below:

    Using URL rewriting rule, it redirects all request except those which are not existing files or directories.

Test The Application

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

How to Load Dynamic Content in Bootstrap Modal

You can see the course details are displayed. For each course there is a "View Details" link at the end. Click on "View Details" of any course, you can see the modal opened with the course details and price displayed in it. See below when I clicked on PHP course:

how to open modal popup on button click in php

Our development and testing are done. Hope you could understand all the steps and could test it successfully.

how to get data-id value in modal phpImportant Note

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.

how to get value from modal popup in javascriptDownload Source Code

I have put codes for controller, model and view 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 use the code as is or you can modify them as per your requirements.

php ajax display dynamic mysql data in bootstrap modalConclusion

In this example I have showed you how you can display dynamic data in a bootstrap modal using Ajax in CodeIgniter 3. Using modal is a very good option to display information to the user. It gives better user experience. You can use it anywhere in your project for similar requirement.