How to display a table using AJAX in modal?

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">&times;</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>

What's the problem with all that code? What have you tried to resolve the problem? Also, be warned that your SQL query is widely open for injections - please have a look at prepared statements — Nico Haase, May 18 '21 at 19:43
@NicoHaase yes mate i've tried the code above the problem is, the table is showing once i click the `button add_fees` but instead it show the data at the top of `navbar` at the same time the modal was close — reckless Conclusion, May 18 '21 at 19:54
**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, May 18 '21 at 20:11

score 0 · Answer 1 · edited May 18 '21 at 20:11

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 } ?>

How to display a table using AJAX in modal?

officer_cashier.php

script

cashier_template.php

1 Answers1