javascript – Usando jQuery para comunicarse con Drupal 7 a través de AJAX

Pregunta:

He estado aprendiendo a usar AJAX con Drupal 7. Ya sé cómo usar el atributo '#ajax' con un formulario y también cómo usar la clase 'use-ajax' con un enlace.

Tengo un buen control deslizante jQuery en mi página que emite un evento jQuery (llamado 'diapositiva') cada vez que el control deslizante se mueve a una nueva imagen. El evento también contiene el número de diapositiva que veremos. Puedo vincularme al evento usando jQuery así:

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

Aparecerá una alerta que muestra la diapositiva actual. En su lugar, quiero hacer una llamada AJAX usando AJAX de Drupal 7 y pasar este número de diapositiva actual a Drupal.

He estado buscando una respuesta y creo que podría tener algo que ver con el objeto DOM Drupal.ajax, pero no estoy seguro.

Respuesta:

Supongo que le gustaría mostrar algunos datos cuando mueva el control deslizante.

La forma en que lo hago es sin usar el atributo '#ajax'.

Implemente la llamada AJAX, envíe el valor del control deslizante como variable POST a '/ 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);
                });
            }
    });

Cree un elemento de menú que se llame cuando el control deslizante se mueva:

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;
}

Implemente la devolución de llamada de la página 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)
}

Implemente ajaxCompleted (dentro de su javascript):

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