0

I want to change, using Ajax, some attributes to field2 (a select widget) when field1 changes:

In mymodule.module:

function mymodule_form_NODETYPE_FORM_alter(&$form, &$form_state, $form_id) {
    $form['filed1']["widget"]['#ajax'] = array(
        'callback' => 'on_filed1_change',
        'wrapper' => 'edit-field-filed2-wrapper', 
        'event' => 'change',
        'method' => 'replace',
    );
}

function on_filed1_change(array $form, FormStateInterface $form_state)  {
    $form['field2'] = $modified_field2;
    return $form['field2'];
}

This works only the first time.

I found out the following id's have been changed with additional trailing random numbers:

  • edit-field-field2-wrapper--GCPg2vSCav0 for field2 wrapper <div>
  • edit-field-field2--EXhOuuWQld8 for field2 <select> element

Since the original Ajax wrapper edit-field-field2-wrapper no longer exists, no further modifications to field2 are possible.

Why does this happen? And how can I prevent this from happening, or use the new IDs as wrapper in the Ajax call?

I'm using 8.6.0-dev.

  • It increments to make them unique – Kevin Jul 15 '18 at 12:26
2
function mymodule_form_NODETYPE_FORM_alter(&$form, &$form_state, $form_id) {
    $form['field2']['#attributes']['id'] = 'my_dom_id_for_elem2';
    // or if it doesn't work properly you can wrap the element
    // $form['field2']['#prefix'] = '<div id="my_dom_id_for_elem2">';
    // $form['field2']['#suffix'] = '</div>';

    $form['filed1']["widget"]['#ajax'] = array(
        'callback' => 'on_filed1_change',
        'wrapper' => 'my_dom_id_for_elem2', 
        'event' => 'change',
        'method' => 'replace',
    ); }

function on_filed1_change(array $form, FormStateInterface $form_state) {
    // This line is not necessary, at this time $form['field2']
    // has already been modified and you can just return the form element itself, it will be used as response.data by javascript.
    //$form['field2'] = $modified_field2;
    return $form['field2']; 

}

  • @kladrin This works fine for me for textfield elements, but for dropdown select lists, it changes the top level select Id, but all ID's on its select elements still have their ID's incrementing, and there are too many to manually set ID's for – user1015214 Aug 6 '18 at 21:14
1

Drupal changes DOM IDs on every submit. You can, however, fix them by adding an attribute specification to your element:

$form['field2']['#attributes']['id'] = 'my_dom_id_for_elem2';

and then use my_dom_id_for_elem2 as your wrapper property.

  • Where exactly should this line of code be placed? – Orion Jul 15 '18 at 17:57
  • I added a new answer based on your code, try that solution and read the comments, you can either add the ID attribute or wrap the element with a div, I prefer the latter :) – Kladrian Jul 15 '18 at 18:43

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.