mcpField
D
drupal-form-ajax

drupal-form-ajax

github.com/edutrul開発7350 回インストール21 週間前に更新
リポジトリ

drupal-form-ajax について

Drupal の AJAX フォームを構築するための開発スキルです。コールバックのパターン、AjaxResponse コマンド、AJAX プロパティ、フォームの再構築を解説します。

主な機能

  1. 01AJAX コールバックのパターン
  2. 02AjaxResponse コマンドの利用
  3. 03ラッパーとイベントの設定
  4. 04フォーム再構築の処理

活用シーン

  1. 01選択後のフォーム選択肢の更新
  2. 02ページ要素の非同期置換や変更
  3. 03進捗表示とエフェクトの設定
  4. 04送信後のフォーム再構築

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/edutrul/drupal-ai --skill drupal-form-ajax

インストール後、Claude Code で/drupal-form-ajaxを入力して読み込まれたか確認します。

同梱ファイルREADME.md

README（原文）English

プロジェクトの README より

この README の日本語訳はまだありません。以下は英語の原文です。日本語の紹介はページ上部をご覧ください。

Drupal AJAX Forms

AJAX Callback Pattern

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'];
}

AjaxResponse with Commands

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 Properties

'#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
],

Trigger Form Rebuild

public function submitForm(array &$form, FormStateInterface $form_state): void {
  $form_state->setRebuild(TRUE);
}

コメント

Markdown 対応