Ajax callback of select form field not triggered when changed by javascript, only when changed manually

Question

I have a simple ajax form with select form input:

$form['children']['number_children'] = array(
  '#title' => t('Počet detí'),
  '#type' => 'select',
  '#options' => range(0, 15),
  '#default_value' => $number_children,
  '#ajax' => array(
    'callback' => 'ajax_callback_registration_children',
    'wrapper' => 'children-div',
    'method' => 'replace',
    'effect' => 'fade',
  ),
);

When the select input is changed manually it properly executes an ajax and appends new inputs into the form. But I need to trigger the ajax callback by javasrcipt code that is changing the selected option:

$('#children-div select[name="number_children"]').val('3').change();

This changes the value, but the ajax is not triggered at all. Why is it not working and is there something I could do?

---

EDIT: It works when this command: $('#children-div select[name="number_children"]').val('3').change(); or another way of triggering an event is typed in browser console, but not if the same code is executed from my chrome extension. Is it possible that Drupal somehow verifies what exactly triggered the event?

Answer 1

try to specify the event, like

$form['children']['number_children'] = array(
  '#title' => t('Počet detí'),
  '#type' => 'select',
  '#options' => range(0, 15),
  '#default_value' => $number_children,
  '#ajax' => array(
    'callback' => 'ajax_callback_registration_children',
    'wrapper' => 'children-div',
    'method' => 'replace',
    'effect' => 'fade',
    'event' => 'change',
  ),
);

this should be sufficent .. (but select uses change already as default event ..)

other things to try could be

add a custom event, like:

'event' => 'custom_change',

jQuery('select').trigger('custom_change');

See How to trigger Ajax forms machinery

or invoke the callback yourself:

Drupal.ajax['#ID'].eventResponse('#ID');

Answer 2

I had a similar problem when I tried to trigger a click on a form button to fire an Ajax submit in Drupal. It then turned out it explicitly needed to be a .mousedown(). Nothing else.

See this question here for reference: How to programmatically trigger a click on an AJAX enabled form submit button?.

So, I guess that all that's not sufficiently here is you calling .change(). Please try all other alternative possibilities.

In views-admin.js file of the Views module I found .trigger('change') for overriding a select. Maybe that's it.

Answer 3

Try this code

Ajax callback function :

/**
 * Ajax Callback 
 *
 * @param type $form
 * @param type $form_state
 * @return type
 */
function ajax_callback_registration_children(&$form, $form_state) {
  $commands = [];

  $commands[] = ajax_command_html('#children-div');
  // Call js.
  $commands[] = ['command' => 'afterAjaxCallbackExample',
    'selectedValue' => $form_state['values']['number_children'],
  ];
  return array('#type' => 'ajax', '#commands' => $commands);
}

js:

(function($, Drupal){
// Our function name is prototyped as part of the Drupal.ajax namespace, adding to the commands:
Drupal.ajax.prototype.commands.afterAjaxCallbackExample = function(ajax, response, status)
{
   // your code here..
};

}(jQuery, Drupal));