web-dev-qa-db-ja.com

jQueryを使用してDrupal 7 via AJAX

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オブジェクトに関係している可能性があると思いますが、よくわかりません。

javascriptajax
5
darkadept

スライダーを動かしているときにデータを表示したいと思います。

私が行う方法は、 '＃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.
}
19
Bart

私が正しく理解している場合は、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関数

編集：うわー、誰かが同じ概念のより完全な例を同時に投稿しました。詳細については、彼のソリューションをぜひチェックしてください！

1
mattacular