In our last post we talked about applying Drupal 8 Ajax onto links and Form Buttons. In this article I am going to talk more about how to manage various basic ajax tasks within your Drupal 8 FAPI form, as well as get into how to create your own custom AJAX commands that you can also dispatch through FAPI or other places in your Drupal 8 site.

Drupal 8 FAPI, Ajax response to user action

The first thing i want to go over is just the basics of handling something in an ajax case, in this case I will just use the standard example many sites are using, which is to say checking if a email or username is available for a new user to register with.  This sort of simple functionality can do a lot in the way of improving the user.

 

What is happening in the aboe code is that we are sending a ajax call to the function and asking it to validate the entered username.  We are calling a function that does this for us.  Then we are returning some css to apply to the element in the form.  Alternatively you could also call some jquery that would add / toggle a class on the element if you dont like adding inline css, which is probably a better practice anyway.  For now, when we use the CssCommand we need to instead of returning a array of css we need to return the string that contains the style tag and css rules.  If you dont do this, then nothing on the page will change and it will seem as if the CssCommand is broken, because I have not seen it complain about such mistakes.

Drupal 8 Custom AJAXResponse command

Now we are starting to get into more advanced topics with regards to building out AJAX functionality for Drupal 8's new FAPI.  For this we will be creating our very own custom AJAXResponse Command that we will use to trigger some sort of function once our AJAX is called for a form element.  This could do a lot of different things, and you could use javascript as much as your immagination allows.  This is probably one of the best new features of the new AJAX framework that has been introduced.  Drupal 8's version of the AJAX Framework uses the new OOP practices that many of the other core APIs are now using.  So we will quickly take a look at how to create one of these callbacks.

Create the Callback Command

When your building a custom AJAX callback functionality for your application you will need to build two parts.  The first part will be the basic javascript that we will be attaching and loading when we need it.  For the Clientside scripts Drupal 8 will need a callback command that can be called from your AJAX scripts in your form.  you will want to add this new function onto Drupal.AjaxCommands.prototype.  All of the functions attached here recieve the following parameters:

  • ajax -- The object that contains information about the triggering element, the callback that was made, the method of the request and more details.
  • response -- The object that was returned from the ajax request, this will contain the data in an associative array returned from your PHP object.
  • status - This is the HTML status code, 200, 404, etc.

You will need to create a Drupal 8 Library in your module and add it into your form in order for this custom javascript to be loaded properly. You could probably create some sort of Form Alter hook to automatically added for any form that calls or uses your special element. See my article on Drupal 8 module Yamls in order to see how to probably create the library.

Server Side PHP

Once we have created our javascript and our library yaml file to add it into our project, the next step will be to create a Drupal 8 callback for the command. This callback will be implementing the CommandInterface class, you can check out the documents for some of the more important things about interfaces you should know about in Drupal 8. As far as this callback is concerned we are not going to do a lot with it, other than go over some basics

In this server side script we are implementing the CommandInterface interface in this we have two very simple functions, the first one is the __construct function where we are taking the provided note, and then storing it in a protected local variable. In the second function render(), we are returning the array that will call the javascript function we created earlier, providing it with the data needed in order to fulfill it's task.

Using our new Drupal 8 AJAX Custom Command

Now that we have all of the building blocks for our new command in place we need to do a few basic things to let DRupal 8 know about our new AJAX Custom Command these are the following things we need to do:

  • Load the Javascript library
  • Include the Javascript library on the form or page we want to use it
  • Add the Custom Command to an AJAXResponse object and return it

Load the Javascript Library

Unlike Drupal 7 we need to now define our new asset as an library instead of using the now deprecated Drupal 7 drupal-add_js() function. This is done by creating a libraries.yml file, which I already mentioned in another article about creating libraries.

Include the Javascript Library

There are quite a few ways to do this now in Drupal 8 depending on what your wanting to do, you can see all of them in this article about Drupal 8 Javascript tasks. Once this is done Drupal 8 will include your javascript whenever your form is loaded.

Add the Custom Command to an AJAXResponse Object

The final piece to this is actually calling the new custom command from your ajax response function.

As you can see there is a couple of steps to getting AJAX Custom commands working, but they can be quite powerful once you get the hang of things. This wraps up my article on some of the intermediate tasks that can be done with Drupal 8's FAPI and AJAX, in the next article I go over more advanced tasks like creating AJAX elements from other AJAX elements. This sort of thing can be very useful when your dealing with more advanced forms.

Basic Drupal 8 FAPI AJAX Tasks Advanced Drupal 8 FAPI AJAX tutorial

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.