Menú
Drupal AJAX form callbacks,
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
HTMX in Drupal 11.3+ core — the Htmx PHP fluent builder, dynamic forms with swapOob, partial routes with _htmx_route, response headers, and Drupal.behaviors integration. Use when building interactive UI without full-page reloads using Drupal's native HTMX support.
DDEV local development expertise. Use when working with DDEV projects, containers, configuration, or troubleshooting DDEV environments.
Custom Docker Compose local development patterns. Use when working with Docker-based local environments, container configuration, or troubleshooting Docker setups.
Drupal access control — permissions.yml, access callbacks, AccessResult, custom access checkers, and entity access.
Drupal Cache API — cache tags, contexts, max-age, cache bins, invalidation, and adding cache metadata to render arrays.
Drupal Composer management — requiring modules, updates, patches via composer-patches, and version constraints.
| name | drupal-form-ajax |
| description | Drupal AJAX form callbacks, |
public function buildForm(array $form, FormStateInterface $form_state): array {
$form['type'] = [
'#type' => 'select',
'#title' => $this->t('Type'),
'#options' => ['a' => 'Type A', 'b' => 'Type B'],
'#ajax' => [
'callback' => '::updateOptions',
'wrapper' => 'options-wrapper',
'event' => 'change',
],
];
$form['options_wrapper'] = [
'#type' => 'container',
'#attributes' => ['id' => 'options-wrapper'],
];
$type = $form_state->getValue('type', 'a');
$form['options_wrapper']['value'] = [
'#type' => 'textfield',
'#title' => $this->t('Value for @type', ['@type' => $type]),
];
return $form;
}
public function updateOptions(array &$form, FormStateInterface $form_state): array {
return $form['options_wrapper'];
}
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\ReplaceCommand;
use Drupal\Core\Ajax\HtmlCommand;
use Drupal\Core\Ajax\InvokeCommand;
use Drupal\Core\Ajax\MessageCommand;
public function ajaxCallback(array &$form, FormStateInterface $form_state): AjaxResponse {
$response = new AjaxResponse();
$response->addCommand(new ReplaceCommand('#my-wrapper', $form['my_element']));
$response->addCommand(new HtmlCommand('#message', $this->t('Updated!')));
$response->addCommand(new InvokeCommand('#my-input', 'val', ['new value']));
$response->addCommand(new MessageCommand($this->t('Success!'), NULL, ['type' => 'status']));
return $response;
}
'#ajax' => [
'callback' => '::myCallback', // Method or [ClassName, 'method']
'wrapper' => 'wrapper-id', // DOM ID to replace/update
'event' => 'change', // JS event (change, click, blur, etc.)
'method' => 'replaceWith', // replaceWith, append, prepend, etc.
'effect' => 'fade', // none, slide, fade
'progress' => [
'type' => 'throbber', // throbber or bar
'message' => NULL,
],
'url' => NULL, // Custom URL (leave NULL for default)
'options' => [], // Additional jQuery.ajax options
],
public function submitForm(array &$form, FormStateInterface $form_state): void {
$form_state->setRebuild(TRUE);
}