in this post we will discuss how we can update data to mysql table data with Bootstrap Capital by using a php script with jquery Ajax without page refresh. In the previous tutorial about Bootstrap Capital we have shown how to enter data into Mysql tables by using Bootstrap Capital with PHP scripts with jquery Ajax.
The main use of Bootstrap Capital is that we can do all types of database operations such as Insert, Update, retrieve, and delete or display any message without opening a new page, but we can do things like this on the page in the form of a pop-up warning box . We can call Bootstrap Capital by clicking on any anchor tag or button using the jquery code or we can also display the Capital Bootstrap window by defining the data attribute in the element. Here we have used Ajax Jquery and with jquery we get an employee id from the edit button, we have made all edit buttons separate employees with different id and in this id we have a store employee id and by using the jquery code we get an employee id from the button and by using ajax we have taken employee id data from the database and then after we display that data into the html form field Bootstrap Capital and in html form we can change the data and by clicking the update button we can update the data into the mysql database using the Method Ajax request.
ONLINE DEMO TUTORIAL VIDEO
index.php
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM tbl_employee ORDER BY id DESC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | PHP Ajax Update MySQL Data Through Bootstrap Modal</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://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:700px;">
<h3 align="center">PHP Ajax Update MySQL Data Through Bootstrap Modal</h3>
<br />
<div class="table-responsive">
<div align="right">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
<br />
<div id="employee_table">
<table class="table table-bordered">
<tr>
<th width="70%">Employee Name</th>
<th width="15%">Edit</th>
<th width="15%">View</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["name"]; ?></td>
<td><input type="button" name="edit" value="Edit" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs edit_data" /></td>
<td><input type="button" name="view" value="view" id="<?php echo $row["id"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</div>
</body>
</html>
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Employee Details</h4>
</div>
<div class="modal-body" id="employee_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">PHP Ajax Update MySQL Data Through Bootstrap Modal</h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form">
<label>Enter Employee Name</label>
<input type="text" name="name" id="name" class="form-control" />
<br />
<label>Enter Employee Address</label>
<textarea name="address" id="address" class="form-control"></textarea>
<br />
<label>Select Gender</label>
<select name="gender" id="gender" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<br />
<label>Enter Designation</label>
<input type="text" name="designation" id="designation" class="form-control" />
<br />
<label>Enter Age</label>
<input type="text" name="age" id="age" class="form-control" />
<br />
<input type="hidden" name="employee_id" id="employee_id" />
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#add').click(function(){
$('#insert').val("Insert");
$('#insert_form')[0].reset();
});
$(document).on('click', '.edit_data', function(){
var employee_id = $(this).attr("id");
$.ajax({
url:"fetch.php",
method:"POST",
data:{employee_id:employee_id},
dataType:"json",
success:function(data){
$('#name').val(data.name);
$('#address').val(data.address);
$('#gender').val(data.gender);
$('#designation').val(data.designation);
$('#age').val(data.age);
$('#employee_id').val(data.id);
$('#insert').val("Update");
$('#add_data_Modal').modal('show');
}
});
});
$('#insert_form').on("submit", function(event){
event.preventDefault();
if($('#name').val() == "")
{
alert("Name is required");
}
else if($('#address').val() == '')
{
alert("Address is required");
}
else if($('#designation').val() == '')
{
alert("Designation is required");
}
else if($('#age').val() == '')
{
alert("Age is required");
}
else
{
$.ajax({
url:"insert.php",
method:"POST",
data:$('#insert_form').serialize(),
beforeSend:function(){
$('#insert').val("Inserting");
},
success:function(data){
$('#insert_form')[0].reset();
$('#add_data_Modal').modal('hide');
$('#employee_table').html(data);
}
});
}
});
$(document).on('click', '.view_data', function(){
var employee_id = $(this).attr("id");
if(employee_id != '')
{
$.ajax({
url:"select.php",
method:"POST",
data:{employee_id:employee_id},
success:function(data){
$('#employee_detail').html(data);
$('#dataModal').modal('show');
}
});
}
});
});
</script>
fetch.php
<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "testing");
if(isset($_POST["employee_id"]))
{
$query = "SELECT * FROM tbl_employee WHERE id = '".$_POST["employee_id"]."'";
$result = mysqli_query($connect, $query);
$row = mysqli_fetch_array($result);
echo json_encode($row);
}
?>
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
if(!empty($_POST))
{
$output = '';
$message = '';
$name = mysqli_real_escape_string($connect, $_POST["name"]);
$address = mysqli_real_escape_string($connect, $_POST["address"]);
$gender = mysqli_real_escape_string($connect, $_POST["gender"]);
$designation = mysqli_real_escape_string($connect, $_POST["designation"]);
$age = mysqli_real_escape_string($connect, $_POST["age"]);
if($_POST["employee_id"] != '')
{
$query = "
UPDATE tbl_employee
SET name='$name',
address='$address',
gender='$gender',
designation = '$designation',
age = '$age'
WHERE id='".$_POST["employee_id"]."'";
$message = 'Data Updated';
}
else
{
$query = "
INSERT INTO tbl_employee(name, address, gender, designation, age)
VALUES('$name', '$address', '$gender', '$designation', '$age');
";
$message = 'Data Inserted';
}
if(mysqli_query($connect, $query))
{
$output .= '<label class="text-success">' . $message . '</label>';
$select_query = "SELECT * FROM tbl_employee ORDER BY id DESC";
$result = mysqli_query($connect, $select_query);
$output .= '
<table class="table table-bordered">
<tr>
<th width="70%">Employee Name</th>
<th width="15%">Edit</th>
<th width="15%">View</th>
</tr>
';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>' . $row["name"] . '</td>
<td><input type="button" name="edit" value="Edit" id="'.$row["id"] .'" class="btn btn-info btn-xs edit_data" /></td>
<td><input type="button" name="view" value="view" id="' . $row["id"] . '" class="btn btn-info btn-xs view_data" /></td>
</tr>
';
}
$output .= '</table>';
}
echo $output;
}
?>
<?php
if(isset($_POST["employee_id"]))
{
$output = '';
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM tbl_employee WHERE id = '".$_POST["employee_id"]."'";
$result = mysqli_query($connect, $query);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td width="30%"><label>Name</label></td>
<td width="70%">'.$row["name"].'</td>
</tr>
<tr>
<td width="30%"><label>Address</label></td>
<td width="70%">'.$row["address"].'</td>
</tr>
<tr>
<td width="30%"><label>Gender</label></td>
<td width="70%">'.$row["gender"].'</td>
</tr>
<tr>
<td width="30%"><label>Designation</label></td>
<td width="70%">'.$row["designation"].'</td>
</tr>
<tr>
<td width="30%"><label>Age</label></td>
<td width="70%">'.$row["age"].' Year</td>
</tr>
';
}
$output .= '
</table>
</div>
';
echo $output;
}
?>
-- -- Table structure for table `tbl_employee` -- CREATE TABLE IF NOT EXISTS `tbl_employee` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(50) NOT NULL, `address` text NOT NULL, `gender` varchar(10) NOT NULL, `designation` varchar(100) NOT NULL, `age` int(11) NOT NULL, `image` varchar(100) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=187 ; -- -- Dumping data for table `tbl_employee` -- INSERT INTO `tbl_employee` (`id`, `name`, `address`, `gender`, `designation`, `age`, `image`) VALUES (1, 'Bruce Tom', '656 Edsel Road\r\nSherman Oaks, CA 91403', 'Male', 'Driver', 36, '1.jpg'), (5, 'Clara Gilliam', '63 Woodridge Lane\r\nMemphis, TN 38138', 'Female', 'Programmer', 24, '2.jpg'), (6, 'Barbra K. Hurley', '1241 Canis Heights Drive\r\nLos Angeles, CA 90017', 'Female', 'Service technician', 26, '3.jpg'), (7, 'Antonio J. Forbes', '403 Snyder Avenue\r\nCharlotte, NC 28208', 'Male', 'Faller', 32, '4.jpg'), (8, 'Charles D. Horst', '1636 Walnut Hill Drive\r\nCincinnati, OH 45202', 'Male', 'Financial investigator', 29, '5.jpg'), (175, 'Ronald D. Colella', '1571 Bingamon Branch Road, Barrington, IL 60010', 'Male', 'Top executive', 32, '6.jpg'), (174, 'Martha B. Tomlinson', '4005 Bird Spring Lane, Houston, TX 77002', 'Female', 'Systems programmer', 38, '7.jpg'), (161, 'Glenda J. Stewart', '3482 Pursglove Court, Rossburg, OH 45362', 'Female', 'Cost consultant', 28, '8.jpg'), (162, 'Jarrod D. Jones', '3827 Bingamon Road, Garfield Heights, OH 44125', 'Male', 'Manpower development advisor', 64, '9.jpg'), (163, 'William C. Wright', '2653 Pyramid Valley Road, Cedar Rapids, IA 52404', 'Male', 'Political geographer', 33, '10.jpg'), (178, 'Sara K. Ebert', '1197 Nelm Street\r\nMc Lean, VA 22102', 'Female', 'Billing machine operator', 50, ''), (177, 'Patricia L. Scott', '1584 Dennison Street\r\nModesto, CA 95354', 'Female', 'Urban and regional planner', 54, ''), (179, 'James K. Ridgway', '3462 Jody Road\r\nWayne, PA 19088', 'Female', 'Recreation leader', 41, ''), (180, 'Stephen A. Crook', '448 Deercove Drive\r\nDallas, TX 75201', 'Male', 'Optical goods worker', 36, ''), (181, 'Kimberly J. Ellis', '4905 Holt Street\r\nFort Lauderdale, FL 33301', 'Male', 'Dressing room attendant', 24, ''), (182, 'Elizabeth N. Bradley', '1399 Randall Drive\r\nHonolulu, HI 96819', 'Female', ' Software quality assurance analyst', 25, ''), (183, 'Steve John', '108, Vile Parle, CL', 'Male', 'Software Engineer', 29, ''), (184, 'Marks Johnson', '021, Big street, NY', 'Male', 'Head of IT', 41, ''), (185, 'Mak Pub', '1462 Juniper Drive\r\nBreckenridge, MI 48612', 'Male', 'Mental health counselor', 40, ''), (186, 'Louis C. Charmis', '1462 Juniper Drive\r\nBreckenridge, MI 48612', 'Male', 'Mental health counselor', 40, '');
Comments
Post a Comment