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?

  • Did you try using .trigger like $('#children-div select[name="number_children"]').val('3').trigger('change'); – Елин Й. Jun 20 '17 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? – Incredible Jun 20 '17 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 '17 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/… – Incredible Jun 21 '17 at 7:11
  • The t() function MUST only take English strings. api.drupal.org/api/drupal/includes%21bootstrap.inc/function/t/… – leymannx Jun 21 '17 at 9:39
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');
  • Tryed, but no effect. – Incredible Jun 19 '17 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 '17 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. – Incredible Jun 20 '17 at 8:08
  • gave you two more inputs, see my edits. – rémy Jun 20 '17 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. – Incredible Jun 20 '17 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.

  • mousedown is used by buttons, change by select's – rémy Jun 21 '17 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
    if the command is not executed at all, the extended custom command won't be neither ... – rémy Jun 21 '17 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.