Comment lier Wordpress heartbeat à ajax form

Question

J'ai un formulaire qui $_POSTs une valeur d'entrée et l'ID de l'utilisateur qui enregistre les données dans la base de données:

// 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 );
?>

Lorsque les utilisateurs définissent l'emplacement radio à partir de leur bureau, il envoie le formulaire au serveur et l'enregistre.

Chaque utilisateur dispose également d'un écran (tablette) qui n'a pas de input mais fait écho à la valeur de l'emplacement.

J'ai actuellement la tablette rafraîchissante toutes les 5 minutes, mais je voulais que ce soit plus un Push avec WP heartbeat.

J'ai essayé d'utiliser cet exemple: https://Gist.github.com/strangerstudios/588812

Mais je ne savais pas comment avoir la valeur de data['client'] = 'marco'; être data['client'] = '<?= $_POST['location']; ?>'; chaque fois qu'elle est imprimée une fois et non actualisée une fois la page chargée ou l'emplacement modifié.

Answer 1

Sauvegarde des données

Basé sur Heartbeat API , vous pouvez ajouter des données personnalisées à l'événement Heartbeat envoyé sur heartbeat-send Dans js. Cela serait utilisé à la place de la fonction ajax que vous avez dans votre exemple de code.

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

Vous pouvez ensuite utiliser les données dans le filtre PHP avec hearbeat_recieved . Il y a aussi le filtre heartbeat_nopriv_received pour les environnements sans privilèges.

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

Vous pouvez accéder à nouveau aux données (réponse de hearbeat_recieved) Lors de l'événement heartbeat-tick Dans js,

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

Obtenir des données

Avec quelques ajustements, vous pouvez obtenir uniquement les données de localisation au lieu de les enregistrer.

Envoyez d'abord l'ID utilisateur avec heartbeat-send Dans js,

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

Répondez ensuite avec la méta de l'utilisateur de l'emplacement actuel dans 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: Je pense que vous pouvez également utiliser get_current_user_id() à l'intérieur de la fonction de réponse php pour obtenir l'utilisateur id, si vous ne voulez pas ou ne pouvez pas l'envoyer en js lors de l'événement heartbeat-send.

Enfin, mettez à jour votre vue avec les données reçues sur heartbeat-tick Dans js,

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

J'espère que cela aide et répond à votre question.

Answer 2

Pour envoyer de la valeur à l'aide de méthodes HTTP, la page doit soumettre des données. Seule l'actualisation de la page ne fonctionnera pas. Votre page doit envoyer une demande de publication avec l'emplacement des données et vous utilisez ajax pour envoyer les données du formulaire.

Dans l'API data['client'] = 'marco'; vous pouvez utiliser votre propre objet de données envoyé à partir de votre demande ajax.

data['client'] = your formdata;

ou vous pouvez utiliser votre PHP identique à celui que vous avez mentionné ci-dessus:

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

Si cela ne vous aide pas, veuillez montrer l'implémentation complète de l'API et l'utilisation de vos données ajax.