0

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.

ajax drop down

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

0

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

  • I'm working in Drupal7 – Arun Feb 27 '19 at 15:59
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.