web-dev-qa-db-ja.com

Wordpressハートビートをajaxフォームにリンクする方法

$_POSTs入力値、およびデータベースにデータを保存するユーザーのID：

// frontend form 
<form id="form">
    <input type="radio" name="location" id="name1" value="1">
    <label for="name1">Label 1</label>

    <input type="radio" name="location" id="name2" value="2">
    <label for="name2">Label 2</label>

    <input type="radio" name="location" id="name3" value="3">
    <label for="name3">Label 3</label>

    <input type="hidden" name="userid" value="{userid}">
</form>     


// footer script
<script>
$(function() {
    $( "#form" ).change(function(a) {
        a.preventDefault();
        var formdata = new FormData($(this)[0]);

        $.ajax({
            method:         "POST",
            data:           formdata,
            contentType:    false,
            processData:    false
        });
    });
});
</script>


// validation snippet
<?php
    $location = isset( $_POST['location'] ) ? $_POST['location'] : '';
    $userID   = isset( $_POST['userid']   ) ? $_POST['userid']   : '';
    update_user_meta( $userID, 'location_current',  $location );
?>

ユーザーがデスクトップから無線の場所を設定すると、フォームがサーバーに送信され、保存されます。

各ユーザーは、inputを持たないが位置の値をエコー出力するディスプレイ（タブレット）も持っています。

私は現在、5分ごとにタブレットを更新していますが、WPハートビートを使用したプッシュのようにしたいと思っています。

私はこの例を使ってみました： https://Gist.github.com/strangerstudios/588812

しかし、data['client'] = 'marco';であることdata['client'] = '<?= $_POST['location']; ?>';毎回印刷され、ページがロードされるか場所が変更されると更新されません。

ajaxjqueryformsfront-endheartbeat-api
3
markb

データを保存しています

Heartbeat API に基づいて、jsの_heartbeat-send_イベントで送信されたハートビートにカスタムデータを追加できます。これは、コード例にあるajax関数の代わりに使用されます。

_jQuery( document ).on( 'heartbeat-send', function ( event, data ) {
  // Grab the required form data
  data.location = jQuery('input[name="location"]:checked').val();
  data.userid = jQuery('input[name="userid"]').val();
});
_

次に、PHP with _hearbeat_recieved_ フィルターでデータを使用できます。 _heartbeat_nopriv_received_ フィルターもありません-特権環境。

_add_filter( 'heartbeat_received', 'myplugin_save_location_on_heartbeat', 10, 2 );
function myplugin_save_location_on_heartbeat( $response, $data ) {
  // data required
  if ( empty( $data['location'] ) || empty( $data['userid'] ) ) {
    return $response;
  }
  // validate
  if ( ! is_numeric( $data['location'] ) || ! is_numeric( $data['userid'] ) ) {
    return $response;
  }
  // sanitize
  $location = absint( $data['location'] );
  $userID = absint( $data['userid'] );
  // update
  update_user_meta( $userID, 'location_current',  $location );
  // optional response
  $send_data_back = true;
  if ( $send_data_back ) {
    $response['location'] = $location;
    $response['userid'] = $userID;
  }
  // send response
  return $response;
}
_

Jsの_hearbeat_recieved_イベントで再びデータにアクセスできます（_heartbeat-tick_からの応答）。

_jQuery( document ).on( 'heartbeat-tick', function ( event, data ) {
  // Check for our data, and use it.
  if ( ! data.location || ! data.userid ) {
    return;
  }
  // use the response as needed
  console.log("location: " + data.location);
  console.log("user: " + data.userid);
});
_

データを取得

いくつかの調整を行うと、位置データを保存する代わりに、それだけを取得できます。

最初にjsで_heartbeat-send_を使用してユーザーIDを送信します。

_jQuery( document ).on( 'heartbeat-send', function ( event, data ) {
  data.userid = jQuery('input[name="userid"]').val();
});
_

次に、現在の場所のユーザーメタでPHP on _hearbeat_recieved_、

_add_filter( 'heartbeat_received', 'myplugin_get_location_on_heartbeat', 10, 2 );
function myplugin_get_location_on_heartbeat( $response, $data ) {
  // data required
  if ( empty( $data['userid'] ) ) {
    return $response;
  }
  // validate
  if ( ! is_numeric( $data['userid'] ) ) {
    return $response;
  }
  // sanitize
  $userID = absint( $data['userid'] );
  // update
  $location = get_user_meta( $userID, 'location_current',  true );
  // send response
  return $response['location'] = $location;
}
_

EDIT 1：PHP応答関数内で get_current_user_id() を使用してユーザーを取得することもできると思いますid、_heartbeat-send_イベントのjsで送信したくない、または送信できない場合。

最後に、jsの_heartbeat-tick_で受信したデータでビューを更新します。

_jQuery( document ).on( 'heartbeat-tick', function ( event, data ) {
  // Check for our data, and use it.
  if ( ! data.location ) {
    return;
  }
  // if using radio buttons
  jQuery('input[name="location"][value='"+data.location+"']').prop('checked', true);
  // if you want to show result in somewhere else
  jQuery('#location-output-element').text(data.location);
});
_

これがあなたの質問に役立ち、答えることを願っています。

3
Antti Koskinen

HTTPメソッドを使用して値を送信するには、ページがデータを送信する必要があります。ページの更新のみが機能しません。ページはデータの場所を含む投稿リクエストを送信する必要があり、フォームデータの送信にajaxを使用しています。

API data['client'] = 'marco'; ajaxリクエストから送信された独自のデータオブジェクトを使用できます。

data['client'] = your formdata;

または、上記と同じPHPコードを使用できます。

data['client'] = '<?php echo $_POST['location']; ?>'; // make sure you validate data first.

これで問題が解決しない場合は、APIの完全な実装とajaxデータの使用方法を示してください。

0
ashiish.me