AJAX API

Category: AJAX API

Ajax-Enabled Custom Form Class

Creates a custom form that uses Ajax to update part of the form (a container) whenever the textfield value changes.

Ajax-Enabled Custom Form Class

              
                

                  

              
              /**
* 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 { }
}

Creating a Custom Ajax Command Class

Defines a custom Ajax command class that implements Drupal’s CommandInterface. The command returns a JSON structure with a custom message.

Creating a Custom Ajax Command Class

              
                

                  

              
              /**
* 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,
      ];
   }
}

Dynamic Content Loading (“Load More”) Form

Custom form that displays a list of items and a "Load More" button. When the button is clicked, an Ajax callback appends new items to the list dynamically without a full page reload.

Dynamic Content Loading (“Load More”) Form

              
                

                  

              
              /**
* 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 {}
}