In this code, we will show you how to display the data with Bootstrap Modal and Update it in PHP & MySQL using AJAX. This function is one of the most important functions when creating an application. So we hope that you found it helpful to your research.
Showing records to your Bootstrap modal with PHP is helping the user experience for not loading your web page.
Index.html
First, we need to create our index.html just check the below code.
Edit or Update Data Using PHP & MySQL Ajax
Edit or Update Data Using PHP & MySQL Ajax
Add New Employee
List of Employees
Edit Employee
Save.php
After the above code so we need the save function so that we can enable us to add a new record.
connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli->connect_error;
exit();
}
// Set the INSERT SQL data
$sql = "INSERT INTO employees (email, first_name, last_name, address)
VALUES ('".$email."', '".$first_name."', '".$last_name."', '".$address."')";
// Process the query so that we will save the date of birth
if ($mysqli->query($sql)) {
echo "Employee has been successfully created.";
} else {
return "Error: " . $sql . " " . $mysqli->error;
}
// Close the connection after using it
$mysqli->close();
?>
All.php
Our next code is about getting all records via ajax.
connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli->connect_error;
exit();
}
// Set the INSERT SQL data
$sql = "SELECT * FROM employees";
// Process the query so that we will save the date of birth
$results = $mysqli->query($sql);
// Fetch Associative array
$row = $results->fetch_all(MYSQLI_ASSOC);
// Free result set
$results->free_result();
// Close the connection after using it
$mysqli->close();
echo json_encode($row);
?>
Get.php
In this code, we will get the record and display it via modal.
connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli->connect_error;
exit();
}
// Set the INSERT SQL data
$sql = "SELECT * FROM employees WHERE id='".$employeeId."'";
// Process the query so that we will save the date of birth
$results = $mysqli->query($sql);
// Fetch Associative array
$row = $results->fetch_assoc();
// Free result set
$results->free_result();
// Close the connection after using it
$mysqli->close();
echo json_encode($row);
?>
Update.php
Now in this code, we are enabled to update the record after clicking the "Update" button via modal using ajax.
connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli->connect_error;
exit();
}
// Set the INSERT SQL data
$sql = "UPDATE employees SET email='".$email."', first_name='".$first_name."', last_name='".$last_name."', address='".$address."' WHERE id='".$id."'";
// Process the query so that we will save the date of birth
if ($mysqli->query($sql)) {
echo "Employee has been sucessfully updated.";
} else {
return "Error: " . $sql . " " . $mysqli->error;
}
// Close the connection after using it
$mysqli->close();
?>
Scripts.js
In this code, we are enabled to process the above PHP codes via AJAX from saving record, getting all records, retrieving records, and updating it.
function all()
{
// Ajax config
$.ajax({
type: "GET", //we are using GET method to get all record from the server
url: 'all.php', // get the route value
success: function (response) {//once the request successfully process to the server side it will return result here
// Parse the json result
response = JSON.parse(response);
var html = "";
// Check if there is available records
if(response.length) {
html += '
';
// Loop the parsed JSON
$.each(response, function(key,value) {
// Our employee list template
html += '';
html += "
';
}
// Insert the HTML Template and display all employee records
$("#employees-list").html(html);
}
});
}
function save()
{
$("#btnSubmit").on("click", function() {
var $this = $(this); //submit button selector using ID
var $caption = $this.html();// We store the html content of the submit button
var form = "#form"; //defined the #form ID
var formData = $(form).serializeArray(); //serialize the form into array
var route = $(form).attr('action'); //get the route using attribute action
// Ajax config
$.ajax({
type: "POST", //we are using POST method to submit the data to the server side
url: route, // get the route value
data: formData, // our serialized array data for server side
beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
$this.attr('disabled', true).html("Processing...");
},
success: function (response) {//once the request successfully process to the server side it will return result here
$this.attr('disabled', false).html($caption);
// Reload lists of employees
all();
// We will display the result using alert
alert(response);
// Reset form
resetForm(form);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// You can put something here if there is an error from submitted request
}
});
});
}
function resetForm(selector)
{
$(selector)[0].reset();
}
function get()
{
$(document).delegate("[data-target='#edit-employee-modal']", "click", function() {
var employeeId = $(this).attr('data-id');
// Ajax config
$.ajax({
type: "GET", //we are using GET method to get data from server side
url: 'get.php', // get the route value
data: {employee_id:employeeId}, //set data
beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
},
success: function (response) {//once the request successfully process to the server side it will return result here
response = JSON.parse(response);
$("#edit-form [name=\"id\"]").val(response.id);
$("#edit-form [name=\"email\"]").val(response.email);
$("#edit-form [name=\"first_name\"]").val(response.first_name);
$("#edit-form [name=\"last_name\"]").val(response.last_name);
$("#edit-form [name=\"address\"]").val(response.address);
}
});
});
}
function update()
{
$("#btnUpdateSubmit").on("click", function() {
var $this = $(this); //submit button selector using ID
var $caption = $this.html();// We store the html content of the submit button
var form = "#edit-form"; //defined the #form ID
var formData = $(form).serializeArray(); //serialize the form into array
var route = $(form).attr('action'); //get the route using attribute action
// Ajax config
$.ajax({
type: "POST", //we are using POST method to submit the data to the server side
url: route, // get the route value
data: formData, // our serialized array data for server side
beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
$this.attr('disabled', true).html("Processing...");
},
success: function (response) {//once the request successfully process to the server side it will return result here
$this.attr('disabled', false).html($caption);
// Reload lists of employees
all();
// We will display the result using alert
alert(response);
// Reset form
resetForm(form);
// Close modal
$('#edit-employee-modal').modal('toggle');
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// You can put something here if there is an error from submitted request
}
});
});
}
$(document).ready(function() {
// Get all employee records
all();
// Submit form using AJAX To Save Data
save();
// Get the data and view to modal
get();
// Updating the data
update();
});
Styles.css
Then our last code about the custom style of our page.
Okay, we were done setting up our code and you can now enable to update/edit your record using ajax. I hope this code can help you.
Apa itu modal pada bootstrap?
Membuat Modal dengan Bootstrap – Modal atau yang biasa di sebut pop up pada bootstrap adalah sebuah kotak dialog yang biasanya di gunakan untuk melakukan konfirmasi atas suatu aksi. Misal, ketika anda ingin menghapus suatu data, anda bisa menggunakan modal ini sebagai pesan konfirmasi atas aksi apa yang anda lakukan.
Apa itu modal dalam HTML?
Modal adalah kotak dialog yang muncul pada halaman web. Cara kerja modal adalah ketika modal dalam kondisi aktif maka dialog box akan tampil dan halaman utamanya menjadi tidak aktif, namun halaman utama tetap dapat terlihat pada jendela browser.
