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:

enter image description here

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).

This is a generic issue that will show for various reasons, often because of a bug in the code handling the server response. Look in your server logs for more information as to what has happened.

If you expeirence with this kind of error it happens because of bug in drupal core. This is the discussion about this issue: https://www.drupal.org/node/2027059

I've applied patch from #55 and ajax requests has started to work.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.