midcamp 2016 - demystifying ajax callback commands in drupal 8
TRANSCRIPT
![Page 1: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/1.jpg)
Demystifying AJAX CallbackCommands
(in Drupal 8)2016.midcamp.org/node/48
MidCamp 2016
Background image modified version of "Chicago Bean" by Sergey Gabdurakhmanov
![Page 2: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/2.jpg)
Mike Miles@mikemiles86
Genuine ( )wearegenuine.com
mikemiles.com
![Page 3: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/3.jpg)
Goals of this SessionExplain AJAX callback commandsDemonstrate AJAX callback commandsOutline custom AJAX callback commands
![Page 4: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/4.jpg)
What are Callback CommandsFunctions returned and invoked by all Ajax responsesAllow server to dictate client functionalityDefined by Drupal core (25) and Modules
![Page 5: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/5.jpg)
Callback Commands: Server SideFollows naming convention [CommandName]Command(.php)Class that implements CommandInterfaceDefines a 'render' method
Returns an associative arrayContains element with key of 'command''Command' value is name of JavaScript method
![Page 6: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/6.jpg)
Anatomy of a Callback Command: PHP01 use Drupal\Core\Ajax\CommandInterface; 02 03 // An AJAX command for calling [commandName]() JavaScript method. 04 class [CommandName]Command implements CommandInterface { 05 06 // Implements Drupal\Core\Ajax\CommandInterface:render(). 07 public function render() { 08 return array( 09 'command' => '[commandName]', // Name of JavaScript Method. 10 // other request arguments... 11 ); 12 } 13 }
[CommandName]Command.php
Callback command classes need to implement CommandInterface (lines #1 & #4). Must define a 'render'method (lines #7 #12), that returns an associative array. Associative array must contain an elementwith the key of 'command' and a vlaue that is a name of the javascript method. Additional arguments are
passed as response data.
![Page 7: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/7.jpg)
Callback Commands: Client SideWrapper for additional javascriptMethod attached to 'Drupal.AjaxCommands.prototype' objectTakes 3 arguments
ajaxresponsestatus
![Page 8: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/8.jpg)
Anatomy of a Callback Command: JavaScript01 /** 02 * [commandName description] 03 * 04 * @param {Drupal.Ajax} [ajax] 05 * @param {object} response 06 * @param {number} [status] 07 */ 08 Drupal.AjaxCommands.prototype.[commandName] = function(ajax, response, status){09 10 // Custom javascript goes here ... 11 12 }
Callback Command needs to be attached as a method to the Drupal.AjaxCommands.prototype object(line #8). Command accepts three arguments and is a wrapper for additional javascript.
![Page 9: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/9.jpg)
Callback Commands Are...Functions returned and invoked by all Ajax responsesPHP Classes that implement CommandInterfaceMethods attached to 'Drupal.AjaxCommands.prototype'
![Page 10: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/10.jpg)
How to Use Callback CommandsAttach Drupal Ajax library to the requesting pageCreate a callback method that returns an AjaxResponse objectAttach commands to AjaxResponse object using 'addCommand'
![Page 11: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/11.jpg)
Example: The "Remove" Command
Example of using the remove callback command. Link triggers ajax request which returns response with'remove' command targeting image id.
![Page 12: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/12.jpg)
01 namespace Drupal\remove_example\Controller; 02 use Drupal\Core\Controller\ControllerBase; 03 04 class RemoveExampleController extends ControllerBase { 05 06 // Return output for displaying an image and ajax link for removing it. 07 public static function demo() { 08 $output['description']['#markup'] = '<p>' . t('The following is an example of using the remove ajax callback command.'09 // ... 10 // Attach the ajax library. 11 $output['#attached']['library'][] = 'core/drupal.ajax'; 12 // Return render array 13 return $output; 14 } 15 // ... 16 }
remove_example/src/Controller/RemoveExampleController.php
Pages that want to use Ajax need to include the ajax library. On line #11 attaching the core Drupal Ajaxlibrary to the render array for the page.
![Page 13: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/13.jpg)
01 namespace Drupal\remove_example\Controller; 02 use Drupal\Core\Controller\ControllerBase; 03 use Drupal\Core\Ajax\AjaxResponse; 04 use Drupal\Core\Ajax\RemoveCommand; 05 06 class RemoveExampleController extends ControllerBase { 07 // ... 08 /** 09 * Callback method for removing image from 'remove-example' page. 10 * 11 * @return \Drupal\Core\Ajax\AjaxResponse|mixed 12 */ 13 public static function removeImage() { 14 // Create an Ajax Response object. 15 $response = new AjaxResponse(); 16 // Add a remove command. 17 $response->addCommand(new RemoveCommand('#example_remove_wrapper')); 18 // Return the response object. 19 return $response; 20 } 21 }
remove_example/src/Controller/RemoveExampleController.php
Classes used for Ajax requests need to include needed classes (line #3, Line #4). Callback method needsto return an ajax command (line #14) and attach commands using 'addCommand' method (line #16).
![Page 14: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/14.jpg)
To Use Callback Commands...Attach Drupal Ajax library to the requesting pageCreate callback method that returns AjaxResponseAttach commands to AjaxResponse object with 'addCommand'
![Page 15: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/15.jpg)
Creating Custom Callback CommandsRequires a custom moduleNeed to define custom php classesNeed to define custom javascript methods
![Page 16: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/16.jpg)
Custom Callback Commands: PHPFollow naming convention [CommandName]Command(.php)Implement CommandInterface
Define a 'render' methodReturn an associative array with 'command' element
Place in 'src/Ajax/' directory of module
![Page 17: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/17.jpg)
Example: SlideRemoveCommand01 namespace Drupal\remove_example\Ajax; 02 03 use Drupal\Core\Ajax\CommandInterface; 04 // An AJAX command for calling the jQuery slideUp() and remove() methods. 05 class SlideRemoveCommand implements CommandInterface { 06 // Constructs an SlideRemoveCommand object. 07 public function __construct($selector, $duration = NULL) { 08 $this->selector = $selector; 09 $this->duration = $duration; 10 } 11 // Implements Drupal\Core\Ajax\CommandInterface:render(). 12 public function render() { 13 return array( 14 'command' => 'slideRemove', 15 'selector' => $this->selector, 16 'duration' => $this->duration, 17 ); 18 } 19 }
remove_example/src/Ajax/SlideRemoveCommand.php
An example of creating a custom 'SlideRemove' callback command PHP Class. Class follows namingconventions and implements CommandInterface (line #5). Defines a render method (line #12), which
returns an associative array with a 'command' keyed element. (lines #13 #17).
![Page 18: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/18.jpg)
Custom Callback Commands: JavaScriptAttach method to 'Drupal.AjaxCommands.prototype' objectTake 3 arguments
ajaxresponsestatus
Add JavaScript to a custom library
![Page 19: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/19.jpg)
Example: slideRemove01 (function ($, window, Drupal, drupalSettings) { 02 'use strict'; 03 // Command to slide up content before removing it from the page. 04 Drupal.AjaxCommands.prototype.slideRemove = function(ajax, response, status){05 var duration = response.duration ? response.duration : "slow"; 06 07 $(response.selector).each(function() { 08 $(this).slideUp(duration, function() { 09 $(this).remove(); 10 }); 11 }); 12 } 13 })(jQuery, this, Drupal, drupalSettings);
remove_example/js/ajax.js
An example of creating a custom 'slideRemove' callback command javascript method. Attached to'Drupal.AjaxCommands.prototype' object and accepts three arguments (line #4). Uses response data for
additional javascript functionality (lines #5 #13).
![Page 20: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/20.jpg)
Example: remove_example/remove-example library01 remove-example: 02 version: VERSION 03 js: 04 js/ajax.js: {} 05 dependencies: 06 - core/drupal.ajax
remove_example.libraries.yml
Javascript file that contains custom 'slideRemove' command is added to a library deffinition (lines #3 #4). Add core Drupal Ajax library as a dependency so that it is included (lines #5 #6).
![Page 21: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/21.jpg)
To Create Custom Callback Commands...Use a custom moduleDefine classes that implements CommandInterfaceAttach JavaScript method(s) to 'Drupal.AjaxCommands.prototype'
![Page 22: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/22.jpg)
Using Custom Callback CommandsAttach custom library to the requesting pageAttach commands to AjaxResponse object with 'addCommand'
![Page 23: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/23.jpg)
Example: The "slideRemove" Command
Example of using the custom slideRemove callback command. Link triggers ajax request which returnsresponse with 'slideRemove' command targeting image id.
![Page 24: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/24.jpg)
01 namespace Drupal\remove_example\Controller; 02 use Drupal\Core\Controller\ControllerBase; 03 04 class RemoveExampleController extends ControllerBase { 05 06 // Return output for displaying an image and ajax link for removing it. 07 public static function demo() { 08 $output['description']['#markup'] = '<p>' . t('The following is an example of using the remove ajax callback command.'09 // ... 10 // Attach custom Ajax command library. 11 $output['#attached']['library'][] = 'remove_example/remove-example'; 12 // Return render array 13 return $output; 14 } 15 // ... 16 }
remove_example/src/Controller/RemoveExampleController.php
Custom Javascript library needs to be included on requesting page, so that methods are attached.Attaching library to render array on line #11.
![Page 25: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/25.jpg)
01 namespace Drupal\remove_example\Controller; 02 use Drupal\Core\Controller\ControllerBase; 03 use Drupal\Core\Ajax\AjaxResponse; 04 use Drupal\Core\remove_example\SlideRemoveCommand; 05 06 class RemoveExampleController extends ControllerBase { 07 // ... 08 /** 09 * Callback method for removing image from 'remove-example' page. 10 * 11 * @return \Drupal\Core\Ajax\AjaxResponse|mixed 12 */ 13 public static function removeImage() { 14 // Create an Ajax Response object. 15 $response = new AjaxResponse(); 16 // Add a remove command. 17 $response->addCommand(new SlideRemoveCommand('#example_remove_wrapper', 'slow'18 // Return the response object. 19 return $response; 20 } 21 }
remove_example/src/Controller/RemoveExampleController.php
Like core callback commands, custom command classes have to be included in callback controller (line#4) and added to AjaxResponse in callback method (line #17).
![Page 26: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/26.jpg)
To Use Custom Callback Commands...Attach custom library to the requesting pageAttach commands to AjaxResponse object with 'addCommand'
![Page 27: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/27.jpg)
Review
![Page 28: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/28.jpg)
AJAX Callback Commands Are...Functions returned and invoked by all Ajax responsesPHP Classes implementing CommandInterfaceMethods attached to 'Drupal.AjaxCommands.prototype' object
![Page 29: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/29.jpg)
To Use AJAX Callback Commands...Attach Drupal Ajax library to the requesting pageCreate callback method that returns AjaxResponseAttach commands to AjaxResponse object with 'addCommand'
![Page 30: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/30.jpg)
To Create AJAX Callback Commands...Use a custom moduleDefine classes that implements CommandInterfaceAttach JavaScript methods to 'Drupal.AjaxCommands.prototype'
![Page 31: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/31.jpg)
To Use Custom AJAX Callback Commands...Attach custom library to the requesting pageSame process as using core commands
![Page 32: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/32.jpg)
ResourcesDrupal 8 AJAX Api: bit.ly/Drupal8Ajax
This Presentation: bit.ly/Mid16Ajax
Presentation Slides: bit.ly/Mid16AjaxSlides
Example Code: bit.ly/Mid16AjaxEx
Creating Commands in D8: bit.ly/D8AjaxCmds
![Page 33: MidCamp 2016 - Demystifying AJAX Callback Commands in Drupal 8](https://reader031.vdocument.in/reader031/viewer/2022021919/58864c641a28ab32768b65c9/html5/thumbnails/33.jpg)
#midcamp @WeAreGenuine D8 AJAX / Michael Miles
Thank You!Feedback/Questions: @mikemiles86