web-dev-qa-db-ja.com

Drupal ajax呼び出しが完了したときにjavascript関数をトリガーするにはどうすればよいですか？

Drupal ajaxがDOMにデータを挿入して完了した後、追加の処理を行う必要があります。jQueryを使用すると、これは頭の痛いほど簡単でしたが、私がどのようにしているかを理解することはできません。 Drupal 7：s

私のajax化されたリンクに何かを追加しますか？ビヘイビアーのアタッチについて何か読んだ...混乱が生じ始めている...

7ajaxjavascript
7
SomethingOn

次のように、ajaxハンドラーによって返されているページにいくつかの追加コマンドを追加してしまいました。

$commands = array();
$commands[] = ajax_command_invoke(NULL, 'grid_content_loading', array('argument1', 'argument2'));
$commands[] = ajax_command_append('#grid-content-target', $html);
$commands[] = ajax_command_invoke(NULL, 'grid_content_loaded', array('argument1', 'argument2'));
$page = array('#type' => 'ajax', '#commands' => $commands);
ajax_deliver($page);

クライアント側では、jQueryを介して2つのJavaScript関数を作成しました。

(function($) {
$.fn.grid_content_loading = function($argument1, $argument2) {
   ...
};

$.fn.grid_content_loaded = function($argument1, $argument2) {
   ...
};
})(jQuery);
6
SomethingOn

私のプロジェクトでは、AJAXの呼び出し後にページの統計情報を更新する明確に定義されたJavaScriptコードを既に記述していました。

「jQueryを拡張する」ことなく、関数を再利用したかったので、新しいjQuery関数を定義する代わりに、既存のjQuery関数を使用して、次の解決策になりました。これは、「フラグ」モジュールが行うことに触発されました-ソリューションのように単一のハードコードされたカスタムjQueryプラグイン/拡張を使用するのではなく、単にイベントをトリガーし、多くのJavascriptイベントリスナーが応答して動作できるようにします以前の回答で探った。

Drupalモジュール：

_// in_some_ajax_function()

$commands[] = ajax_command_invoke('html', 'trigger', array('MY_EVENT'));
_

JavaScriptでは：

_// Added an event binding to my $(document).ready();

$(document).ready(function(){

  $(document).bind('MY_EVENT', function() {
    alert('MY_EVENT');
  });

});
_

Ajax_command_invokeの最初のパラメーターは決してネイティブJavaScriptオブジェクトではないことに注意する必要があります。そのため、「ドキュメント」（要素）セレクターに変換されるため、以下は機能しません。

_// This tries to select $('document')
// ... which is nothing, since there are no 'document' elements.

$commands[] = ajax_command_invoke('document', 'trigger', array('MY_EVENT'));
_

奇妙なことに、$(document)でのバインディングと$('html')でのトリガーは互換性があります。私はあなたが非常に創造的になり、より具体的でより深いレベルの要素にバインド/トリガーできると思います。トップレベルのイベントトリガーよりも意味のあるシナリオを考えられる場合は、コメントしてください！

3
starlocke

最良のオプションはjQuery ajaxComplete関数を使用することだと思います：

(function($){ 
   $(document).ajaxComplete(function(e, xhr, settings)
   {
     alert(settings.url);
   });
}(jQuery));

また、特定のajax関数に関数を使用したい場合は、フィールドに識別されたsettings.urlを使用して、次のように変更できます。

(function($) {
    $(document).ajaxComplete(function(e, xhr, settings){ 
    if (settings.url == "the path from step 1") {
        // Code to populate your fields here
    }
 });
}(jQuery));

これは、Drupal 7および8の場合）に役立ちました。

2
valdeci

コードサンプル：

$commands = array();
$commands[] = array(
    'command' => 'your_js_callback', // the name of your javascript callback
    'value1'  => 'My first value',
    'value2'  => 'My second value',
);
ajax_render($commands);

JSコード：

(function($, Drupal) {
    Drupal.ajax.prototype.commands.your_js_callback = function(ajax, response, status) {
        alert(response.value1);
        alert(response.value2);
    }
})(jQuery, Drupal);
1
Muhammad Reda

私はこの質問への回答を投稿しました

https://stackoverflow.com/a/19404566/894487

Drupal.ajax.prototype.commandsと$.fnの拡張の実際の違いはわかりません

前者の方が、関数をヒットするために必要なdomトラバーサルが不要なので、より効率的だと思います。それが重要かどうかはわかりません。

0
ErichBSchulz

これを行う方法についてのチュートリアルをDrupal 7： https://www.jaypan.com/tutorial/calling-function-after-ajax-event-drupal- 7

0
Jaypan

クイックハックソリューション：ロードされたコンテンツ内に画像を配置し、onload="[javascript function]()"属性を指定します。これが実際にあなたが探しているものかわかりません...または、これが正しい方法よりも簡単な場合...しかし、何もしないよりはましでしょうか？

0
Kirk Twist