How to fetch data in TextBox in Popup without page refresh in ajax php
fetch data in TextBox in Pop up modal without page refresh using jquery Ajax in php.
Hie Guys., so in this above video, we are learning about How to edit data or fetch data in TextBox in Pop up modal without page refresh using jQuery ajax in php.
So.. As we are continuing from Video template where we are using Bootstrap for designing the view. To create new design as per your requirement go to getbootstrap.com .
Step 1: Create a table named students below code:
Create a table as per below code in your database:
CREATE TABLE students (
id int,
fname varchar(100),
lname varchar(100),
class varchar(100),
section varchar(100)
);
Step 2: Create a file named index.php and paste the below code:
Here below contents are about getting or fetching the data into Textbox in popup modal using jquery ajax in php.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>PHP - AJAX - CRUD</title>
</head>
<body>
<!-- Edit Modal -->
<div class="modal fade" id="StudentEditModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Student Data without page reload</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<input type="hidden" id="id_edit">
<div class="col-md-12">
<div class="error-message">
</div>
</div>
<div class="col-md-6">
<label for="">First Name</label>
<input type="text" id="edit_fname" class="form-control">
</div>
<div class="col-md-6">
<label for="">Last Name</label>
<input type="text" id="edit_lname" class="form-control">
</div>
<div class="col-md-6">
<label for="">Class</label>
<input type="text" id="edit_class" class="form-control">
</div>
<div class="col-md-6">
<label for="">Section</label>
<input type="text" id="edit_section" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary student_update_ajax">Update</button>
</div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4>
PHP - AJAX - CRUD | Data without page reload using jquery ajax in php.
<button type="button" class="btn btn-primary float-right" data-toggle="modal" data-target="#Student_AddModal">
Add
</button>
</h4>
</div>
<div class="card-body">
<div class="message-show">
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Class</th>
<th>Section</th>
<th>Action</th>
</tr>
</thead>
<tbody class="studentdata">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
getdata();
$(document).on("click", ".edit_btn", function () {
var stud_id = $(this).closest('tr').find('.stud_id').text();
// alert(stud_id);
$.ajax({
type: "POST",
url: "ajax-crud/code.php",
data: {
'checking_edit': true,
'stud_id': stud_id,
},
success: function (response) {
// console.log(response);
$.each(response, function (key, studedit) {
// console.log(studview['fname']);
$('#id_edit').val(studedit['id']);
$('#edit_fname').val(studedit['fname']);
$('#edit_lname').val(studedit['lname']);
$('#edit_class').val(studedit['class']);
$('#edit_section').val(studedit['section']);
});
$('#StudentEditModal').modal('show');
}
});
});
});
</script>
</body>
</html>
Step 3: Create a file named code.php inside ajax-crud and paste the below code:
First Create a folder name ajax-crud and create a file named code.php and paste the below code:
<?php
$conn = mysqli_connect("localhost","root","","phpcrud");
if(isset($_POST['checking_edit']))
{
$stud_id = $_POST['stud_id'];
$result_array = [];
$query = "SELECT * FROM students WHERE id='$stud_id' ";
$query_run = mysqli_query($conn, $query);
if(mysqli_num_rows($query_run) > 0)
{
foreach($query_run as $row)
{
array_push($result_array, $row);
}
header('Content-type: application/json');
echo json_encode($result_array);
}
else
{
echo $return = "No Record Found.!";
}
}
?>
Thanks for reading.