How do I modify a core field to use Ajax and add markup?

Question

I am still getting the hang of D8... I have some entity types with various reference fields. I need to ajax in other values from another node type when changing the value of the entity reference select field I have.

Node type form 1:

#####################################
#  _____                            #
# |Title|                           #
#  ___________                      #
# |Description|                     #
#  _______________________________  #
# |Node type 2 select reference |v| #
#                                   #
#####################################

Whenever I select a node from the Node type 2 select reference field I would like to Ajax in a specific view mode of the node as #suffix markup. After selecting a node the resulting form should look like this:

#####################################
#  _____                            #
# |Title|                           #
#  ___________                      #
# |Description|                     #
#  _________________________        #
# |Some node (node id: 2) |v|       #
#                                   #
#  * Node 2 value from field 'a'    #
#  * Node 2 value from field 'b'    #
#                                   #
#####################################

I have attempted using #ajax property in a hook_form_alter on the select field but am not getting it to work due to errors. What is the best approach here?

Answer 1

After much testing and finding a missing character in one line even I was able to come up with some working code:

<?php
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\ReplaceCommand;

function fsed_entry_form_eform_submission_fsed_entry_submit_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  $form['field_faculty_member']['widget']['#ajax'] = array(
    'event' => 'change',
    'callback' => 'fsed_entry_faculty_member_ajax_callback',
    'wrapper' => 'faculty-member-details-wrapper',
  );
  $form['field_faculty_member']['widget']['#prefix'] = '<div id="faculty-member-details-wrapper">';
  $form['field_faculty_member']['widget']['#suffix'] = '</div>';
}

function fsed_entry_faculty_member_ajax_callback($form, &$form_state) {
  $nid = $form_state->getValue(array('field_faculty_member', 0, 'target_id'));
  if ($nid) {
    $view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
    $storage = \Drupal::entityTypeManager()->getStorage('node');
    $node = $storage->load($nid);
    $build = $view_builder->view($node, 'eform_preview');
    $output = render($build);
  }
  else {
    $output = '';
  }

  $form['field_faculty_member']['widget']['#suffix'] = $output . '</div>';

  return $form['field_faculty_member']['widget'];
}