John Davidson

Message:

I want to rerun a PHP File which was loaded in a div in my HTML code. On my main page, I have a form and a table. The form adds rows to the MySQL table, and the table on the page outputs that MySQL table. I want the table on the HTML page to update when the new row is added via the form, without refreshing the page. I tried putting the load command in the success part of the ajax function for my form but that didn't work. I looked at many other answers and none worked for me.

This is my code

redeem.php

        <h1>Rewards</h1>

        <form id="add-reward-form" action="" method="POST">

                <label for="inputRewardDescription" class="form-label">Enter Reward Description</label>

                <input type="text" id=inputRewardDescription name="description" class="form-control" required>

                

                <label for="inputRewardCost" class="form-label">Enter Reward Cost</label>

                <input type="text" id=inputRewardCost name="points" class="form-control" required>

    

                <button type="submit" class="btn btn-success" id="submit-btn">Save</button>

        </form>  

        <p id="message"></p>

        <div id="sql-table">

            <?php include 'tables.php'; ?>

        </div>

tables.php

<?php

        $host    = "";

        $user    = "";

        $pass    = "";

        $db_name = "";



        //create connection

        $connection = mysqli_connect($host, $user, $pass, $db_name);



        //test if connection failed

        if(mysqli_connect_errno()){

            die("connection failed: "

                . mysqli_connect_error()

                . " (" . mysqli_connect_errno()

                . ")");

        }



        //get results from database

        $result = mysqli_query($connection,"SELECT RewardName, PointsRequired FROM rewards");

        $all_reward = array();  //declare an array for saving property

            while ($reward = mysqli_fetch_field($result)) {

                // echo '<th scope="col">' . $reward->name . '</th>';  //get field name for header

                array_push($all_reward, $reward->name);  //save those to array

            }

            // echo '      </tr>

            //         </thead>'; //end tr tag

            echo '<table class="table">

            <thead>

                <tr>

                <th scope="col">Reward</th>

                <th scope="col">Points Required</th>

                <th scope="col">Edit</th>

                <th scope="col">Delete</th>

                </tr>

            </thead>';

    

            //showing all data

            while ($row = mysqli_fetch_array($result)) {

                echo "<tbody>

                        <tr>";

                foreach ($all_reward as $item) {

                    echo '<td>' . $row[$item] . '</td>'; //get items using property value

                }

                echo '<td><i class="fas fa-edit"></i></td>';

                echo '<td><i class="fas fa-trash"></i></td>';

                echo '  </tr>

                    </tbody>';

            }

            echo "</table>";

    ?>

redeem-form.js

$(document).ready(function() {

    $("#add-reward-form").submit(function(e) {

        e.preventDefault();

        $.ajax( {

            url: "add_rewards.php", 

            method: "POST",

            data: $("form").serialize(),

            dataType: "text",

            success: function(strMessage) {

                $("#message").text(strMessage);

                $("#add-reward-form")[0].reset();

                $("#sql-table").load(" #sql-table > *");

            }

        });

        $("#sql-table").load(" #sql-table > *");

    });

    

});

The form works perfectly fine with ajax, and submits to the database without refreshing. But I would like to update the table on my page as well without reloading.

$("#sql-table").load(" #sql-table > *");

This is what I tried. I placed it inside the success function and the submit function but both did not work.

---

My Answer:
One possible solution is to use a combination of AJAX and PHP to achieve this. Here's an example of how you can update the table on your HTML page without reloading:

1. Create a separate PHP file (e.g. update_table.php) that contains the code to fetch and display the updated table data. This file should only contain the PHP code that generates the table HTML, similar to what you have in tables.php.

2. In your redeem-form.js file, after successfully submitting the form via AJAX, make another AJAX call to fetch the updated table data from the update_table.php file and replace the content of the #sql-table div with the new data.

Here's an updated version of your redeem-form.js file:

javascript
$(document).ready(function() {
$("#add-reward-form").submit(function(e) {
e.preventDefault();
$.ajax({
url: "add_rewards.php",
method: "POST",
data: $("form").serialize(),
dataType: "text",
success: function(strMessage) {
$("#message").text(strMessage);
$("#add-reward-form")[0].reset();

// Update the table on the page without reloading
$.ajax({
url: "update_table.php",
method: "GET",
success: function(data) {
$("#sql-table").html(data);
}
});
}
});
});
});


In this updated code, after successfully submitting the form, a new AJAX call is made to fetch the updated table data from the update_table.php file. The data returned from the PHP file is then used to replace the content of the #sql-table div on the page.

Make sure to adjust the file paths and URLs in the code to match your project structure. This approach should allow you to update the table on your HTML page without reloading the entire page.