Hero

Que son comandos Drupal.ajax en Drupal 7

Marzo 19, 2014

enzo
Drupal
Desarrollo de Modulos

Como ya muchos sabrán Drupal 7 viene con un paquete de manejo de funciones Ajax de fabrica, que entre otras cosas permite que usemos Ajax en formularios creados usando la FAPI como se muestra en Como crear botón “Agregar otro campo” con FAPI en Drupal 7.

Además es ampliamente usado por Ctools y Panels.

A continuación le presentare que es Drupal.ajax y que son sus comandos y en que nos pueden ayudar.

  1. Que es Drupal.ajax

Drupal.ajax es una objeto de JavaScript que se podría catalogar como un workspace que viene cargado de ciertas operaciones necesarias en nuestros llamados Ajax, como por ejemplo:

  • keypressResponse
  • eventResponse
  • beforeSerialize

Las anteriores con funciones agregadas a Drupal.ajax usando la propiedad Prototype de JavaScript que puedes apreciar en Drupal dentro del archivo misc/ajax.js.

Drupal.ajax por defecto realiza llamados ajax a la URL system/ajax que te puede resultar familiar si alguna ves haz analizado llamado del estilo de paginación en una vista que tenga activado la casilla de verificación de que utilize Ajax.

Ahora bien como utiliza Drupal el objeto Drupal.Ajax, bueno la idea es que al inicio cuando se llaman los archivos esta simplemente configurado y con las funciones sobrecargadas como explique anteriormente.

Sin embargo el poder radica en que Drupal.ajax es un arreglo asociativo de comandos de Javascript que se ejecutan en el orden que fueron agregados. Estos comandos pueden realizar tareas que nos facilite de desarrollo de nuestras aplicaciones.

  1. Como agregar comandos desde Javascript.

Para agregar un comando a Drupal.ajax lo hacemos usando la propiedad Prototype como se muestra a continuación.

/**
  * AJAX command to remove class.
  */
  Drupal.button.removeclass = function(ajax, response, status) {
    $('.selector').removeClass('seleceted');
  };
 
  Drupal.ajax.prototype.commands.buttn_removeclass = Drupal.button.removeclass;

Como se puede apreciar debemos crear la función y luego asignarlo al arreglo asociativo de commands, aunque también se habría podido hacer en una sola línea usando funciones anónimas de JavaScript.

Todos los comando son ejecutados cuando se realice una llamada Ajax y todos recibirán como parámetros ajax, response y status que podrían ser utilizados para alterar la lógica del comando.

  1. Como agregar comandos desde PHP.

Una de las cosas que a veces nos gusta de Drupal es que podemos enviar información al cliente de PHP de forma sencilla como se muestra en la entrada Como pasar valores de PHP a Javascript en Drupal 7.

Por suerte para agregar comandos contamos con algunos helper que nos permiten realizar esta operación como veremos a continuación.

/**
 * Ajax callback for content
 */
function MIMODULE_load_more($items = 10) {
  $output = '';// SOME QUERY TO GET MORE DATA. 
  $commands[] = ajax_command_settings(array('MIMODULO' => array('lower_limit' => $lower_limit + $items)), TRUE);
  $commands[] = ajax_command_html('.content-temp', $output);
  $page = array('#type' => 'ajax', '#commands' => $commands);
  ajax_deliver($page);
}

En el ejemplo anterior se asume que existe una implementación del hook_menu asociada a la función MIMODULE_load_more y que es la respuesta a un llamado Ajax realizada con un comando Drupal.ajax, como se puede apreciar en la función agregamos un comando para alterar los settings de nuestro módulo. Además de usar un comando para decir que queremos colocar en dentro un elemento con selector .content-temp el nuevo contenido generado.

La lista completa de helpers para ajax se puede ver aquí. Utilizando estos comando podemos realizar efectos en el navegador del usuario sin escribir una sola línea de JavaScript.

Cuando el llamado Ajax termine ejecutara los comandos enviados en la respuesta, pero estos comandos no son permanentes y no serán aplicados a otros llamados Ajax.

Espero que haya sido de su agrado.

Recibe consejos y oportunidades de trabajo 100% remotas y en dólares de weKnow Inc.