Como usar la clase use-ajax de Drupal 7

Mayo 21, 2013

estebanvalerioh

jQuery

PHP

Programación

Drupal

Desarrollo de Modulos

Drupal nos da la opción de usar la clase de HTML ”use-ajax” en nuestros enlaces, de manera que si el javascript de nuestro navegador está habilitado, el archivo de Drupal ajax.js va a procesar el enlace vía AJAX cuando el usuario presione nuestro enlace.

Para mostrar el funcionamiento, voy a crear una página en Drupal, la cual va a contener un enlace con un procesamiento AJAX. Es importante tener en cuenta que como mínimo nuestro sitio debe tener instalado y habilitado el módulo Chaos tool suite.

Implementación de hook_menu.

La página de Drupal y el URL el cual nuestro enlace con la clase ”use-ajax” se va a dirigir, las estoy definiendo usando la función hook_menu, el código se vería así:

/**
 *  Implements hook_menu().
 */
function pruebas_menu() {

  $items['pruebas-de-ejemplo'] = array(
    'title' => 'Ejemplo de la clase use-ajax',
    'page callback' => 'pruebas_contenido_paginas',
    'access arguments' => array('access content'),
  );

  // Ajax Call i.e. pruebas/nojs/$uid
  $items['pruebas/%ctools_js/%user'] = array(
    'title' => 'Ejemplo de la clase use-ajax',
    'page callback' => 'pruebas_ajax_imprimir_info_usuario',
    'page arguments' => array(1, 2),
    'access arguments' => array('access content'),
  );

  return $items;
}

Creación del enlace.

Ahora creamos la función que genera el contenido de la página, la cual tiene nuestro enlace con la clase ”use-ajax“:

/**
 * Crea el contenido de la página.
 *
 * @return string
 *   Contenido de la página.
 */
function pruebas_contenido_paginas() {
  global $user;

  ctools_include('ajax');
  drupal_add_library('system', 'drupal.ajax');

  $output  = '<div id="pruebas-wrapper">';
  $output .= l('Link de prueba', "pruebas/nojs/{$user->uid}", array(
    'attributes' => array('class' => array('use-ajax')),
  ));
  $output .= '</div>';

  return $output;
}

Del código anterior, las lineas 10 y 11 son muy importantes ya que permiten que Drupal procese los enlaces. por lo tanto si vamos a nuestra página Drupal va a reconocer que hay un enlace con la clase ”use-ajax” y cuando lo procesa, le agrega la clase ”ajax-processed” para indicar que está procesado. El html del enlace se vería así:

<a href="/pruebas/nojs/1" class="use-ajax ajax-processed">Link de prueba</a>

Sino incluimos esas lineas, entonces el enlace quedaría sin ser procesado, y va a actuar como un link normal de html sin ninguna acción AJAX.

Nuestra página con el link se ve de la siguiente forma:

Implementación de la función que procesa el ajax.

Podemos notar en el URL de nuestro enlace, que contiene el string ‘/nojs/’. Incluirlo es muy importante porque Drupal puede indicar si el javascript está habilitado o no y actuar, eso lo vemos en la siguiente función:

/**
 * Función que procesa el ajax, y devuelve información del usuario logueado.
 *
 * @param bool $js
 *   Indica si la acción es por ajax o no.
 *
 * @param object $user_1
 *   Identificador del usuario.
 *
 * @return string
 *   Comandos de Ajax.
 */
function pruebas_ajax_imprimir_info_usuario($js, $user_1) {
  if ($js) {
    // Si entró aquí, el javascript está habilitado.
    ctools_include('ajax');

    $commands = array();
    $variables = array(
      'user' => $user_1,
      'html_id' => '#pruebas-wrapper',
    );

    $commands[] = ajax_command_invoke(NULL, 'pruebas_js_acciones', array(json_encode($variables)));

    print ajax_render($commands);
    exit;
  }
  else {
    // Si entró aquí, el javascript no está habilitado.
    drupal_set_message(t("Not an ajax call."), 'error');
    return MENU_ACCESS_DENIED;
  }
}

De la función del código anterior, las lineas de la 24 a la 27 ejecutan la función pruebas_js_acciones() de javascript que está definida posteriormente en un archivo JS de nuestro módulo, enviándole ciertos parámetros en el arreglo $variables. A continuación vemos como se implementó la función de javascript:

(function ($) {

  $.fn.pruebas_js_acciones = function(variables) {
    var vars = $.parseJSON(variables);
    // Obtenemos el objeto user. 
    var user = vars.user;
    // Obtenemos el id del elemento HTML. 
    var id = vars.html_id;

    // Generamos el string que vamos a mostrar, con las variables anteriores.  
    var output = '<br /> El usuario: ' + user.name + ' con id: ' + user.uid + ', es el usuario conectado actualmente.';

    // Adjuntamos el string al HTML.
    $(id).append(output);
  }

})(jQuery);

El código de JavaScript toma los parámetros recibidos y genera una nueva cadena de texto y además se adjunta al elemento de HTML identificado con el ID que recibimos como parámetro. De esta manera, si damos clic en nuestro enlace este se va a adjuntar a nuestra página. Vemos el ejemplo funcionando en la siguiente imagen:

Si el JavaScript no está habilitado, o no incluimos las lineas que procesan la clase ”use-ajax”, decidí mostrar un mensaje de error y denegar el acceso, por lo tanto se vería lo siguiente:

Ahora, podríamos modificar nuestra función para mostrar el objeto del usuario si el javascript no está habilitado o el enlace no fue procesado correctamente, el cambio se vería de la siguiente forma:

/**
 * Función que procesa el ajax, y devuelve información del usuario logueado.
 *
 * @param bool $js
 *   Indica si la acción es por ajax o no.
 *
 * @param object $user_1
 *   Identificador del usuario.
 *
 * @return string
 *   Comandos de Ajax.
 */
function pruebas_ajax_imprimir_info_usuario($js, $user_1) {
  if ($js) {
    // Si entró aquí, el javascript está habilitado.
    ctools_include('ajax');

    $commands = array();
    $variables = array(
      'user' => $user_1,
      'html_id' => '#pruebas-wrapper',
    );

    $commands[] = ajax_command_invoke(NULL, 'pruebas_js_acciones', array(json_encode($variables)));

    print ajax_render($commands);
    exit;
  }
  else {
    // Mostramos el objeto de usuario. 
    return '' . print_r($user_1,1) . '';
  }
}

Por lo tanto, veríamos algo similar a la siguiente imagen:

Espero sea de utilidad. Saludos!