How to fetch single data in pop up without page reload using Ajax php
How to fetch single data in pop up modal without page reload using jQuery Ajax in PHP
In this post, you will learning about How to fetch single data in pop up modal without page reload 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:
<!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>
<!-- View Modal -->
<div class="modal fade" id="StudentViewModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Student Detail View</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h4 class="id_view"></h4>
<h4 class="fname_view"></h4>
<h4 class="lname_view"></h4>
<h4 class="class_view"></h4>
<h4 class="section_view"></h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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", ".viewbtn", function () {
var stud_id = $(this).closest('tr').find('.stud_id').text();
// alert(stud_id);
$.ajax({
type: "POST",
url: "ajax-crud/code.php",
data: {
'checking_view': true,
'stud_id': stud_id,
},
success: function (response) {
// console.log(response);
$.each(response, function (key, studview) {
// console.log(studview['fname']);
$('.id_view').text(studview['id']);
$('.fname_view').text(studview['fname']);
$('.lname_view').text(studview['lname']);
$('.class_view').text(studview['class']);
$('.section_view').text(studview['section']);
});
$('#StudentViewModal').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_view']))
{
$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.