web-dev-qa-db-ja.com

Ajaxでテーブルデータを更新する

以下のスクリプトは、私が開発しているライブ質問モデレーションシステム用です。以下のスクリプトがクエリを更新して結果を自動的に更新するようにする方法について、誰かが私にヒントを与えることができます。それは30秒ごとにすることができます。 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>
1
Pavanello

wordpressでは、標準に従うために特定の方法でajaxを使用する必要があります https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)

functions.phpファイルに関数を作成して、データの取得やテーブルの表示を処理し、wp_ajax_(ログインしているユーザーのみに起動)とwp_ajax_nopriv_(ゲストとして起動まあ)

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();
}

functions.phpページに追加したら、スクリプトページまたは別のファイルにJSを含めることができます

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

そのため、ajaxurlアクションは、wp_ajax_またはwp_ajax_nopriv_の後にwordpressに登録されたアクションを参照します。このように登録するとwp_ajax_nopriv_fill_my_table ajaxurlアクションはfill_my_tableになります

また、JS関数でajax呼び出しを行い、(document).ready()で同じ関数を呼び出せるようにすることもお勧めします。ここでは、回答がよく、質問に関連する別の投稿を示します。 Jquery ajax toカスタムphpファイル:空のデータを返す

0
marwyk87