This is more post on Ajax Crud Operation by using PHP Script. In this we have use JQuery UI Dialog for Insert, Update and Delete Mysql data with PHP and Ajax. We have make many tutorial on Ajax Crud by using PHP Code and Bootstrap modal. But now we have use JQuery UI Dialog for Add, Edit and Remove Mysql table data by using Ajax with PHP.
Jquery UI Dialog boxes are simple and easy one of the best ways of displaying data on an HTML Web page. This is alernate of Bootstrap modal because Bootstrap modal is fixed on web page but Jqery UI Dialog box can be move on web page. It is easy to use with our exisiting web project. So if you want to make single page web application then you can use Jquery UI Dialog widget. By using this dialog box we can not only pop dynamic data on web page but also we can also process form data also.
By using dialog() method we can initialize JQuery UI Diglog widget on any html tag. In tutorial first we have load mysql table data on web page by using JQuery function with Ajax request. After this we have add or insert data into mysql table by using PHP with Ajax. For Insert or Add data form we have use JQuery Dialog widget. When dialog box pop on web page, form also pop up with dialog box. So we can fill form data and insert data into mysql table. Same for update or edit mysql data when we have click on edit button, then by ajax request it will fetch data and then after dialog box with form will pop up on web page with filled data. After this we can change data and click on update button then data will be edited by using Jqery UI Dialog box with Ajax PHP. Here for delete data confirmation also we have use dialog box with button. If we have confirm data remove then by using Ajax request it will remove data from mysql database by using PHP with Ajax. So, this way we have use JQuery UI Dialog box with PHP and Ajax for Insert, Update and Delete Mysql table data.
Source Code
index.php
<html>
<head>
<title>PHP Ajax Crud using JQuery UI Dialog</title>
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="bootstrap.min.css" />
<script src="jquery.min.js"></script>
<script src="jquery-ui.js"></script>
</head>
<body>
<div class="container">
<br />
<h3 align="center">PHP Ajax Crud using JQuery UI Dialog</a></h3><br />
<br />
<div align="right" style="margin-bottom:5px;">
<button type="button" name="add" id="add" class="btn btn-success btn-xs">Add</button>
</div>
<div class="table-responsive" id="user_data">
</div>
<br />
</div>
<div id="user_dialog" title="Add Data">
<form method="post" id="user_form">
<div class="form-group">
<label>Enter First Name</label>
<input type="text" name="first_name" id="first_name" class="form-control" />
<span id="error_first_name" class="text-danger"></span>
</div>
<div class="form-group">
<label>Enter Last Name</label>
<input type="text" name="last_name" id="last_name" class="form-control" />
<span id="error_last_name" class="text-danger"></span>
</div>
<div class="form-group">
<input type="hidden" name="action" id="action" value="insert" />
<input type="hidden" name="hidden_id" id="hidden_id" />
<input type="submit" name="form_action" id="form_action" class="btn btn-info" value="Insert" />
</div>
</form>
</div>
<div id="action_alert" title="Action">
</div>
<div id="delete_confirmation" title="Confirmation">
<p>Are you sure you want to Delete this data?</p>
</div>
</body>
</html>
<script>
$(document).ready(function(){
load_data();
function load_data()
{
$.ajax({
url:"fetch.php",
method:"POST",
success:function(data)
{
$('#user_data').html(data);
}
});
}
$("#user_dialog").dialog({
autoOpen:false,
width:400
});
$('#add').click(function(){
$('#user_dialog').attr('title', 'Add Data');
$('#action').val('insert');
$('#form_action').val('Insert');
$('#user_form')[0].reset();
$('#form_action').attr('disabled', false);
$("#user_dialog").dialog('open');
});
$('#user_form').on('submit', function(event){
event.preventDefault();
var error_first_name = '';
var error_last_name = '';
if($('#first_name').val() == '')
{
error_first_name = 'First Name is required';
$('#error_first_name').text(error_first_name);
$('#first_name').css('border-color', '#cc0000');
}
else
{
error_first_name = '';
$('#error_first_name').text(error_first_name);
$('#first_name').css('border-color', '');
}
if($('#last_name').val() == '')
{
error_last_name = 'Last Name is required';
$('#error_last_name').text(error_last_name);
$('#last_name').css('border-color', '#cc0000');
}
else
{
error_last_name = '';
$('#error_last_name').text(error_last_name);
$('#last_name').css('border-color', '');
}
if(error_first_name != '' || error_last_name != '')
{
return false;
}
else
{
$('#form_action').attr('disabled', 'disabled');
var form_data = $(this).serialize();
$.ajax({
url:"action.php",
method:"POST",
data:form_data,
success:function(data)
{
$('#user_dialog').dialog('close');
$('#action_alert').html(data);
$('#action_alert').dialog('open');
load_data();
$('#form_action').attr('disabled', false);
}
});
}
});
$('#action_alert').dialog({
autoOpen:false
});
$(document).on('click', '.edit', function(){
var id = $(this).attr('id');
var action = 'fetch_single';
$.ajax({
url:"action.php",
method:"POST",
data:{id:id, action:action},
dataType:"json",
success:function(data)
{
$('#first_name').val(data.first_name);
$('#last_name').val(data.last_name);
$('#user_dialog').attr('title', 'Edit Data');
$('#action').val('update');
$('#hidden_id').val(id);
$('#form_action').val('Update');
$('#user_dialog').dialog('open');
}
});
});
$('#delete_confirmation').dialog({
autoOpen:false,
modal: true,
buttons:{
Ok : function(){
var id = $(this).data('id');
var action = 'delete';
$.ajax({
url:"action.php",
method:"POST",
data:{id:id, action:action},
success:function(data)
{
$('#delete_confirmation').dialog('close');
$('#action_alert').html(data);
$('#action_alert').dialog('open');
load_data();
}
});
},
Cancel : function(){
$(this).dialog('close');
}
}
});
$(document).on('click', '.delete', function(){
var id = $(this).attr("id");
$('#delete_confirmation').data('id', id).dialog('open');
});
});
</script>
database_connection.php
<?php
//database_connection.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
?>
fetch.php
<?php
//fetch.php
include("database_connection.php");
$query = "SELECT * FROM tbl_sample";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$total_row = $statement->rowCount();
$output = '
<table class="table table-striped table-bordered">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Edit</th>
<th>Delete</th>
</tr>
';
if($total_row > 0)
{
foreach($result as $row)
{
$output .= '
<tr>
<td width="40%">'.$row["first_name"].'</td>
<td width="40%">'.$row["last_name"].'</td>
<td width="10%">
<button type="button" name="edit" class="btn btn-primary btn-xs edit" id="'.$row["id"].'">Edit</button>
</td>
<td width="10%">
<button type="button" name="delete" class="btn btn-danger btn-xs delete" id="'.$row["id"].'">Delete</button>
</td>
</tr>
';
}
}
else
{
$output .= '
<tr>
<td colspan="4" align="center">Data not found</td>
</tr>
';
}
$output .= '</table>';
echo $output;
?>
action.php
<?php
//action.php
include('database_connection.php');
if(isset($_POST["action"]))
{
if($_POST["action"] == "insert")
{
$query = "
INSERT INTO tbl_sample (first_name, last_name) VALUES ('".$_POST["first_name"]."', '".$_POST["last_name"]."')
";
$statement = $connect->prepare($query);
$statement->execute();
echo '<p>Data Inserted...</p>';
}
if($_POST["action"] == "fetch_single")
{
$query = "
SELECT * FROM tbl_sample WHERE id = '".$_POST["id"]."'
";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
$output['first_name'] = $row['first_name'];
$output['last_name'] = $row['last_name'];
}
echo json_encode($output);
}
if($_POST["action"] == "update")
{
$query = "
UPDATE tbl_sample
SET first_name = '".$_POST["first_name"]."',
last_name = '".$_POST["last_name"]."'
WHERE id = '".$_POST["hidden_id"]."'
";
$statement = $connect->prepare($query);
$statement->execute();
echo '<p>Data Updated</p>';
}
if($_POST["action"] == "delete")
{
$query = "DELETE FROM tbl_sample WHERE id = '".$_POST["id"]."'";
$statement = $connect->prepare($query);
$statement->execute();
echo '<p>Data Deleted</p>';
}
}
?>
Nice working tutorial
ReplyDeletepas mal mais suis qu'un débutant a la matieres
ReplyDelete