May 13, 2024 | jQuery MySql Javascript Ajax
Hello Dev,
X-editable is a potent jQuery plugin that enables the creation of editable elements on a page using jQuery AJAX. It seamlessly integrates with Bootstrap, jQuery UI, and jQuery. With X-editable, you can make various elements editable, such as text boxes, text areas, selects, dates, and more. Additionally, it offers client-side validation and provides a sleek layout when used with Bootstrap.
In this tutorial, we'll delve into updating records using jQuery AJAX with PHP and MySQL. We'll start by creating a "users" table and displaying its records. Then, we'll leverage the X-editable plugin to modify these records, which might seem complex initially but is truly remarkable.
To accomplish this, you only need to follow a few simple steps. Once completed, you'll achieve the preview as shown below.
To create a responsive menu using HTML, CSS, and jQuery, along with integrating X-editable for inline editing capabilities, follow these steps. This guide combines the concepts of creating a responsive menu and implementing inline editing with X-editable, as described in the provided sources.
Read Also: How To Create a Responsive Menu Using Html, Css and Jquery? Step 1: Set Up Your EnvironmentEnsure you have a basic understanding of HTML, CSS, and jQuery. You'll also need a server environment to run PHP scripts.
Step 2: Create the Database and TableCreate a database named test and a table named users with the following SQL query:
CREATE TABLE `users` ( `id` int(10) UNSIGNED NOT NULL, `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL, `email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL, ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
Add some dummy records to the users table.
Step 3: Configure Database ConnectionCreate a config.php file to store your database connection details:
config.php<?php define (DB_USER, "root"); define (DB_PASSWORD, "root"); define (DB_DATABASE, "test"); define (DB_HOST, "localhost"); $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE); ?>Step 4: Display Users and Enable Inline Editing
Create an index.php file to display the users and enable inline editing using X-editable:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Ajax X-editable bootstrap plugin to update records in PHP Example -- ItErrorSolution.com</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- X-editable CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<!-- X-editable JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
</head>
<body>
<div class="container">
<h3>jQuery Ajax X-editable bootstrap plugin to update records in PHP Example -- ItErrorSolution.com</h3>
<table class="table table-bordered">
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
<?php
require('config.php');
$sql = "SELECT * FROM users";
$users = $mysqli->query($sql);
while($user = $users->fetch_assoc()){
?>
<tr>
<td><a href="" class="update" data-name="name" data-type="text" data-pk="<?php echo $user['id']?>" data-title="Enter name"><?php echo $user['name']?></a></td>
<td><a href="" class="update" data-name="email" data-type="email" data-pk="<?php echo $user['id']?>" data-title="Enter email"><?php echo $user['email']?></a></td>
<td><button class="btn btn-danger btn-sm">Delete</button></td>
</tr>
<?php }?>
</table>
</div>
<!-- container / end -->
<script type="text/javascript">
$('.update').editable({
url: '/update.php',
type: 'text',
pk: 1,
name: 'name',
title: 'Enter name'
});
</script>
</body>
</html>
Read Also: Set Vertical Align Middle in Div Example
Step 5: Update Records Using AJAX
Create an update.php file to handle the update operation:
update.php
<?php
require('config.php');
if(isset($_POST)){
$sql = "UPDATE users SET ".$_POST['name']."='".$_POST['value']."' WHERE id=".$_POST['pk'];
$mysqli->query($sql);
echo 'Updated successfully.';
}
?>
This setup allows you to display a list of users and edit their names and emails inline using X-editable. The changes are saved to the database via AJAX requests handled by update.php.
Remember to adjust the database connection details and table structure according to your specific requirements.
Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"