automatically updates the table without refreshing/reloading the page

Question

I would like to ask if how do I get the latest update of my data that is displayed in my table without reloading or refreshing it. The insertion of the data is already good, it already inserts however I see that the page is still reloading. I am still new to ajax and sweetalert using the client-side.

addingUser.js

$(document).ready(function(){
    $('#addStudent').click(function(e){
        e.preventDefault();
        Swal.fire({
            title: "Are you sure?",
            text: "New student will be added added!",
            icon: "success",
            showCancelButton: true,
            allowEscapeKey : false,
            allowOutsideClick: false
        }).then((result) => {
            if (result.isConfirmed) {
                var valid = this.form.checkValidity();
                if(valid){
                    var studentNumberId = $('#studentNumberId').val();
                    var studentFullName = $('#studentFullName').val();
                    var studentPassword = $('#studentPassword').val();
                    var studentEmail = $('#studentEmail').val();
                    var studentYearBlock = $('#studentYearBlock').val();
                        e.preventDefault()
                        $.ajax({
                            type: 'POST',
                            url: 'includes/model_addStudent.php',
                            data: {studentNumberId: studentNumberId,studentFullName: studentFullName,studentPassword: studentPassword,studentEmail: studentEmail,
                                studentYearBlock: studentYearBlock},
                            success: function(data){
                                Swal.fire({
                                    title: "Successfully Added!",
                                    text: "New student has been added!",
                                    icon: "success"
                                }).then(function() {
                                    // how to append the buttons here? it doesn't append or how do I append the entire page so that there will be a button after inserting a data in the table (see the image provided below)
                                    <tr>
                                       <td>${studentNumberId}</td>
                                       <td>${studentFullName}</td>
                                       <td>${studentEmail}</td>
                                       <td>${studentYearBlock}</td>
                                       </tr>
                                });
                            },
                            error: function(xhr, thrownError, ajaxOptions){
                                Swal.fire({
                                    title: "Successfully Added!",
                                    text: thrownError,
                                    icon: "info"
                                })
                            } 
                        });
                }
                else {
                    Swal.fire({
                        title: "Error!",
                        text: "Invalid Form",
                        icon: "warning"
                    });
                }
            }
            else {
                Swal.fire(
                'No Changes!',
                'No New Student has been added.',
                'info'
                )
            }
        });   
            });      
    });

and this is the code of my table.

table.php

<?php
include 'includes/connection_operation.php';
$sql = "SELECT * FROM tbl_students";
$query = mysqli_query($conn,$sql);

    if($query)
    {
        while($row = mysqli_fetch_assoc($query))
        {
            ?>
    <td><?php echo $row['student_id']; ?></td>
    <td><?php echo $row['student_name']; ?></td>
    <td><?php echo $row['student_email']; ?></td>
    <td><?php echo $row['student_yrblock']; ?></td>

    <td>
        <input type="submit" name="viewStudents" id="viewStudents" value="View" class="btn btn-info" 
        data-toggle="modal" data-target="#viewExistingStudents<?php echo $row["ID"];?>">
        <input type="submit" name="deleteRecord" id="deleteRecord" value="Delete" class="btn btn-danger" 
        data-toggle="modal" data-target="#deleteSelectedStudent<?php echo $row["ID"];?>">
    </td>
    </tr>
    <?php 
    include './helper/helper_viewExistingStudents.php';
    include './helper/helper_deleteSelectedStudent.php';
        }
    }   
?>

is there a way like instead of appending the table data, I'll just append the whole file? I can't append the buttons but only the table data.

Answer 1

You just have to add it to the page, simple as that actually. Something like this (since you are using jquery) should get you started:

I am going to have to make assumptions about the way your page is laid out. Going to assume it is a table with the class "mytable".

Inside your success: function(data){ part :

$('.mytable').append(`
    <tr>
        <td>${studentNumberId}</td>
        <td>${studentFullName}</td>
        <td>${studentEmail}</td>
        <td>${studentYearBlock}</td>
    </tr>
`);

This should get you started on understanding the concept.