Drupal

Comandos Ajax en Drupal 7

By Edgar Dueñas, 01 June, 2020

Hook_menu y nojs

Comience creando un módulo personalizado y habilitándolo. El siguiente paso es seguir adelante y definir tres nuevas rutas de menú en hook_menu que serán:

La página que tiene el enlace que ejecuta JavaScript (la llamaremos la página ' trigger ').
La respuesta JSON que envía los comandos a la biblioteca principal drupal.ajax que termina en / ajax.
La página de respaldo sin JavaScript que termina en / nojs.
Es muy importante usar / nojs y / ajax en algún lugar de su URL sin importar lo que esté tratando de lograr, ya que el sistema AJAX de Drupal reemplazará automáticamente 'nojs' con 'ajax' cuando se cargue JavaScript.

Snippet
<?php
/**
 * Implements hook_menu().
 */
function MY_CUSTOM_MODULE_menu() {
  // Returns AJAX commands if the user has JavaScript turned on.
  $items['my-custom-path/ajax'] = array(
    'title' => 'My custom ajax callback',
    'page callback' => 'MY_CUSTOM_MODULE_ajax_callback',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK,
  );
  // Returns a Non-JavaScript alternative.
  $items['my-custom-path/nojs'] = array(
    'title' => 'My custom non-javascript callback',
    'page callback' => 'MY_CUSTOM_MODULE_nojs_callback',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK,
  );
  // The page that will run the command.
  $items['my-custom-path/trigger-page'] = array(
    'title' => 'AJAX trigger page',
    'page callback' => 'MY_CUSTOM_MODULE_trigger_page',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK,
  );
  return $items;
}

Callbacks

Correcto, hook_menu le dice a Drupal qué nombres de función llamar cuando se accede a cada ruta usando el parámetro 'callback', pero aún necesitamos definir esas funciones en nuestro módulo para que Drupal tenga algo que ejecutar. 

Callbacks: La página trigger 

Comencemos con la página de trigger que, como recordará, es la página que contendrá un enlace solitario para ejecutar nuestros comandos AJAX. Esta función necesita hacer 3 cosas:

Indicale a Drupal que cargue sus bibliotecas AJAX centrales.
Indicale a Drupal que cargue nuestro JavaScript personalizado (que veremos más adelante en este tutorial).
Presente al usuario un enlace que ejecute nuestros comandos AJAX y que tenga el id my-special-link.
Esas 3 cosas solo requiere una línea de código las cuales son:

Snippet
<?php
function MY_CUSTOM_MODULE_trigger_page() {
  // Load in Drupal core AJAX library.
  drupal_add_library('system', 'drupal.ajax');
 
  // Load in our custom JavaScript.
  drupal_add_js(drupal_get_path('module', 'MY_CUSTOM_MODULE') . '/MY_CUSTOM_MODULE.js');
 
  // Present the user with a link with the id 'my-special-link'.
  return l('Run my AJAX commands', 'my-custom-path/nojs', array(
    'attributes' => array(
      'id' => 'my-special-link'
    )
  ));
}

Callbacks: la respuesta AJAX


En esta devolución de llamada, solo necesitamos hacer 3 cosas:

Defina una matriz para contener todos nuestros comandos AJAX.
Agregue un nuevo comando AJAX a nuestra matriz que inserta el texto 'Hola mundo' después de nuestro enlace (usando el id my-special-link.
Devuelve nuestros comandos AJAX en JSON.

Snippet
<?php
/**
 * AJAX callback that prints hello world underneath our link.
 */
function MY_CUSTOM_MODULE_ajax_callback() {
  // Define a new array to hold our AJAX commands.
  $ajax_commands = array();
 
  // Create a new AJAX command that replaces the #page text with our own text.
  $ajax_commands[] = ajax_command_after('#my-special-link', 'Hello world');
 
  // Return our commands in JSON.
  ajax_deliver(array('#type' => 'ajax', '#commands' => $ajax_commands));
}

Callbacks: fallback

 

Snippet
<?php
/**
 * Non-JavaScript callback that returns hello world.
 */
function MY_CUSTOM_MODULE_nojs_callback() {
  return "Hello world";
}

JavaScript


Debido a que hemos definido nuestros comandos AJAX en nuestra callback y estamos usando la biblioteca central drupal.ajax, JavaScript se reduce enormemente. He incluido configuraciones de eventos que hacen que el enlace responda a eventos de un toque en Android e IOS.

Si quisiera aplicar Drupal.ajax a más de un enlace en una página, lo mejor sería apuntar a los enlaces usando un bucle jQuery $ .each (); sin embargo, para los propósitos de nuestra demostración rápida, estamos se dirigirá a un solo elemento mediante un ID.

Snippet
(function ($) {
  Drupal.behaviors.my_custom_module = {
    attach: function(context, settings) {
      // Use context to ensure the link is only ever activated if it's regenerated.
      var $mySpecialLink = $('#my-special-link', context);
 
      // Only run if the link exists in the current page load or fragment refresh.
      if ($mySpecialLink.size() > 0) {
        new Drupal.ajax('#my-special-link', $mySpecialLink, {
          url: $mySpecialLink.attr('href'),
          settings: {},
          event: 'click tap'
        });
      }
    }
  }
})(jQuery);
Tags
Ajax
drupal
Drupal 7

You may also like

Comments