Submitted by Chris McIntosh on May 20, 2016

This blog will be a bit longer than normal and I will probably break it up into multiple pages talking about various aspects of Drupal 8's new FAPI, AJAX system, and how things like responses are now handled.  A lot of this is a result of my work on a tool for a customer in order to build out a complex automated task that needs to happen for new members for their application.  So let's get this kicked off with the fact that this is a culmination of many other sources, an older tutorial from SitepointDrupal.org's Ajax API doc page, and a lot of reading of Drupal 8's Core files.  One thing I probably would recommend for any module/backend developer is to get a large bag of popcorn and spend the weekend just reading all of the Core API files, as a lot of things have changed even though they seem the same as how they operated in Drupal 7.  

I will be going from easiest task to most complex task in this article, and will also have some links to take you to specific tasks related to Drupal 8 Forms and AJAX.  The first task I want to talk about is adding ajax events to almost anything on your site.  This could be a link, button, or other things that are not necessarily being rendered as part of an actual Drupal 8 form.  This can be helpful in situations when you're looking to create Modals in Drupal 8 or have something on your page update based on some sort of click action that your users are taking.

Using 'use-ajax', 'use-ajax-submit', '#autocomplete_route_name'

Using the 'use-ajax' class on a link to load a link using an AJAX call.  If you use this method the href of the link can contain also '/nojs/' as part of the path this will allow Drupal's AJAX process to provide a fallback for browsers when something fails.  Additionally, this will let you create code to handle both cases where you would need to return a HtmlResponse instead of an AJAXResponse.

 

Similar to the 'use-ajax' class, if you were to add the 'use-ajax-submit' class onto a button for a form, then that form would be submitted via Ajax to the path that was specified in the #action.  You can additionally include /nojs/ on these paths to allow a submit handler in a degraded state. Things really work about the same, you can handle your normal form submission this way and Ajaxify your forms and pages to give them a more responsive feeling.

Last but not the least in this initial set of easy tasks is the Autocomplete functionality that you can add onto text fields in Drupal 8, this can be done by using the '#autocomplete_route_name' attribute when you're creating your form.  The Route controller needs to return an array of options for the autocomplete, in the form of a JSON response object. Below is a great example of how to do this taking from Drupal 8 Core's Entity autocomplete field. This should give a solid idea as to how you need to receive and respond to events from an autocomplete field.

 

The above addresses what I would probably consider as normal tasks needed to be taken care of by a beginner level developer and are really basic in the scheme of the things that you can accomplish with Drupal 8's new Form API and AJAX API systems, if your looking for other tasks you can look at our documents on some of the other everyday Drupal 8 javascript tasksintegration of Angular with Drupal 8, or continue on to the intermediate AJAX tasks that I would like to outline. Included in the next article is how to create elements, execute ajax commands, and create custom ajax commands for Drupal 8 FAPI and AJAX.

Intermediate Drupal 8 AJAX Guide