Использование jQuery для связи с Drupal 7 через AJAX

Question

Использование jQuery для связи с Drupal 7 через AJAX

Я учусь использовать AJAX с Drupal 7. Я уже знаю, как использовать атрибут "#ajax" с формой, а также как использовать класс "use-ajax" со ссылкой.

У меня на странице есть хороший слайдер jQuery, который выдает событие jQuery (называемое "слайд") каждый раз, когда слайдер перемещается на новое изображение. Событие также содержит номер слайда, который мы будем просматривать. Я могу привязаться к событию с помощью jQuery следующим образом:

$('.slider').bind('slide', function(e, data) { alert(data.slide); });

Появится всплывающее предупреждение, показывающее текущий слайд. Вместо этого я хочу сделать вызов AJAX с помощью AJAX Drupal 7 и передать этот текущий номер слайда в Drupal.

Я искал ответ, и я думаю, что это может иметь какое-то отношение к объекту DOM Drupal.ajax, но я не уверен.

5

javascript ajax

Author: darkadept, 2011-03-10

Source

2 answers

Если я правильно понимаю, вам нужно настроить путь 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 и заставить функцию обратного вызова принимать данные в качестве аргумента и делать все, что нужно, оттуда. Ознакомьтесь с функцией jquery $.AJAX, чтобы узнать больше о том, что вы можете сделать с возвращаемыми данными и т. Д и т.д.

Редактировать: Вау, кто-то опубликовал гораздо более подробный пример той же концепции в то же время. Обязательно ознакомьтесь с его решением для получения более подробной информации!

1

Author: mattacular, 2011-03-10 16:51:43

score 19 · Accepted Answer

Я предполагаю, что вы хотели бы отобразить некоторые данные при перемещении ползунка.

Я делаю это без использования атрибута #ajax.

Реализуйте вызов AJAX, отправьте значение ползунка в качестве переменной POST в '/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)
}

Реализация AJAX завершена (в вашем javascript):

function ajaxCompleted () {
    // Parse Json
    // Add some stuff to your DOM.
}