If you used the jQuery Dialogify plug-in to create a modal pop-up dialog box with your PHP web application. In this application, you then have to perform all data update operations. For this reason, this release will help you integrate the jQuery Dialogify plugin to update or edit the data operation using PHP with Ajax. In the previous part we saw how we can use the jquery Dialogify plugin to insert or add data to MySQL data using PHP with Ajax. We used the jlogue-based Dialogify library for the popup modal on the website. Because it's very easy to use and it's light and simple. To create a modal dialog box, we don't need to write HTML when using this plugin. In this way, users can write callback function calls at any time.
Here we would like to update or edit existing MySQL data using a PHP script with Ajax. Load existing data into the modal dialog box. If you used this add-in, you must create a separate HTML form file to load the data into the form. To update or edit data, we first want to retrieve the existing data from the database by sending an Ajax request to PHP. Once the json data has been received, we would first like to save it in the local memory of the browser using the localStorage object, which stores the data without an expiry date.
After all data has been saved in the local memory of the browser using the localStorage.setItem () method. With this method we can save data in the local memory of the browser. After we have saved all the data, we have to switch to a separate file in which we have created HTML form fields. In this file, we need to use the localStorage.getItem () method to look for data from the browser's local storage. With this method we can retrieve data from the local memory of the browser and store it in the local variable. After we have searched all the data, we need to assign this data to the HTML form fields using the JQuery code. Finally, we have to use the new Dialogify () method and create a popup dialog with separate file form fields with filler data. If we then click the "Refresh" button, a modal dialog box with the data of the filling out form is displayed. Finally, we have to activate the Ajax request when it is used. Click the Edit button that sends the Ajax request to the PHP script to update the data. All of this process code can be found below.
Here we would like to update or edit existing MySQL data using a PHP script with Ajax. Load existing data into the modal dialog box. If you used this add-in, you must create a separate HTML form file to load the data into the form. To update or edit data, we first want to retrieve the existing data from the database by sending an Ajax request to PHP. Once the json data has been received, we would first like to save it in the local memory of the browser using the localStorage object, which stores the data without an expiry date.
After all data has been saved in the local memory of the browser using the localStorage.setItem () method. With this method we can save data in the local memory of the browser. After we have saved all the data, we have to switch to a separate file in which we have created HTML form fields. In this file, we need to use the localStorage.getItem () method to look for data from the browser's local storage. With this method we can retrieve data from the local memory of the browser and store it in the local variable. After we have searched all the data, we need to assign this data to the HTML form fields using the JQuery code. Finally, we have to use the new Dialogify () method and create a popup dialog with separate file form fields with filler data. If we then click the "Refresh" button, a modal dialog box with the data of the filling out form is displayed. Finally, we have to activate the Ajax request when it is used. Click the Edit button that sends the Ajax request to the PHP script to update the data. All of this process code can be found below.
Source Code
Database
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_employee`
--
CREATE TABLE `tbl_employee` (
`id` int(11) NOT NULL,
`name` varchar(50) NOT NULL,
`address` text NOT NULL,
`gender` varchar(10) NOT NULL,
`designation` varchar(100) NOT NULL,
`age` int(11) NOT NULL,
`images` varchar(150) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tbl_employee`
--
INSERT INTO `tbl_employee` (`id`, `name`, `address`, `gender`, `designation`, `age`, `images`) VALUES
(6, 'Barbra K. Hurley', '1241 Canis Heights Drive\r\nLos Angeles, CA 90017', 'Female', 'Service technician', 26, 'image_35.jpg'),
(7, 'Antonio J. Forbes', '403 Snyder Avenue\r\nCharlotte, NC 28208', 'Male', 'Faller', 28, 'image_36.jpg'),
(8, 'Charles D. Horst', '1636 Walnut Hill Drive\r\nCincinnati, OH 45202', 'Male', 'Financial investigator', 29, 'image_37.jpg'),
(174, 'Martha B. Tomlinson', '4005 Bird Spring Lane, Houston, TX 77002', 'Female', 'Systems programmer', 28, 'image_44.jpg'),
(162, 'Jarrod D. Jones', '3827 Bingamon Road, Garfield Heights, OH 44125', 'Male', 'Manpower development advisor', 24, 'image_3.jpg'),
(192, 'Flora Reed', '4000 Hamilton Drive Cambridge, MD 21613', 'Female', 'Machine offbearer', 27, 'image_41.jpg'),
(193, 'Donna Case', '4781 Apple Lane Peoria, IL 61602', 'Female', 'Machine operator', 26, 'image_15.jpg'),
(194, 'William Lewter', '168 Little Acres Lane Decatur, IL 62526', 'Male', 'Process engineer', 25, 'image_46.jpg'),
(195, 'Nathaniel Leger', '3200 Harley Brook Lane Meadville, PA 16335', 'Male', 'Nurse', 21, 'image_34.jpg'),
(183, 'Steve John', '108, Vile Parle, CL', 'Male', 'Software Engineer', 29, 'image_47.jpg'),
(186, 'Louis C. Charmis', '1462 Juniper Drive\r\nBreckenridge, MI 48612', 'Male', 'Mental health counselor', 30, ''),
(200, 'June Barnard', '4465 Woodland Terrace Folsom, CA 95630', 'Female', 'Fishing vessel operator', 24, '');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_employee`
--
ALTER TABLE `tbl_employee`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_employee`
--
ALTER TABLE `tbl_employee`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=206;
database_connection.php
<?php
//database_connection.php
$username = 'root';
$password = '';
$connect = new PDO( 'mysql:host=localhost;dbname=testing', $username, $password );
?>
index.php
<html>
<head>
<title>How To Update or Edit Data using Dialogify with PHP Ajax, jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Dialog-Modal-Dialogify/dist/dialogify.min.js"></script>
</head>
<body>
<div class="container">
<br />
<h3 align="center">How To Update or Edit Data using Dialogify with PHP Ajax, jQuery</h3>
<br />
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
<h3 class="panel-title">Employee Data</h3>
</div>
<div class="col-md-6" align="right">
<button type="button" name="add_data" id="add_data" class="btn btn-success btn-xs">Add</button>
</div>
</div>
</div>
<div class="panel-body">
<div class="table-responsive">
<span id="form_response"></span>
<table id="user_data" class="table table-bordered table-striped">
<thead>
<tr>
<td>Name</td>
<td>Gender</td>
<td>Designation</td>
<td>Age</td>
<td>View</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
var dataTable = $('#user_data').DataTable({
"processing":true,
"serverSide":true,
"order":[],
"ajax":{
url:"fetch.php",
type:"POST"
},
"columnDefs":[
{
"targets":[4,5,6],
"orderable":false,
},
],
});
$(document).on('click', '.view', function(){
var id = $(this).attr('id');
var options = {
ajaxPrefix: '',
ajaxData: {id:id},
ajaxComplete:function(){
this.buttons([{
type: Dialogify.BUTTON_PRIMARY
}]);
}
};
new Dialogify('fetch_single.php', options)
.title('View Employee Details')
.showModal();
});
$('#add_data').click(function(){
var options = {
ajaxPrefix:''
};
new Dialogify('add_data_form.php', options)
.title('Add New Employee Data')
.buttons([
{
text:'Cancle',
click:function(e){
this.close();
}
},
{
text:'Insert',
type:Dialogify.BUTTON_PRIMARY,
click:function(e)
{
var image_data = $('#images').prop("files")[0];
var form_data = new FormData();
form_data.append('images', image_data);
form_data.append('name', $('#name').val());
form_data.append('address', $('#address').val());
form_data.append('gender', $('#gender').val());
form_data.append('designation', $('#designation').val());
form_data.append('age', $('#age').val());
$.ajax({
method:"POST",
url:'insert_data.php',
data:form_data,
dataType:'json',
contentType:false,
cache:false,
processData:false,
success:function(data)
{
if(data.error != '')
{
$('#form_response').html('<div class="alert alert-danger">'+data.error+'</div>');
}
else
{
$('#form_response').html('<div class="alert alert-success">'+data.success+'</div>');
dataTable.ajax.reload();
}
}
});
}
}
]).showModal();
});
$(document).on('click', '.update', function(){
var id = $(this).attr('id');
$.ajax({
url:"fetch_single_data.php",
method:"POST",
data:{id:id},
dataType:'json',
success:function(data)
{
localStorage.setItem('name', data[0].name);
localStorage.setItem('address', data[0].address);
localStorage.setItem('gender', data[0].gender);
localStorage.setItem('designation', data[0].designation);
localStorage.setItem('age', data[0].age);
localStorage.setItem('images', data[0].images);
var options = {
ajaxPrefix:''
};
new Dialogify('edit_data_form.php', options)
.title('Edit Employee Data')
.buttons([
{
text:'Cancle',
click:function(e){
this.close();
}
},
{
text:'Edit',
type:Dialogify.BUTTON_PRIMARY,
click:function(e)
{
var image_data = $('#images').prop("files")[0];
var form_data = new FormData();
form_data.append('images', image_data);
form_data.append('name', $('#name').val());
form_data.append('address', $('#address').val());
form_data.append('gender', $('#gender').val());
form_data.append('designation', $('#designation').val());
form_data.append('age', $('#age').val());
form_data.append('hidden_images', $('#hidden_images').val());
form_data.append('id', data[0].id);
$.ajax({
method:"POST",
url:'update_data.php',
data:form_data,
dataType:'json',
contentType:false,
cache:false,
processData:false,
success:function(data)
{
if(data.error != '')
{
$('#form_response').html('<div class="alert alert-danger">'+data.error+'</div>');
}
else
{
$('#form_response').html('<div class="alert alert-success">'+data.success+'</div>');
dataTable.ajax.reload();
}
}
});
}
}
]).showModal();
}
})
});
$(document).on('click', '.delete', function(){
var id = $(this).attr('id');
Dialogify.confirm("<h3 class='text-danger'><b>Are you sure you want to remove this data?</b></h3>", {
ok:function(){
$.ajax({
url:"delete_data.php",
method:"POST",
data:{id:id},
success:function(data)
{
Dialogify.alert('<h3 class="text-success text-center"><b>Data has been deleted</b></h3>');
dataTable.ajax.reload();
}
})
},
cancel:function(){
this.close();
}
});
});
});
</script>
fetch.php
<?php
//fetch.php
include('database_connection.php');
$query = '';
$output = array();
$query .= "SELECT * FROM tbl_employee ";
if(isset($_POST["search"]["value"]))
{
$query .= 'WHERE name LIKE "%'.$_POST["search"]["value"].'%" OR address LIKE "%'.$_POST["search"]["value"].'%" OR gender LIKE "%'.$_POST["search"]["value"].'%" OR designation LIKE "%'.$_POST["search"]["value"].'%" OR age LIKE "%'.$_POST["search"]["value"].'%" ';
}
if(isset($_POST["order"]))
{
$query .= 'ORDER BY '.$_POST['order']['0']['column'].' '.$_POST['order']['0']['dir'].' ';
}
else
{
$query .= 'ORDER BY id DESC ';
}
if($_POST["length"] != -1)
{
$query .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$data = array();
$filtered_rows = $statement->rowCount();
foreach($result as $row)
{
$sub_array = array();
$sub_array[] = $row["name"];
$sub_array[] = $row["gender"];
$sub_array[] = $row["designation"];
$sub_array[] = $row["age"];
$sub_array[] = '<button type="button" name="view" id="'.$row["id"].'" class="btn btn-primary btn-xs view">View</button>';
$sub_array[] = '<button type="button" name="update" id="'.$row["id"].'" class="btn btn-warning btn-xs update">Update</button>';
$sub_array[] = '<button type="button" name="delete" id="'.$row["id"].'" class="btn btn-danger btn-xs delete">Delete</button>';
$data[] = $sub_array;
}
function get_total_all_records($connect)
{
$statement = $connect->prepare("SELECT * FROM tbl_employee");
$statement->execute();
$result = $statement->fetchAll();
return $statement->rowCount();
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => $filtered_rows,
"recordsFiltered" => get_total_all_records($connect),
"data" => $data
);
echo json_encode($output);
?>
add_data_form.php
<div class="form-group">
<label>Enter Employee Name</label>
<input type="text" name="name" id="name" class="form-control" />
</div>
<div class="form-group">
<label>Enter Employee Address</label>
<textarea name="address" id="address" class="form-control"></textarea>
</div>
<div class="form-group">
<label>Enter Employee Gender</label>
<select name="gender" id="gender" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<label>Enter Employee Desingation</label>
<input type="text" name="designation" id="designation" class="form-control" />
</div>
<div class="form-group">
<label>Enter Employee Age</label>
<input type="text" name="age" id="age" class="form-control" />
</div>
<div class="form-group">
<label>Select Employee Image</label>
<input type="file" name="images" id="images" />
</div>
insert_data.php
<?php
//insert_data.php
include('database_connection.php');
if(isset($_POST["name"]))
{
$error = '';
$success = '';
$name = '';
$address = '';
$designation = '';
$age = '';
$images = '';
$gender = $_POST["gender"];
if(empty($_POST["name"]))
{
$error .= '<p>Name is Required</p>';
}
else
{
$name = $_POST["name"];
}
if(empty($_POST["address"]))
{
$error .= '<p>Address is Required</p>';
}
else
{
$address = $_POST["address"];
}
if(empty($_POST["designation"]))
{
$error .= '<p>Designation is Required</p>';
}
else
{
$designation = $_POST["designation"];
}
if(empty($_POST["age"]))
{
$error .= '<p>Age is Required</p>';
}
else
{
$age = $_POST["age"];
}
if(isset($_FILES["images"]["name"]) && $_FILES["images"]["name"] != '')
{
$image_name = $_FILES["images"]["name"];
$array = explode(".", $image_name);
$extension = end($array);
$temporary_name = $_FILES["images"]["tmp_name"];
$allowed_extension = array("jpg","png");
if(!in_array($extension, $allowed_extension))
{
$error .= '<p>Invalid Image</p>';
}
else
{
$images = rand() . '.' . $extension;
move_uploaded_file($temporary_name, 'images/' . $images);
}
}
if($error == '')
{
$data = array(
':name' => $name,
':address' => $address,
':gender' => $gender,
':designation' => $designation,
':age' => $age,
':images' => $images
);
$query = "
INSERT INTO tbl_employee
(name, address, gender, designation, age, images)
VALUES (:name, :address, :gender, :designation, :age, :images)
";
$statement = $connect->prepare($query);
$statement->execute($data);
$success = 'Employee Data Inserted';
}
$output = array(
'success' => $success,
'error' => $error
);
echo json_encode($output);
}
?>
fetch_single_data.php
<?php
//fetch_single_data.php
include('database_connection.php');
if(isset($_POST["id"]))
{
$query = "
SELECT * FROM tbl_employee WHERE id = '".$_POST["id"]."'
";
$statement = $connect->prepare($query);
$statement->execute();
while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
$data[] = $row;
}
echo json_encode($data);
}
?>
edit_data_form.php
<div class="form-group">
<label>Enter Employee Name</label>
<input type="text" name="name" id="name" class="form-control" />
</div>
<div class="form-group">
<label>Enter Employee Address</label>
<textarea name="address" id="address" class="form-control"></textarea>
</div>
<div class="form-group">
<label>Enter Employee Gender</label>
<select name="gender" id="gender" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<label>Enter Employee Desingation</label>
<input type="text" name="designation" id="designation" class="form-control" />
</div>
<div class="form-group">
<label>Enter Employee Age</label>
<input type="text" name="age" id="age" class="form-control" />
</div>
<div class="form-group">
<label>Select Employee Image</label>
<input type="file" name="images" id="images" />
<span id="uploaded_image"></span>
<input type="hidden" name="hidden_images" id="hidden_images" />
</div>
<script>
$(document).ready(function () {
var name = localStorage.getItem('name');
var address = localStorage.getItem('address');
var gender = localStorage.getItem('gender');
var designation = localStorage.getItem('designation');
var age = localStorage.getItem('age');
var images = localStorage.getItem('images');
$('#name').val(name);
$('#address').val(address);
$('#gender').val(gender);
$('#designation').val(designation);
$('#age').val(age);
if(images != '')
{
$('#uploaded_image').html('<img src="images/'+images+'" class="img-thumbnail" width="100" />');
$('#hidden_images').val(images);
}
});
</script>
update_data.php
<?php
//update_data.php
include('database_connection.php');
if(isset($_POST["name"]))
{
$error = '';
$success = '';
$name = '';
$address = '';
$designation = '';
$age = '';
$images = '';
$gender = $_POST["gender"];
if(empty($_POST["name"]))
{
$error .= '<p>Name is Required</p>';
}
else
{
$name = $_POST["name"];
}
if(empty($_POST["address"]))
{
$error .= '<p>Address is Required</p>';
}
else
{
$address = $_POST["address"];
}
if(empty($_POST["designation"]))
{
$error .= '<p>Designation is Required</p>';
}
else
{
$designation = $_POST["designation"];
}
if(empty($_POST["age"]))
{
$error .= '<p>Age is Required</p>';
}
else
{
$age = $_POST["age"];
}
$images = $_POST['hidden_images'];
if(isset($_FILES["images"]["name"]) && $_FILES["images"]["name"] != '')
{
$image_name = $_FILES["images"]["name"];
$array = explode(".", $image_name);
$extension = end($array);
$temporary_name = $_FILES["images"]["tmp_name"];
$allowed_extension = array("jpg","png");
if(!in_array($extension, $allowed_extension))
{
$error .= '<p>Invalid Image</p>';
}
else
{
$images = rand() . '.' . $extension;
move_uploaded_file($temporary_name, 'images/' . $images);
}
}
if($error == '')
{
$data = array(
':name' => $name,
':address' => $address,
':gender' => $gender,
':designation' => $designation,
':age' => $age,
':images' => $images,
':id' => $_POST["id"]
);
$query = "
UPDATE tbl_employee
SET name = :name,
address = :address,
gender = :gender,
designation = :designation,
age = :age,
images = :images
WHERE id = :id
";
$statement = $connect->prepare($query);
$statement->execute($data);
$success = 'Employee Data Updated';
}
$output = array(
'success' => $success,
'error' => $error
);
echo json_encode($output);
}
?>
delete_data.php
<?php
//delete_data.php
include('database_connection.php');
if(isset($_POST["id"]))
{
$query = "
DELETE FROM tbl_employee
WHERE id = '".$_POST["id"]."'
";
$statement = $connect->prepare($query);
$statement->execute();
}
?>
Here we have provided the complete source code with Show Data in the modal dialog box, insert data, update data and delete data with the plug-in jQuery Dialogify using PHP with Ajax.
