Bootstrap Modal with AJAX crud data from MySQL

Published 14/03/2015 · Updated 04/12/2018

I am using PHP, Bootstrap and MySQL with some addition of jQuery and AJAX to make this tutorial. So, I am building a classic list of events with button details to show all data into a table by importing data from MySQL database using PHP, where I have 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.

First component is a div modal (see bootstrap modals for more details) : 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.

Using AJAX with in Bootstrap Modal JavaScript

Now to send that value of id to modal form on processresume.php, which will be different for each row of the table/list and will help to extract the data from database and that is done using AJAX with conjunction to the Modal JavaScript, for using twitter bootstrap modal we’ll need to add two scripting files, bootstrap.js and jquery.js which will also help to add AJAX. Add this code before the ending of body section in your index.php file.

Ajax invoking an sql process when modal windows is showing : we take the parameter from attribute data-* (here data-whatever correspond to the events id extracted from doc->id see below link button )

Let’s add a button on each row from the list, which will trigger modal with the id from database table to the modal data.

echo ‘<p>’ . substr($doc->synopsis,0,100) . ‘<a href=”#” data-whatever=”‘ . $doc->id . ‘” class=”btn-xs btn-success” data-toggle=”modal” data-target=”#basicModal”>Détails</a>’ . ‘…</p>’ ;

Creating HTML form to Import and Update (CRUD) data on MySQL Database

To get field data for form, we’ll match the id to sn of the database by making an query:

$isnkey = $_GET[‘visn’];

Now, we’ll put values to the form fields on the same read value procee file in mode POST, here’s code for processresume.php file.

// if there is any post we update and we come back (redirect) to index.php

if (isset($_POST[‘submit’])) {

$id = $_POST[‘id’];

$eventname = $_POST[‘eventname’];

$synopsis = $_POST[‘synopsis’];

$qryUpt = “UPDATE `events` SET `name` = ‘$name’, `synopsis` = ‘$synopsis’ WHERE `id`=$id”;

mysql_query($qryUpt) or die(mysql_error());

header(“location:index.php”);

}

// Anyway we process the get request of the id for loading

$qryevents = “SELECT * FROM `events` WHERE `id`=’$id'”;

$eventsresult = mysql_query($qryevents) or die(mysql_error());

$events = mysql_fetch_assoc($eventsresult) or die(mysql_error());

<!DOCTYPE html>

<head>

<title>Using Bootstrap modal</title>

<!– Bootstrap Core CSS –>

</head>

<body>

<label for=”name”>ID

<input type=”text” id=”id” name=”id” value=”<?php echo $events[‘id’];?>” readonly=”true”/>

</label>

</div>

<label for=”name”>Events Name

</label>

</div>

<label>Synopsis

</label>

</div>

<button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>

</div>

</form>

</body>

</html>

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.

So in this tutorial Using Bootstrap Modal with AJAX to import data from MySQL we learnt how to use Bootstrap modal with AJAX and PHP to load data from MySQL Database and update it on the same page.

Cheers,

Post Views: 5,174

Bootstrap Modal with AJAX crud data from MySQL

Using AJAX with in Bootstrap Modal JavaScript

Creating HTML form to Import and Update (CRUD) data on MySQL Database

You may also like...

RESTful services with jQuery, PHP and the Slim Framework

Jquery / AJAX Database Sample Calls to mysql