AJAX with Drupal 7.を使用する方法を学びました。フォームで '#ajax'属性を使用する方法と、リンク付きの「use-ajax」クラスを使用します。
私のページには、スライダーが新しい画像に移動するたびにjQueryイベント(「スライド」と呼ばれます)を発行するNice jQueryスライダーがあります。イベントには、表示するスライド番号も含まれます。次のようにjQueryを使用してイベントにバインドできます。
$('.slider').bind('slide', function(e, data) { alert(data.slide); });
これにより、現在のスライドを示すアラートがポップアップ表示されます。代わりにAJAXを使用してDrupal 7's AJAXを呼び出し、この現在のスライド番号をDrupalに渡します。
私は答えを探していましたが、それがDrupal.ajax DOMオブジェクトに関係している可能性があると思いますが、よくわかりません。
スライダーを動かしているときにデータを表示したいと思います。
私が行う方法は、 '#ajax'属性を使用しないことです。
AJAX呼び出しを実装し、スライダーの値をPOST variable to '/ foo/ajax':
jQuery('#slider').slider({
// Define your slider (min, max etc)
...
// Add event handler
change: function(event, ui) {
jQuery.ajax({
type: 'POST',
url: '/foo/ajax',
dataType: 'json',
success: ajaxCompleted,
// Might want to use 'ui' instead of jQuery('#slider').
data: 'slider_value=' + jQuery('#slider').slider('values', 0);
});
}
});
スライダーが移動したときに呼び出されるメニュー項目を作成します。
function foo_menu() {
...
$items['foo/ajax'] = array(
'title' => t('foo AJAX'),
'type' => MENU_CALLBACK,
'page callback' => 'foo_ajax',
'access arguments' => array('access content'),
);
...
return $items;
}
Foo_ajaxページのコールバックを実装します。
function foo_ajax () {
// Retrieve the slider value
$slider_value = (int)$_POST['slider_value'];
// Get some id's from the foo table
$result = db_query('SELECT id FROM {foo} WHERE value = :value', array(':value' => $slider_value));
$data = array();
foreach ($result as $row) {
// Do something with data
// Parse to json
$data[] = $row->id;
}
// Return json
drupal_json_output($data)
}
AjaxCompletedを実装します(JavaScript内):
function ajaxCompleted () {
// Parse Json
// Add some stuff to your DOM.
}
私が正しく理解している場合は、Drupalパスをページコールバックに設定して、PHP関数がスライダーデータを処理するようにします。次に、 AJAXスライドイベントの呼び出し。このようなもの:
$('.slider').bind('slide', function(e, data) {
var href = path/to/your/drupal/handler;
$.ajax({
type: "POST",
url: href,
data: {slide: data.slide},
});
});
このようにして、スライダーデータをPHP)に「POST」し、コールバック関数にデータを引数として取り、そこから実行する必要があることをすべて実行できます。jquery$を確認してください。戻りデータなどを使用して実行できるオプションのAJAX関数
編集:うわー、誰かが同じ概念のより完全な例を同時に投稿しました。詳細については、彼のソリューションをぜひチェックしてください!