Refresh table data with Ajax

Question

The script below is for a live question moderation system I'm developing. Someone could give me a hint of how I do so that the script below refresh the query and refresh the result automatically, it can be every 30 seconds. Maybe some solution in Ajax?

<?php
global $wpdb;
if (!empty($_POST)) {

$wpdb->query($wpdb->prepare("UPDATE wp_modera SET answered = 'Yes' WHERE id='" . $_POST['id']. "'"  ));

}
?>

<script>

jQuery(document).ready(function($){
    $("#form1").on("change", "input:checkbox", function(){
        $("#form1").submit();
    });

    setInterval(function(){
        $.get('#form1', function(data){
            //$("#form1").html(data).find('#form1'); 
        });
    },3000);


});
</script>

<style>
table {width: 100%;}
table tr td {border-bottom: 1px solid #666; padding: 20px 0;}
table tr td:first-child {padding-right: 20px;}
table tr td .title {color: #315AA9;}
</style>

<form id="form1" method="post" action="http://example.com/test/" >
<table>
    <?php

    global $wpdb;
    $results = $wpdb->get_results( 'SELECT id, time, city, state, question, name FROM wp_modera WHERE release = "Yes" AND flag2 <> "PLT" AND answered = "No" ORDER BY time DESC', OBJECT );

    foreach($results as $result){
        echo "<tr>";

        $phpdate = strtotime($result->time );
        $mysqldate = date( 'H:i:s', $phpdate );

        echo "<td><strong class='title'>" . $mysqldate . " - " . $result->name . " - " . $result->city . " / " . $result->state . '</strong><br><br> <strong>Question: </strong>' . $result->question . "</td>";
        echo "<td><input type='checkbox' name='id' value='" . $result->id . "' /></td>";

        echo "</tr>";
    }

    ?> 
</table>
</form>

Answer 1

In wordpress you need to use ajax in a specific way to follow the standard https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)

create a function in your functions.php file to handle the data retrieval and/or display of the table and add a hook to wp_ajax_(fires only for logged in users) and wp_ajax_nopriv_(fires for guests as well)

add_action( 'wp_ajax_add_foobar', 'prefix_ajax_add_foobar' );
add_action( 'wp_ajax_nopriv_add_foobar', 'prefix_ajax_add_foobar' );

function prefix_ajax_add_foobar() {
    // Handle request then generate response using WP_Ajax_Response
    //generate table data and build table html here

    // Don't forget to stop execution afterward.
    wp_die();
}

once added to the functions.php page you can then include the JS in your script page or in a seperate file

jQuery.post(
    ajaxurl, 
    {
        'action': 'add_foobar',
        'data':   'foobarid'
    }, 
    function(response){
        alert('The server responded: ' + response);
    }
);

So the ajaxurl action refers to your action registered in wordpress after wp_ajax_ or wp_ajax_nopriv_. If you register it like this wp_ajax_nopriv_fill_my_table your ajaxurl action will be fill_my_table

I would also suggest here to make the ajax call in a JS function so that you can call the same function at (document).ready() Here is another post where it is well answered and relates to your question : Jquery ajax to custom php file: returning blank data