Do you know Inline Update data is a one type of Web Development feature in which We can change Web page content on the same page without going to another page. This Inline Editing feature which cut the edit data without navigate edit action.
With Inline updation of data feature, The web developers do not design more UI for editing of dynamic MySQL table data.
In this tutorial, we will not use contenteditable attribute but here we will use dark-editable JavaScript library. This dark-editable library is a new rewritten version of the x-editable jQuery plugin or it an alternative of x-editable plugin which has been enables dynamic inline editing of data on the web page and this is purely written in JavaScript.
This dark-editable library is has been support Bootstrap 5 library and moment.js for datetime data handling. If you want to use this dark-editable editable library in your web application project, then you have to required following library in your working folder.
- Bootstrap 5
- Propper
- Moment.js
If you have use dark-editable library then this library has been support following input type for inline editing of data without refresh of web page.
- text
- textarea
- select
- date
- datetime
- password
- url
- tel
- number
- range
- time
With the help of dark-editable JavaScript library we can easily inline edit or update DIV content or tabular data. So for edit data, we have to click on content which we want to edit and after we have done edit then it will send update or edit data requests to PHP via Ajax for perform backend update MySQL data operation. This Inline Edit or In-place Edit is a very nice and required feature in the Web Development.
Let us create an example in which we will implement inline editing or updation of data using dark-editable library and how we can update or edit data at backend using this dark-editable library of in-place editing of data.
Source Code
MySQL Table
In this tutorial, first we want some dynamice data in our MySQL database. So for create table with some data, we have to run following .sql script which will create tbl_sample table with data.
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_sample`
--
CREATE TABLE `tbl_sample` (
`id` int(11) NOT NULL,
`first_name` varchar(250) NOT NULL,
`last_name` varchar(250) NOT NULL,
`gender` enum('Male','Female') NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tbl_sample`
--
INSERT INTO `tbl_sample` (`id`, `first_name`, `last_name`, `gender`) VALUES
(1, 'John', 'Smith', 'Male'),
(2, 'Peter', 'Parker', 'Male'),
(4, 'Donna', 'Huber', 'Female'),
(5, 'Anastasia', 'Peterson', 'Female'),
(6, 'Ollen', 'Donald', 'Male'),
(10, 'Joseph', 'Stein', 'Male'),
(11, 'Wilson', 'Parker', 'Female'),
(12, 'Lillie', 'Kirst', 'Female'),
(13, 'James', 'Whitchurch', 'Male'),
(14, 'Timothy', 'Brewer', 'Male'),
(16, 'Sally', 'Martin', 'Male'),
(17, 'Allison', 'Pinkston', 'Male'),
(18, 'Karen', 'Davis', 'Female'),
(19, 'Jaclyn', 'Rocco', 'Male'),
(20, 'Pamela', 'Boyter', 'Male'),
(21, 'Anthony', 'Alaniz', 'Male'),
(22, 'Myrtle', 'Stiltner', 'Male'),
(23, 'Gary', 'Hernandez', 'Male'),
(24, 'Fred', 'Smith', 'Male'),
(25, 'Ronald', 'John', 'Male'),
(26, 'Stephen', 'Mohamed', 'Male'),
(28, 'Michael', 'Dyer', 'Male'),
(29, 'Betty', 'Beam', 'Male'),
(30, 'Anny', 'Peterson', 'Female'),
(31, 'Peter', 'Stodola', 'Male'),
(32, 'Rose', 'Johnson', 'Female');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_sample`
--
ALTER TABLE `tbl_sample`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_sample`
--
ALTER TABLE `tbl_sample`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=36;
database_connection.php
This file we will use for make MySQL database connection.
<?php
//database_connection.php
$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");
?>
index.php
In this file we have included Bootstrap 5 library, dark-editable library and Moment.js library link.
In this file first we have fetch data from tbl_sample and display on web page in HTML table format.
For enable dark-editable inline editing of data, first we have to add class attribute and id attribute in place of content.
After this for initialize dark-editable library on any content we have to use DarkEditable() method. So this method will enable inplace editing feature.
Next for send data to PHP script via Ajax, we have to add data-type, data-pk, data-url and data-name attribute. So this attribute value will be send to PHP script via Ajax request.
<?php
//index.php
include 'database_connection.php';
$query = "
SELECT * FROM tbl_sample
ORDER BY id DESC
";
$result = $connect->query($query);
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="library/bootstrap-5/bootstrap.min.css" rel="stylesheet" />
<script src="library/bootstrap-5/bootstrap.bundle.min.js"></script>
<script src="library/moment.js"></script>
<link rel="stylesheet" href="library/dark-editable/dark-editable.css" />
<script src="library/dark-editable/dark-editable.js"></script>
<title>Inline Editing with Bootstrap 5 & Vanilla JavaScript using PHP / How to Load Data in Select2 with Bootstrap 5 using Ajax PHP</title>
</head>
<body>
<div class="container">
<h1 class="mt-5 mb-5 text-center text-primary">Inline Editing using Vanilla JavaScript with PHP MySQL Bootstrap 5</h1>
<div class="card">
<div class="card-header">Data</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
</tr>
<?php
foreach($result as $row)
{
echo '
<tr>
<td><a href="#" class="first_name" id="first_name_'.$row["id"].'" data-type="text" data-pk = "'.$row["id"].'" data-url="process.php" data-name="first_name">'.$row["first_name"].'</a></td>
<td><a href="#" class="last_name" id="last_name_'.$row["id"].'" data-type="text" data-pk="'.$row["id"].'" data-url="process.php" data-name="last_name">'.$row["last_name"].'</a></td>
<td><a href="#" class="gender" id="gender_'.$row["id"].'" data-type="select" data-pk="'.$row["id"].'" data-url="process.php" data-name="gender">'.$row["gender"].'</a></td>
</tr>
';
}
?>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
//For First Name Table Column Data
const first_name = document.getElementsByClassName('first_name');
for(var count = 0; count < first_name.length; count++)
{
const first_name_data = document.getElementById(first_name[count].getAttribute('id'));
const first_name_popover = new DarkEditable(first_name_data);
}
//For Last Name Table Column Data
const last_name = document.getElementsByClassName('last_name');
for(var count = 0; count < last_name.length; count++)
{
const last_name_data = document.getElementById(last_name[count].getAttribute('id'));
const last_name_popover = new DarkEditable(last_name_data);
}
//For Gender Table column Data
const gender = document.getElementsByClassName('gender');
for(var count = 0; count < gender.length; count++)
{
const gender_data = document.getElementById(gender[count].getAttribute("id"));
const gender_popover = new DarkEditable(gender_data, {
source :[
{
value : 'Male',
text : 'Male'
},
{
value : 'Female',
text : 'Female'
}
]
});
}
</script>
process.php
This file has been receive data via Ajax request for update data in MySQL database. This is common dynamic PHP script for all table column data for updation of data.
<?php
//process.php
include 'database_connection.php';
if(isset($_POST["pk"]))
{
$query = "
UPDATE tbl_sample
SET ".$_POST['name']." = '".$_POST["value"]."'
WHERE id = '".$_POST["pk"]."'
";
$connect->query($query);
echo 'done';
}
?>
At the last with the help of this dark-editable library you can implement inline editing of any DIV or table data content without refresh of web page. The one benefits of this library is that when we have make any changes then only it will send ajax request to PHP script.
Additionally Hope you have enjoy this Vanilla JavaScript learning with PHP for live inline editing of data and here you can find complete source of this tutorial also.
