API de AJAX

Categoría: API de AJAX

Clase de formulario personalizado compatible con Ajax

Crea un formulario personalizado que utiliza Ajax para actualizar parte del formulario (un contenedor) cada vez que cambia el valor del campo de texto.
Clase de formulario personalizado compatible con Ajax
              

                

                  

              

              
/**
* Provides an example AJAX form.
*/
namespace Drupal\my_module\Form;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\HtmlCommand;

class AjaxExampleForm extends FormBase {
   /**
   * {@inheritdoc}
   */
   public function getFormId(): string {
      return 'ajax_example_form';
   }

   /**
   * {@inheritdoc}
   */
   public function buildForm(array $form, FormStateInterface $form_state): array {
      $form['example_text'] = [
         '#type' => 'textfield',
         '#title' => $this->t('Enter text'),
         '#ajax' => [
            'callback' => '::ajaxCallback',
            'wrapper' => 'result-wrapper',
            'event' => 'keyup',
         ],
      ];
      $form['result'] = [
         '#type' => 'container',
         '#attributes' => ['id' => 'result-wrapper'],
      ];
      return $form;
   }

   /**
   * Ajax callback to update the result container.
   */
   public function ajaxCallback(array &$form, FormStateInterface $form_state): AjaxResponse {
      $response = new AjaxResponse();
      $value = $form_state->getValue('example_text');
      $response->addCommand(new HtmlCommand('#result-wrapper', $this->t('You typed: @value', ['@value' => $value])));
      return $response;
   }

   /**
   * {@inheritdoc} (No submission processing required.)
   */
   public function submitForm(array &$form, FormStateInterface $form_state): void { }
}
 

Creación de una clase de comando Ajax personalizada

Define una clase de comando Ajax personalizado que implementa CommandInterface de Drupal. El comando devuelve una estructura JSON con un mensaje personalizado.
Creación de una clase de comando Ajax personalizada
              

                

                  

              

              
/**
* Defines a custom Ajax command.
*/
namespace Drupal\my_module\Ajax;
use Drupal\Core\Ajax\CommandInterface;

class CustomCommand implements CommandInterface {
   /**
   * The message to display.
   */
   protected string $message;

   /**
   * Constructs a CustomCommand object.
   */
   public function __construct(string $message) {
      $this->$message = $message;
   }

   /**
   * {@inheritdoc}
   */
   public function render(): array {
      return [
         'command' => 'customCommand',
         'message' => $this->$message,
      ];
   }
}
 

Formulario de carga dinámica de contenidos («Cargar más»)

Formulario personalizado que muestra una lista de elementos y un botón «Cargar más». Cuando se hace clic en el botón, un callback Ajax añade nuevos elementos a la lista de forma dinámica sin necesidad de recargar toda la página.
Formulario de carga dinámica de contenidos («Cargar más»)
              

                

                  

              

              
/**
* Load More Form using AJAX.
*/
namespace Drupal\my_module\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\AppendCommand;

class LoadMoreForm extends FormBase {

   /**
   * {@inheritdoc}
   */
   public function getFormId(): string {
      return 'load_more_form';
   }

   /**
   * {@inheritdoc}
   */
   public function buildForm(array $form, FormStateInterface $form_state): array {
      $items = $form_state->get('items') ?? ['Item 1', 'Item 2', 'Item 3'];
      $form_state->set('items', $items);

      $form['items_container'] = [
         '#type' => 'container',
         '#attributes' => ['id' => 'items-container'],
      ];

      foreach ($items as $item) {
         $form['items_container'][] = [
            '#markup' => '<p>' . $item . '</p>',
         ];
      }

      $form['load_more'] = [
         '#type' => 'submit',
         '#value' => $this->t('Load more'),
         '#ajax' => [
            'callback' => '::loadMoreAjaxCallback',
            'wrapper' => 'items-container',
            'effect' => 'fade',
         ],
      ];

      return $form;
   }

   /**
   * AJAX callback to append new items.
   */
   public function loadMoreAjaxCallback(array &$form, FormStateInterface $form_state): AjaxResponse {
      $response = new AjaxResponse();
      $items = $form_state->get('items') ?? [];

      $count = count($items) + 1;
      $new_items = [
         ['#markup' => '<p>Item ' . $count . '</p>'],
         ['#markup' => '<p>Item ' . ($count + 1) . '</p>'],
      ];

      $items[] = 'Item ' . $count;
      $items[] = 'Item ' . ($count + 1);
      $form_state->set('items', $items);
      $response->addCommand(new AppendCommand('#items-container', $new_items));

      return $response;
   }

   /**
   * {@inheritdoc} (No normal submit processing required.)
   */
   public function submitForm(array &$form, FormStateInterface $form_state): void {}
}