web-dev-qa-db-ja.com

手動で変更した場合のみ、JavaScriptによって変更されたときに選択フォームフィールドのAjaxコールバックがトリガーされない

私は選択フォーム入力を持つ単純なajaxフォームを持っています：

_$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',
  ),
);
_

選択入力が手動で変更されると、ajaxが適切に実行され、新しい入力がフォームに追加されます。しかし、選択したオプションを変更しているjavasrciptコードによってajaxコールバックをトリガーする必要があります。

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

これにより値が変更されますが、ajaxはまったくトリガーされません。なぜうまくいかず、私にできることがあるのですか？

[〜＃〜] edit [〜＃〜]：これは、コマンド$('#children-div select[name="number_children"]').val('3').change();またはイベントをトリガーする別の方法がブラウザーコンソールに入力されたときに機能しますが、同じ場合は機能しませんコードはmy chrome extensionから実行されます。Drupalが何がイベントを正確にトリガーしたかを何らかの方法で検証することは可能ですか？

7formsjavascriptajax
1
Incredible

DrupalでAjax送信を実行するためにフォームボタンのクリックをトリガーしようとすると、同様の問題が発生しました。その後、明示的に.mousedown()である必要があることがわかりました。他には何もありません。

参照のためにこの質問を参照してください： AJAX enabled form submit button？ をクリックしてプログラムでクリックをトリガーする方法.

したがって、ここで十分ではないのは、.change()を呼び出すことだけだと思います。他のすべての代替案を試してください。

ビューモジュールのviews-admin.jsファイルで、選択をオーバーライドするための.trigger('change')を見つけました。多分それだけです。

1
leymannx

次のようにイベントを指定してみてください

$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',
  ),
);

これで十分なはずです（ただし、selectはデフォルトのイベントとしてすでに変更を使用しています..）

他に試してみることができます

次のようなカスタムイベントを追加します。

'event' => 'custom_change',

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

を参照してくださいAjaxフォーム機械をトリガーする方法

または、自分でコールバックを呼び出します。

Drupal.ajax['#ID'].eventResponse('#ID');
1
rémy

このコードを試してください

Ajaxコールバック関数：

/**
 * 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））;

0
developer