Skip to content

Instantly share code, notes, and snippets.

Last active November 23, 2022 13:40
Show Gist options
  • Save AkshayKalose/37df41d94d16ee1eec35 to your computer and use it in GitHub Desktop.
Save AkshayKalose/37df41d94d16ee1eec35 to your computer and use it in GitHub Desktop.
Drupal 8 - Ajax Example
name: 'Ajax Example'
description: 'Just an Ajax Example'
core: 8.x
type: module
path: '/admin/ajax_example'
_form: 'Drupal\ajax_example\Form\AjaxExampleForm'
_title: 'Ajax Example'
_permission: 'access administration pages'
* @file
* Contains Drupal\ajax_example\AjaxExampleForm
namespace Drupal\ajax_example\Form;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\ChangedCommand;
use Drupal\Core\Ajax\CssCommand;
use Drupal\Core\Ajax\HtmlCommand;
use Drupal\Core\Ajax\InvokeCommand;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
class AjaxExampleForm extends FormBase {
public function getFormId() {
return 'ajax_example_form';
public function buildForm(array $form, FormStateInterface $form_state) {
$form['user_name'] = array(
'#type' => 'textfield',
'#title' => 'Username',
'#description' => 'Please enter in a username',
'#ajax' => array(
// Function to call when event on form element triggered.
'callback' => 'Drupal\ajax_example\Form\AjaxExampleForm::usernameValidateCallback',
// Effect when replacing content. Options: 'none' (default), 'slide', 'fade'.
'effect' => 'fade',
// Javascript event to trigger Ajax. Currently for: 'onchange'.
'event' => 'change',
'progress' => array(
// Graphic shown to indicate ajax. Options: 'throbber' (default), 'bar'.
'type' => 'throbber',
// Message to show along progress graphic. Default: 'Please wait...'.
'message' => NULL,
$form['random_user'] = array(
'#type' => 'button',
'#value' => 'Random Username',
'#ajax' => array(
'callback' => 'Drupal\ajax_example\Form\AjaxExampleForm::randomUsernameCallback',
'event' => 'click',
'progress' => array(
'type' => 'throbber',
'message' => 'Getting Random Username',
return $form;
public function submitForm(array &$form, FormStateInterface $form_state) {
drupal_set_message('Nothing Submitted. Just an Example.');
public function usernameValidateCallback(array &$form, FormStateInterface $form_state) {
// Instantiate an AjaxResponse Object to return.
$ajax_response = new AjaxResponse();
// Check if Username exists and is not Anonymous User ('').
if (user_load_by_name($form_state->getValue('user_name')) && $form_state->getValue('user_name') != false) {
$text = 'User Found';
$color = 'green';
} else {
$text = 'No User Found';
$color = 'red';
// Add a command to execute on form, jQuery .html() replaces content between tags.
// In this case, we replace the desription with wheter the username was found or not.
$ajax_response->addCommand(new HtmlCommand('#edit-user-name--description', $text));
// CssCommand did not work.
//$ajax_response->addCommand(new CssCommand('#edit-user-name--description', array('color', $color)));
// Add a command, InvokeCommand, which allows for custom jQuery commands.
// In this case, we alter the color of the description.
$ajax_response->addCommand(new InvokeCommand('#edit-user-name--description', 'css', array('color', $color)));
// Return the AjaxResponse Object.
return $ajax_response;
public function randomUsernameCallback(array &$form, FormStateInterface $form_state) {
// Get all User Entities.
$all_users = entity_load_multiple('user');
// Remove Anonymous User.
// Pick Random User.
$random_user = $all_users[array_rand($all_users)];
// Instantiate an AjaxResponse Object to return.
$ajax_response = new AjaxResponse();
// ValCommand does not exist, so we can use InvokeCommand.
$ajax_response->addCommand(new InvokeCommand('#edit-user-name', 'val' , array($random_user->get('name')->getString())));
// ChangedCommand did not work.
//$ajax_response->addCommand(new ChangedCommand('#edit-user-name', '#edit-user-name'));
// We can still invoke the change command on #edit-user-name so it triggers Ajax on that element to validate username.
$ajax_response->addCommand(new InvokeCommand('#edit-user-name', 'change'));
// Return the AjaxResponse Object.
return $ajax_response;
Copy link

Impressive how the formatting quality of the code samples deteriorated ..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment