cmcintosh's picture

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 lets get this kicked off with the fact that this is a culmination of many other sources, a older tutorial from Sitepoint, Drupal.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 opperated 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 neccessarily being redered as part of a actual Drupal 8 form.  This can be helpful in situations when your 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 textfields in Drupal 8, this can be done by using the '#autocomplete_route_name' attribute when your creating your form.  The Route controller needs to return an array of options for the autocomplete, in the form of a JsonResponse object. Below is a great example on 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 tasks, integration 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

Comments

I have a custom form created using the drupal Formbase class now I want to add ajax validation and submission to that form how would I do that can you please guide me.

 

I have added use-ajax-submit to the submit button but nothign happens.

Please guide me.

Add new comment