web-dev-qa-db-ja.com

Ajaxコールバックフォームが完了した場合にjquery関数を実行する

選択オプションに基づいてチェックボックスオプションを置き換えるカスタムajaxコールバックを取得しました。

ここで、checkboxlistが更新された後、それらのチェックボックスでjquery関数を実行する必要があります。

コールバックの完了後、チェックボックスリストが更新された後で、このカスタムjquery関数を実行するにはどうすればよいですか？.

フォーム要素：

        $widget['select_box'] = array(
            '#type' => 'select',
            '#title' => 'Select bussen',
            '#options'  => $options,
            '#validated' => TRUE,
            '#default_value' => '_none',
            '#attributes' => array('class' => array('select-province')),
            //The callback
            '#ajax' => array(
              'callback' => 'ajax_select_callback',
              // 'wrapper' is the HTML id of the page element that will be replaced.
              'wrapper' => 'replace_select_div',
            ),
        );

        //Form element wich get updated
        $widget['select_box_2'] = array(
            '#type' => 'checkboxes',
            '#title' => 'Select bussen',
            '#options' => ...,
            '#prefix' => '<div id="replace_select_div">',
            '#suffix' => '</div>',
            );

Ajaxコールバック関数：

    function ajax_select_callback($form, $form_state) {
      // The form has already been submitted and updated. We can return the replaced
      // item as it is.
    return $form['line_item_fields']['field_bussen_select']['und'][0]['select_box_2']

    }

チェックボックスで実行するjquery関数：

    jQuery("input[type='checkbox']").change(function () {
        jQuery(this).parent().siblings('ul')
            .find("input[type='checkbox']")
            .prop('checked', this.checked);
    });
7formsajaxjavascriptroutes
1
mgoubert

： https://drupal.org/node/17121 で答えが見つかると思います。

セクション：JavaScript AJAX form

「jQueryをDrupal.behaviorsにアタッチします。これにより、新しいDOM要素が挿入されたときにいつでも実行できるようになります。ビューでAJAXを使用している場合、ページのセクションが再読み込みされるたびに、jQueryをリロード/実行します。」

私はもうそれを必要としないので、それをテストしませんでした:)、しかしそれでも知っておくと良いです！

0
mgoubert

Drupal.behavioursでJS関数をラップします。セクションの再読み込み後に機能します

(function ($) {
  Drupal.behaviors.myModuleBehaviours = {
    attach: function (context, settings) {
      $("input[type='checkbox']").change(function () {
        $(this).parent().siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
      });
    }
  }
})(jQuery);
0
Rostislav Sergeenkov

ajax_commands を操作する

あなたのコールバックは：

function ajax_select_callback($form, &$form_state) {
  $commands = array();
  // Replace the form element.
  $commands[] = ajax_command_replace('#edit-select_box_2-SELECTOR', render($form['select_box_2']), array());
  // Invoke any JavaScript func
  $commands[] = ajax_command_invoke(NULL, 'your_custom_js', array());

  // more commands...

  return array(
    '#type' => 'ajax',
    '#commands' => $commands,
  );
}

そしてJSでは：

jQuery.fn.your_custom_js = function () {
  ....
};

これはテストされておらず、エレガントな方法です。

0
Pan Chrono

Drupal 7のajaxイベントの後にJavaScript関数を呼び出すための、わかりやすくてわかりやすいチュートリアルを以下に示します。

http://www.jaypan.com/tutorial/calling-function-after-ajax-event-drupal-7

0
Shashwat Purav