How to link WordPress heartbeat to ajax form

Saving data

Based on Heartbeat API, you can add custom data to the sent heartbeat on heartbeat-send event in js. This would be used instead of the ajax function you have in your code example.

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

You can then use the data in PHP with hearbeat_recieved filter. There’s also the heartbeat_nopriv_received filter for no-privilege environments.

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

You can access the data (response from hearbeat_recieved) again on heartbeat-tick event in 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);
});

Get data

With couple of tweaks you can get just the location data instead of saving it.

First send user id with heartbeat-send in js,

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

Then respond with current location user meta in 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: I think you could also use get_current_user_id() inside the php response function to get the user id, if you don’t want to or can’t send it in js on heartbeat-send event.

Last, update your view with the recieved data on heartbeat-tick in 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);
});

I hope this helps and answers your question.