Sign up with your email address to be the first to know about new products, VIP offers, blog features & more.

 




How to load MySQL data in Bootstrap Modal Body using AJAX

This article was written when I was doing my minor project back in 2015, but wait I have updated this article with the support of new PHP 7 and MySQLi syntax. You’ll find me using PHP, Bootstrap (not the latest but process is same on new Bootstrap 4 as well), and MySQLi with some flavor of AJAX in this article.  On my project I was building a dashboard to show all data in a table by importing data from MySQL database using PHP, where I also added an Edit button at the end of each row that opens up a Modal box, displaying and allowing the admin to alter information and update the database.

So, in this tutorial I will be showing you the best way of Using Bootstrap Modal with AJAX to import data from MySQL database. Go through this tutorial to learn How to load MySQL data in Bootstrap Modal Body using AJAX.

Skills required:

  1. HTML
  2. PHP Basics
  3. Bootstrap
  4. Ajax

For this tutorial we’ll be creating three php files

conn.php We’ll be using this file to store PHP script to connect to Database.

index.php This file will show all data imported from MySQL database on the HTML table with a button edit to give an option to edit the particular row of data.

editdata.php This file will have the form that is to be shown on the modal while user clicks on edit button on the table.

This will be a step by step guide on How to load MySQL data in Bootstrap Modal Body using AJAX, and also include other extra edits you need to make. If you think you are just looking for code then you can skip tutorial and fork this project on Github to try on your own. Remember, more stars on this GitHub Project motivates me to write more.

Creating simple MySQL database table

Lets begin by creating MySQL table to store member details, and insert some example data onto that table.

Goto your mysql from terminal using mysql -u root -p   and enter password if any.

Create a database member

create database member;

Create table details

Creating bootstrap table to show data from MySQL database

Lets create index.php file to show data on tabular format from MySQL database. As we are using bootstrap classes well also be linking bootstrap.min.css file on our head section.

On your index.php file add this code to show HTML table using bootstrap.

 

This will create a table just like this:

Bootstrap Table
Bootstrap Table

Now lets show data from MySQL Database table onto the HTML table we just created, for that we’ll need to add some php to our code.

First we’ll have to connect to our local server and select the database, for that we’ll have to add the following script to the conn.php file. Now when including it to other HTML documents, it is always a best practice to require conn.php at the top of html document.

Now that we are connected to our database, back in our index.php we can include conn.php and execute some queries to select data from our database tables. For selecting data from table add this code after our connection code.

So, we are left to show data on to the table, for that we’ll be using while loop to fetch data from table and echo data to the <td> section of the table.

We see our table has been updated with the new data from the database.

Bootstrap Table with data from MySQL
Bootstrap Table with data from MySQL

Creating Bootstrap Modal Box

Let’s add a button on each row, which will trigger modal with the sn from database table to the modal data. New code inside the Loop will now be like this.

Remember to add a new blank <th></th> . We can place modal div on any place of the HTML Body section, it is a best practice to put it just after the body tag, paste this code just after the body tag.

On the above modal code I have created a div with class dash this will work as a container later on the tutorial, all other class is taken from bootstrap itself.

Load MySQL data in Bootstrap Modal Body using AJAX

Now to send that value of sn to modal form on editdata.php, which will be different for each row of the table and will help to extract the data from database. We’ll be using AJAX with to the Bootstrap Modal JavaScript. For this I am adding javascript references to online jQuery and Bootstrap CDN. Add this code before the ending of body section in your index.php file.

This is all to be done in index.php file. Now in editdata.php file we’ll fetch data from MySQL database which matches the sn that is sent as id from index.php modal triggering button. In this way, we’ll show data on the form fields so that it can be modified.

Creating HTML form to Import and Update data on MySQL Database

To get field data for form and load MySQL data in Bootstrap Modal Body using AJAX, we’ll match the id to sn of the database by making an query:

Now, we’ll put values to the form fields, here’s code for editdata.php file.

Note: Here you can see two classes of bootstrap modal,  modal-body and  modal-footer this divs are kept here so that it will be rendered nicely while loading modal on webpage.

How to load MySQL data in Bootstrap Modal Body using AJAX

So in this tutorial Using Bootstrap Modal with AJAX to import data from MySQL we learnt How to load MySQL data in Bootstrap Modal Body using AJAX and Update it on the same page.

Fork and Star the Project on Github

 

Thank you for your love.
share
1 Response

What do you think?

Your email address will not be published. Required fields are marked *

%d bloggers like this: