how to implement Ajax callback on form_alter for entity field?

Question

EDITED: I am able to display image for a field dropdown which have entity reference values to another content type. That is when a node content is edited or created.

Note: I'm not creating form elements I'm using them.

For a content type I have a field_select dropdown list (entity reference to another content type). I am trying to alter my form, to display the images of the selected entity from dropdown.

I'm new to the ajax callback functions, and need a little help here. I have a searched a lot and succeeded a bit.

output of my dsm($form):

$form => array (
['field_select'] => array (
  ['und'] => array (
    ['#options'] => array ( 
      [_none] => -None-
        [1] => content1 //1 is key
        [2] => content2 //2 is key
        [3] => content3 //3 is key
      )
    )
  )
)

Present ISSUE: When the below drop down is selected to a value of above, Image is being displayed in the dummy field below, but only once. For example if I select 1 (content1) the it renders image from node 1 according to the ajax callback function [success]. But now if I select 2 its not loading image from node2, instead it shows only node1 image which was rendered first.

function custom_form_alter(&$form, &$form_state, $form_id){

 if ($form_id == "article_node_form"){
   $form['field_select']['und']['#ajax'] = array(
     'callback' => 'field_select_ajax_callback',
     'wrapper' => 'another-field-select-image',
   );
   $form['field_select']['und']['#prefix'] = '<div id="another-field-select-image">';
   $form['field_select']['und']['#suffix'] = '</div>';

}

function field_select_ajax_callback($form, $form_state) {
  $id = $form_state['values']['field_select']['und'][0]['target_id']; //node id
  $node_id = node_load($id);

  if(is_object($node_id)) {
    $image_uri = $node_id->field_image['und'][0]['uri'];
    $image_url = file_create_url($image_uri);
    $image = '<img src="' .$image_url. '" />';
  }  
  return $image;
}

I want to display respective selected dropdown image near to field-select

Answer 1

Posting my own answer, I will be happy if it helps someone.

function custom_form_alter(&$form, &$form_state, $form_id) {

  if ($form_id == "article_node_form"){
    $form['field_select']['und']['#ajax'] = array(
      'callback' => 'field_select_ajax_callback', 
      'wrapper' => 'field-image', 
    );

//Note: this $form_state is set only after ajax function call (field_select_ajax_callback)
    if(isset($form_state['values']['field_select']['und'][0]['target_id'])) {
      $node_id = $form_state['values']['field_select']['und'][0]['target_id'];
      $image_path = get_image($node_id);
      $form['field_image']['und'] = array(
        '#markup' => '<div class="sponsor-image"> ' .$image_path. ' </div>',
      );
    }
    $form['field_image']['und']['#prefix'] = '<div id="field-image">';
    $form['field_image']['und']['#suffix'] = '</div>';
    return $form;
  }
}

function field_select_ajax_callback($form, $form_state) {
  return $form['field_image']; // very important step, Where I did it differently from previous. 
}

function get_image($id) {
  $node_id = node_load($id);

  if(is_object($node_id)) {
    $image_uri = $node_id->field_image['und'][0]['uri'];
    $image_url = file_create_url($image_uri);
    $image = '<img src="' .$image_url. '" />';
  }
  return $image;
}

Yay fixed it.

Answer 2

As a guide for de ajax you can check this module in the dev version at this moment and then adapt it to show image. I think it can help you a lot.

https://www.drupal.org/project/entity_field_condition/releases/8.x-1.x-dev