1

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?

7
  • Did you try using .trigger like $('#children-div select[name="number_children"]').val('3').trigger('change'); Jun 20, 2017 at 15:20
  • Yes, I've tried multiple ways including this one, but it all works only when typed in browser console (maybe in .js file too), but nothing works if the code is executed by my chrome extension. It is weird... does Drupal somehow verify what exactly triggered the event? Is it even possible?
    – Axel Stone
    Jun 20, 2017 at 16:24
  • You could try to use the keyboard/mouse events. Like focus the element with click, choose the option with mouse up/down, and select with enter.
    – rémy
    Jun 21, 2017 at 6:40
  • I have tried to to use .click() on select and then .click() on the option DOM element but it does not work on select element: stackoverflow.com/questions/430237/…
    – Axel Stone
    Jun 21, 2017 at 7:11
  • The t() function MUST only take English strings. api.drupal.org/api/drupal/includes%21bootstrap.inc/function/t/…
    – leymannx
    Jun 21, 2017 at 9:39

3 Answers 3

1
+50

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');
7
  • Tryed, but no effect.
    – Axel Stone
    Jun 19, 2017 at 8:52
  • 1
    Strange, this event should invoke the ajax callback .. have you some other speciality in your setup/code. what do you do in the callback function ? do you have an js error in the console ?
    – rémy
    Jun 19, 2017 at 9:10
  • No, there is nothing special in setup/code. Maybe there is more complicated drupal JS mechanism that is triggering ajax than a single change event.
    – Axel Stone
    Jun 20, 2017 at 8:08
  • gave you two more inputs, see my edits.
    – rémy
    Jun 20, 2017 at 9:57
  • Probably you're right. I just found that if I type directly to console command $('#children-div select[name="number_children"]').val('3').change(); it will properly trigger a change event. But if the same command is executed by my chrome extesnion, for some reason it changes the value but doesn't trigger an ajax.
    – Axel Stone
    Jun 20, 2017 at 11:58
1

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.

1
  • mousedown is used by buttons, change by select's
    – rémy
    Jun 21, 2017 at 11:39
0

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));

1
  • 1
    if the command is not executed at all, the extended custom command won't be neither ...
    – rémy
    Jun 21, 2017 at 11:40

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.