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
Create the Callback Command
- 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.
Server Side PHP
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:
- Add the Custom Command to an AJAXResponse object and return it
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.
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.