web-dev-qa-db-ja.com

ajaxコールバックが完了した後でjqueryイベントを実行する方法はありますか？

入力フィールドの少ないシンプルなフォームを持っている。 ajaxコールバックの送信ボタンをクリックした後、テーブル要素を返します。

コード：

//Hypertension treatment
        $form['hyper_treat'] = array (
      '#type' => 'radios',
      '#title' => ('Hypertension treatment:'),                                  
      '#options' => array(
        'y' => 'Yes', 
        'n' => 'No'
      ),
    );


//Hypercholesterolemia
    $form['hyperchol'] = array (
  '#type' => 'radios',
  '#title' => ('Hypercholesterolemia:'),                                        
  '#options' => array(
    'y' => 'Yes', 
    'n' => 'No'
  ),
);

//submit button
    $form['action'] = [
    '#prefix' => '<div id = "ajax_submit">',
     '#name' => 'ajax_action',
    '#type' => 'button',
    '#value' => $this->t('Submit'),
    '#ajax' => [
    'callback' => '::setMessage',
    'wrapper' => 'scrollable',
    'method' => 'replaceWith',
    'effect' => 'fade', 
    ],
    ];

    //table
    $form['table'] = array(
    '#prefix' => '<div id="scrollable" class = "col-md-8"><h4>View Data</h4>',
        '#type' => 'tableselect',
         '#suffix' => '</div>',
        '#header' => $header,
         '#options' => $options,
        '#disabled' => $disabled,
        '#attributes' => array('id' => 'sort-table'),
        '#empty' => t('Select criteria and search data'),
      );

//callback function
   public function setMessage(array $form, FormStateInterface $form_state) {
  $options = getOptions(); //gets the associative array
  $form['table']['#options'] = $options;
  return $form['table'];
}

Ajaxを使用して返されたテーブルのページ分割とソートに問題がありました。そこで、代替オプションとして「データテーブル」を使用することを考えました。

したがって、コールバックの後、以下のjqueryを適用して、テーブルをデータテーブルとして表示します。

 $('#sort-table').DataTable( {
        order: [[ 1, 'asc' ]]
    } );

ボタンの「マウスダウン」イベントを実行しようとしましたが、jqueryはajaxコールバックの前に実行されました。

Ajaxコールバックから返された$ form ['table']要素をデータテーブルとして表す方法はありますか？

enter image description here

テーブルが返された後に他のイベントをトリガーすると、データテーブルとして表示されますが、$ form ['table']が返された直後に、返されたテーブルがデータテーブルとして表示されるようにしています。これは、ajaxコールバック関数からテーブル要素が返された直後にjqueryスニペットが実行された場合にのみ発生します。

8javascriptajax
1
Abhi

これにはカスタムajaxコマンドを使用できます。 Ajaxコマンドは、サーバー上のJS関数に対応するphpクラスであり、Ajax応答の後にDrupal JS APIが呼び出します。

簡単に見ると、 このチュートリアル は、Drupal 8.でカスタムAjaxコマンドを作成する方法の概要を示すようです。

1
Jaypan

jQueryには .ajaxComplete() および ajaxSuccess() メソッドが 他のajaxイベントハンドラー の中にあります。クライアント側では、次のようなことを試すことができます。

jQuery.ajaxSuccess(function(){
    $('#sort-table').DataTable( {
        order: [[ 1, 'asc' ]]
    });
});
1
sfmiller940