How to display a table using AJAX in modal? - php

Question

officer_cashier.php
This is my modal form I want to display a table upon clicking the button add from cashier_template.php in DIV tag id=add_table
<div class="modal fade" id="fee_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Process payment</h5>
<button type="button" class="close get_close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST" action="officer_cashier.php" id="reg">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Student information</legend>
<input type="hidden" class="form-control" id="id" name="id">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" readonly="readonly">
</div>
<div class="form-group">
<label for="course">Course</label>
<input type="text" class="form-control" id="course" name="course" readonly="readonly">
</div>
<div class="form-group">
<label for="sem">Semester</label>
<input type="text" class="form-control" id="sem" name="sem" readonly="readonly">
</div>
<div class="form-group">
<label for="year">Year</label>
<input type="text" class="form-control" id="year" name="year" readonly="readonly">
</div>
</fieldset>
<button class="btn btn-sucess add_fees" id="add_fees">add</button >
<div class="form-group" id="display_table"></div><!-- I want to display the table inside of this DIV tag -->
</form>
</div>
</div>
</div>
</div>
script
This is my AJAX the course,sem,year data is what i need to display the table, so if those three fetch successfully I want to display it in my DIV tag #display_table
$(document).on('click', '.add_fees', function(){
$.ajax({
type: "post",
url: "../templates/cashier_template.php",
data: {
"course": $("#course").val(),
"semester": $("#sem").val(),
"year": $("#year").val(),
},
success: function(data) {
$("#display_table").html(data);
}
});
});
cashier_template.php
This is the cashier template once the AJAX pass the data and matcher the query it should display in modal but I wasnt getting
<?php
ob_start();
include("../include/userlogin.php");
if(!isset($_SESSION))
{
session_start();
}
if($_SESSION['usertype'] != 1){
header("location: login.php?success=1");
$_SESSION['message'] = "You cannot access this page unless you are a officer!";
}
ob_end_flush();
$yearId = $_POST['year'];
$courseId = $_POST['course'];
$semesterId = $_POST['semester'];
$result = $connect->query("SELECT id, total_fees, fee_names FROM manage_fees WHERE year_lvl = '$yearId' AND course = '$courseId' AND semester = '$semesterId'") or die($connect->error());
while($row = $result->fetch_assoc()):
?>
<div class="table-sorting table-responsive" style="margin-top: 1rem;">
<table class="table table-striped table-bordered table-hover" id="table1">
<thead>
<tr class="p-4">
<th scope="col">Select</th>
<th scope="col">School fees</th>
<th scope="col">Amount</th>
<th scope="col">type</th>
</tr>
</thead>
<tbody>
<?php
$result = $connect->query("SELECT * FROM fees;") or die($connect->error());
while($row = $result->fetch_assoc()){
?>
<tr>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input check_amount" name="local_fees">
<label class="custom-control-label" for="check_amount"></label>
</div>
</td>
<td name="selected_fees"><?php echo $row['fee_name']; ?></td>
<td name="amount"><?php echo $row['amount']; ?></td>
<td><?php echo $row['type']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<?php endwhile; ?>
<script src="../js/datable.js"></script>

Answer 1

You are overwriting the $result object (and subsequently the $row obect) when you query fees. So the big loop at the top:
while($row = $result->fetch_assoc()):
is getting overwritten down the line by
$result = $connect->query("SELECT * FROM fees;");
while($row = $result->fetch_assoc()){
But really, there's no need to query FEES in every loop. Why not first get all the fees data into an array, then just access it in the other loop. So first, at the top of your php script:
<?php
$fees=array();
$result = $connect->query("SELECT * FROM fees;");
while($row = $result->fetch_assoc()){ $fees[]=$row; }
?>
Then in your main loop
<?php
foreach ($fees as $fee) {
?>
...
<td name="selected_fees"><?php echo $fee['fee_name']; ?></td>
<td name="amount"><?php echo $fee['amount']; ?></td>
<td><?php echo $fee['type']; ?></td>
</tr>
<?php } ?>