Hero

Como lanzar llamadas Drupal.ajax a discreción en Drupal 7

Marzo 27, 2014

enzo
Drupal
Desarrollo de Modulos
JavaScript
jQuery

Como hemos visto anteriormente es posible hacer llamadas Drupa.ajax siguiendo las instrucción de la entrada de blog Como usar la clase use-ajax de Drupal 7 el problema con esto es que no podemos enviar parámetros a nuestro llamado que posteriormente puedan ser usados en la generación de comandos de Drupal.ajax. Si desea mas información acerca de comando de Drupal.ajax lo invito a leer la entrada de blog Que son comandos Drupal.ajax en Drupal 7.

A continuación veamos la implementación de un modulo llamado custom_ajax*.*

  1. Definir función de theme.

Vamos a crear una función de theme para que pueda ser usada en cualquier llamado posterior.

/**
 * Implements hook_theme().
 */
function custom_ajax_theme($existing, $type, $theme, $path) {
  return array(
    'custom_ajax_link' => array(
      'variables' => array('node' => NULL),
    )
  );
}

La función de theme custom_ajax_link recibe una variable node.

  1. Implementar la función custom_ajax_link.

Ahora debemos implementar la función para que pueda ser llamada usando theme(‘custom_ajax_link’, $variables);

function custom_ajax_link($variables) {
  $output = ''; 
  $node = $variables['node'];
 
  // Add library drupal.ajax, included by IPE
  drupal_add_library('system', 'drupal.ajax'); 
  
  // Add library to enable custom ajax
  drupal_add_js(drupal_get_path('module', 'custom_ajax') . '/js/custom_ajax.js');
  
  $output.= l($node->title, url('node/' . $node->nid, array('absolute' => TRUE, 'attributes' => array('class' => 'custom_ajax'))));

  return $output;    
 } 

Además de generar un link que tenga la clase custom_ajax al nodo especificado, se hace la inclusión de archivo de js custom_ajax.js que esta dentro del folder js en el módulo custom_ajax, este archivo contendrá el behavior que hará la magia.

  1. Definir behavior.

Ahora debemos crear el contenido del archivo custom_ajax/js/custom_ajax.js como se muestra a continuación.

(function ($, undefined) {
  /**
   * Extra function to the Drupal ajax object.
   * Allows us to trigger an ajax response without
   * an element.
   */
  Drupal.ajax.prototype.triggerRequest = function (extra_options) {
    var ajax = this;

    // Avoid concurrent ajax commands.
    if (ajax.ajaxing) {
      return false;
    }
    try {
      $.ajax(ajax.options);
    } catch (err) {
      alert('An error occurred while attempting to process ' + ajax.options.url);
      return false;
    }
    return false;
  };

  Drupal.behaviors.custom_ajax = {
    attach: function (context, settings) {
      var custom_ajax_settings = {};
      custom_ajax_settings = 'content_ajax/notify';

      custom_ajax_settings.keypress = false;
      custom_ajax_settings.prevent = false;

      Drupal.ajax.custom_ajax = new Drupal.ajax(false, $(document.body), custom_ajax_settings);

      $('a.custom_ajax').click(function (e) {
        e.preventDefault();
        Drupal.ajax. custom_ajax.triggerRequest();
        return false;
      });
    }
  };
})(jQuery);

El behavior lo podemos dividir en 3 partes.

3.1 Agregar función de trigger

Agregamos una función prototipo que nos permitirá ejecutar el llamado ajax en cualquier momento que deseemos.

Drupal.ajax.prototype.triggerRequest = function (extra_options) {
  var ajax = this;

  // Avoid concurrent ajax commands.
  if (ajax.ajaxing) {
    return false;
  }
  try {
    $.ajax(ajax.options);
  } catch (err) {
    alert('An error occurred while attempting to process ' + ajax.options.url);
    return false;
  }
  return false;
};

Esta función estará disponible para todos los comandos de Drupal.Ajax.

3.2 Agregar comando.

Debemos agregar un comando que nos permitirá definir las propiedades que serán usadas en nuestro llamado Drupal.ajax.

var custom_ajax_settings = {};
custom_ajax_settings = 'content_ajax/notify';

custom_ajax_settings.keypress = false;
custom_ajax_settings.prevent = false;

Drupal.ajax.custom_ajax = new Drupal.ajax(false, $(document.body), custom_ajax_settings);

El comando se que ha agregado se llamad custom_ajax, Es posible definir cualquier propiedad acepta por jQuery ajax, puedes ver la lista completa aquí.

3.3 Definir acción para disparar el comando.

En nuestra función de theme se definen link con la clase custom_ajax y lo que haremos sera ejecutar la acción de ajax cuando se haga clic sobre el link como se muestra en el siguiente código.

$('a.custom_ajax').click(function (e) {
  e.preventDefault();
  Drupal.ajax. custom_ajax.triggerRequest();
  return false;
});

Recuerden que no es necesario procesar la respuesta, por que la idea es que se retornan comando ajax que son procesador por Drupal.ajax como se muestra aquí.

Espero que haya sido de su agrado.

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