:::: MENU ::::

AJAX básico en Drupal sin API de formularios

4.50 avg. rating (87% score) - 8 votes

Dado el siguiente esquema, vamos a intentar explicar cómo modificar el contenido de bloque mediante un enlace y AJAX, utilizando el API correspondiente de Drupal.

[table style=»3″]

Carga AJAX básica en Drupal Responderemos a las siguientes cuestiones:

Qué necesitamos en nuestro módulo Drupal para responder a llamadas AJAX.

Cómo generamos un link, indicando a Drupal que queremos que sea cargado mediante AJAX.

Cómo generamos la respuesta en nuestro módulo para sustituir el contenido de un DIV en nuestra página.

[/table]

Inicialización del módulo Drupal para AJAX

Para poder utilizar el API ajax sin formularios, es necesario incluir algunos archivos en la generación de la página. Habitualmente lo haremos en la inicialización del módulo que vaya a dar respuesta a las llamadas AJAX:

function mimodulo_init() {
  drupal_add_js('misc/jquery.form.js');  
  drupal_add_library('system', 'drupal.ajax');
}

Hook Drupal para una URL con respuesta AJAX

Si la llamada AJAX va a dirigirse a la URL /mimodulo/ajax/micomando, necesitaremos implementar un callback Drupal para esa URL. Para ello utilizamos el hook_menu de Drupal:

function ineadu_menu() {
  $items = array();
  $items['mimodulo/ajax/micomando'] = array(
    'page callback' => 'mi_funcion_callback',
    'access callback' => 'user_access',
    'access arguments' => array('access content'),
    'delivery callback' => 'ajax_deliver',
    'page arguments' => array(),
    'type' => MENU_CALLBACK,
  );
  return $items;
}

Los parámetros relativos al procesamiento AJAX en el enlace de menú de Drupal son los siguientes:

  • ‘page callback’. Indica la función de nuestro módulo que será llamada cuando se acceda a la URL: http://www.mipagina.com/mimodulo/ajax/micomando
  • ‘deliver callback’. Al indicar el valor ‘ajax_deliver’, indicamos a Drupal que el resultado de la función de callback anterior es una serie de comandos AJAX que deberán ser enviados al dispatcher implementado en javascript y no como salida al navegador.

Generación de la respuesta AJAX con el API Drupal

En nuestra función de Callback, que será llamada cuando se acceda mediante AJAX, no tenemos que implementar una salida típica HTML, sino una serie de comandos que queremos que el dispatcher ejecute al recibir la respuesta.

En el caso del ejemplo, queremos indicarle al dispatcher, sustituye el contenido del DIV con id «resultado» por este contenido que te envío.

Para hacer esto, la función de callback deberá tener un aspecto similar al siguiente:

function mi_funcion_callback() {
  // Generamos el nuevo contenido que queremos enviar
  $output = "<p>Aquí el nuevo contenido</p>";
  // Creamos un array de comandos para el dispatcher
  $commands = array();
  // Comando html indica a Drupal que sustituya el contenido del 
  // selector '#resultado' por el contenido de $output
  $commands[] = ajax_command_html('#resultado', $output);
  // Indicamos que el resultado es AJAX y la lista de comandos
  return array('#type' => 'ajax',
               '#commands' => $commands);
}

Generación del enlace para acceso AJAX a Drupal

El caso más simple de enlace AJAX es el siguiente:

echo l(t('Mi enlace'), 'nojs/destino', array('attributes' => array('class' => array('use-ajax'))));

Esto produce una salida HTML similar a:

<a class="use-ajax ajax-processed" href="/mimodulo/nojs/micomando">Mi enlace</a>

Lo que hace que Drupal trate el enlace como una acción AJAX es la clase «use-ajax» que añadimos al enlace.

Al hacer click en el enlace, Drupal cargará mediante AJAX la ruta www.mipagina.com/mimodulo/ajax/micomando.

Nota: Observar que Drupal sustituye automáticamente en la URL «nojs» por «ajax». Esto permite a nuestro módulo saber si el enlace se está cargando mediante AJAX (la ruta cargada será www.mipagina.com/mimodulo/ajax/micomando) o es un acceso directo a la página (la ruta cargada será www.mipagina.com/mimodulo/nojs/micomando).




2 Comments

Hey! Qué opinas sobre el artículo?