Bootstrap Modal with AJAX crud data from MySQL

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.

bs04

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 )

bs02

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>
<html lang=”en”>
<head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Using Bootstrap modal</title>
    <!– Bootstrap Core CSS –>
    <link href=”../css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<form method=”post” action=”processresume.php” role=”form”>
<div class=”modal-body”>
<div class=”form-group”>
<label for=”name”>ID
<input type=”text” id=”id” name=”id” value=”<?php echo $events[‘id’];?>” readonly=”true”/>
</label>
</div>
<div class=”form-group”>
<label for=”name”>Events Name
<input type=”text” id=”eventname” name=”eventname” value=”<?php echo $events[‘eventname’];?>” />
</label>
</div>
<div class=”form-group”>
<label>Synopsis
<input type=”text” id=”job” name=”synopsis” value=”<?php echo $events[‘synopsis’];?>” />
</label>
</div>

 

</div>
<div class=”modal-footer”>
<input type=”submit” class=”btn btn-primary” name=”submit” value=”Update” />&nbsp;
<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,

extradrmtech

Since 30 years I work on Database Architecture and data migration protocols. I am also a consultant in Web content management solutions and medias protecting solutions. I am experienced web-developer with over 10 years developing PHP/MySQL, C#, VB.Net applications ranging from simple web sites to extensive web-based business applications. Besides my work, I like to work freelance only on some wordpress projects because it is relaxing and delightful CMS for me. When not working, I like to dance salsa and swing and to have fun with my little family.

You may also like...