I'm trying to ajaxify part of node form. I have a hook_form_alter that adds extra ajax property to a widget of select field. The problem I'm facing is the callback method / function, which is not fired when change is happening.
So this is my form_alter code which resides in accountancy_invoice/accountancy_invoice.module:
function accountancy_invoice_form_node_form_alter(array &$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
if ($form_id == 'node_invoice_form') {
$form['accommodation'] = array(
'#type' => 'container',
'#prefix' => '<div id="user-full-name">Dave</div>',
'#attributes' => array(
'class' => 'user-full-name',
),
);
$form['field_invoice_customer']['widget']['#ajax'] = array(
'callback' => 'Drupal\accountancy_invoice\Form\AjaxifyForm::customerValues',
'progress' => array(
'type' => 'throbber',
'message' => NULL,
)
);
}
}
This is my AjaxifyForm class which resides in accountancy_invoice/src/Form/AjaxifyForm.php:
namespace Drupal\accountancy_invoice\Form;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\HtmlCommand;
use Drupal\Core\Ajax\ReplaceCommand;
use Drupal\Core\Ajax\OpenModalDialogCommand;
class AjaxifyForm {
public static function customerValues(array &$form, \Drupal\Core\Form\FormStateInterface $form_state) {
$response = new AjaxResponse();
$response->addCommand(new ReplaceCommand('#user-full-name', '<span class="unit">Bryan</span>'));
$title = "Example Dialog";
$content = "foo bar content";
$options = array();
$response->addCommand(new OpenModalDialogCommand($title, $content, $options));
return $response;
}
}
It doesn't really matter at the moment what this ajax should do. For testing purposes I just want to change name from Dave to Bryan in #user-full-name and display sample dialog box.
In the console, each time ajax is triggered I got an error:
This is complete error message (it's trimmed in the screenshot): ↵An AJAX HTTP error occurred.↵HTTP Result Code: 200↵Debugging information follows.↵Path: /node/add/invoice?ajax_form=1↵StatusText: OK↵ResponseText: TypeError: Argument 1 passed to Drupal\Core\Form\FormState::setError() must be of the type array, null given, called in /var/www/drupalvm/drupal/web/core/lib/Drupal/Core/Field/WidgetBase.php on line 441 in Drupal\Core\Form\FormState->setError() (line 1093 of /var/www/drupalvm/drupal/web/core/lib/Drupal/Core/Form/FormState.php).