Trying to nest AJAX form elements in Drupal 8, or do you need to add ajax functions onto elements that were created by another ajax call?  If you have been scouring the internet getting frustrated by all of the simpleton examples on how to change a button or add a simple message to a form, then this is your blog post.  I will be talking about why your having the issue your facing.  For most of you finding this article, you will be seeing a issue where you can get the ajax on your Drupal 8 form to load new elements and render them all well and good enough.  However the elements inside of this do not yet have ajax applied to them.  Your callback function probably looks like the one below, which is mostly similar to how you would do things in Drupal 7.

The problem shows up that when your select element is created, Drupal does not know about it. There are a couple of ways that people try to go about solving it, including Drupal.attachBehaviors. However, this is all a fools journey. You need to change the layout of your form a bit so that you can have a smarter buildForm function that will know when to render elements. So below I will show you how to go about doing this.

Really and truly the only difference is that you want to build all of your elements inside of the buildForm function itself, using checks against FromState to make sure when / where you should render the elements. While this is simple enough to understand, it is poorly documented on the internet and so this is what makes it hard to accomplish. I am in fact writing this article for myself, because I ran into this issue for a project I am working on and could not find a good resource as to how to accomplish this nested AJAX element functionality. If this helps you at all, please let me know below in the comments or share your war stories with working with Form API, AJAX and Drupal 8.

Basic Drupal 8 FAPI AJAX Tasks Drupal 8: FAPI AJAX Custom Commands

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.