Drupal 8  8.0.2
Ajax API

Data Structures

class  AddCssCommand
class  AfterCommand
class  AjaxResponse
class  AlertCommand
class  AppendCommand
class  BeforeCommand
class  ChangedCommand
class  CloseDialogCommand
class  CloseModalDialogCommand
class  CommandInterface
interface  CommandWithAttachedAssetsInterface
class  CssCommand
class  DataCommand
class  HtmlCommand
class  InsertCommand
class  InvokeCommand
class  OpenDialogCommand
class  OpenModalDialogCommand
class  PrependCommand
class  RedirectCommand
class  ReplaceCommand
class  RestripeCommand
class  SetDialogOptionCommand
class  SetDialogTitleCommand
class  SettingsCommand
class  UpdateBuildIdCommand
class  Ajax


trait CommandWithAttachedAssetsTrait

Detailed Description

End of "addtogroup hooks".

Overview for Drupal's Ajax API.

Overview and terminology

Ajax is the process of dynamically updating parts of a page's HTML based on data from the server. When a specified event takes place, a PHP callback is triggered, which performs server-side logic and may return updated markup or JavaScript commands to run. After the return, the browser runs the JavaScript or updates the markup on the fly, with no full page refresh necessary.

Many different events can trigger Ajax responses, including:

Ajax responses in forms

Forms that use the Drupal Form API (see the Form API topic for more information about forms) can trigger AJAX responses. Here is an outline of the steps:

Adding Ajax triggers to a form

As an example of adding Ajax triggers to a form, consider editing a date format, where the user is provided with a sample of the generated date output as they type. To accomplish this, typing in the text field should trigger an Ajax response. This is done in the text field form array element in ::getFormElement():

'#ajax' => array(
'callback' => 'Drupal\config_translation\FormElement\DateFormat::ajaxSample',
'event' => 'keyup',
'progress' => array(
'type' => 'throbber',
'message' => NULL,

As you can see from this example, the #ajax property for a form element is an array. Here are the details of its elements, all of which are optional:

Setting up a callback to process Ajax

Once you have set up your form to trigger an Ajax response (see Adding Ajax triggers to a form above), you need to write some PHP code to process the response. If you use 'path' in your Ajax set-up, your route controller will be triggered with only the information you provide in the URL. If you use 'callback', your callback method is a function, which will receive the $form and $form_state from the triggering form. You can use $form_state to get information about the data the user has entered into the form. For instance, in the above example for the date format preview, () does this to get the format string entered by the user:


Once you have processed the input, you have your choice of returning HTML markup or a set of Ajax commands. If you choose to return HTML markup, you can return it as a string or a renderable array, and it will be placed in the defined 'wrapper' element (see documentation above in Adding Ajax triggers to a form). In addition, any messages returned by drupal_get_messages(), themed as in status-messages.html.twig, will be prepended.

To return commands, you need to set up an object of class , and then use its addCommand() method to add individual commands to it. In the date format preview example, the format output is calculated, and then it is returned as replacement markup for a div like this:

$response = new AjaxResponse();
$response->addCommand(new ReplaceCommand(
'<small id="edit-date-format-suffix">' . $format . '</small>'));
return $response;

The individual commands that you can return implement interface . Available commands provide the ability to pop up alerts, manipulate text and markup in various ways, redirect to a new URL, and the generic , which invokes an arbitrary jQuery command.

As noted above, status messages are prepended automatically if you use the 'wrapper' method and return HTML markup. This is not the case if you return commands, but if you would like to show status messages, you can add

array('#type' => 'status_messages')

to a render array, use drupal_render() to render it, and add a command to place the messages in an appropriate location.

Other methods for triggering Ajax

Here are some additional methods you can use to trigger Ajax responses in Drupal:

Variable Documentation

trait CommandWithAttachedAssetsTrait
Initial value:
protected $attachedAssets

Trait for Ajax commands that render content and attach assets.