Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
As of beta4 Drupal seems only to allow AJAX for most of the FormElements or the RenderElement of the type 'link'. Its usage via #ajax (form) or use-ajax (link) is well documented in theAPI. Even though 'link's are also treat as non-form element it probably only define a callback url (href) when using the 'use-ajax' class but does not have to any setting manipulation (e.g. method, event, etc.)
When investigating ajax.js i was unable to find any automated routine for AJAX usage in other elements execpt form elements. You can be pretty sure that only the FormElement type is defined. Looking at this issue will reveal that there has been heavy focus on getting this done for forms.
There seem to exist a RenderElement AJAX which has no documented usage and from my point of view it is not obvious how to use it at all.
At least there seem to be tests in the core/system module which implements the mention working ajax elements. The test are outdated and use deprecated features (see comments in the module files)
Workaround
Let's say you want to be able to use AJAX when you click on a specific div. Right now you would have to wrap an a Tag around this div like:
<a id="someLink" class="use-ajax" href="somepath/callback/linkcontroller">
<div class="fancy-icon"></div></a>
If you want to implement this in a render array it gets complicated. You'd either have to override the link template (or have another suggestion for it) or maybe define an inline template.
$variables['ajaxstuff'] = [
'#type' => 'inline_template',
'#template' => '<a id="someLink" class="use-ajax" href="{{ url }}">
<div class="fancy-icon"></div></a>'
'#context' => [
'url' => Url::fromRoute('mymodule.ajaxcontroller'),
],
],
(There might be other ways for this i have no clue about like copying this routine.)
You could also try to attach JavaScript to your DOM but i could not come up with code which would work with eg a div tag.
(function($) {
"use strict"
// ajax.js example
Drupal.behaviors.myCustomAJAXStuff = {
attach: function (context, settings) {
Drupal.ajax['edit-submit'].commands.insert = function (ajax, response, status) {
new_content = $(response.data);
$('#my-wrapper').append(new_content);
alert('New content was appended to #my-wrapper');
}
}
};
})(jQuery);
(The example above will trigger AjaxRequest>InsertCommand on and submit button on a form)
Proposed resolution
As i have no clue about the policies regarding ajax usage and implementation in D8 the problem above is a meager feature request.
If this is not possible to discuss for whatever reason i'd like to have an updated documentation for developers which clearly says what i am allowed to do and what not. More importantly what are the best practices for ajax usage with d8.
I also see the possibility that i don't know what is going on at all and someone would simply close this issue as 'won't fix' or 'works as designed'
Comments
Comment #1
steamx CreditAttribution: steamx commentedComment #2
steamx CreditAttribution: steamx commentedComment #3
joelpittetFrom the issue summary it sounds like maybe needs documentation? We can add documentation in 8.0.x bug fix release if this is that.
Doesn't need committer review, just needs subsystem maintainer.
Comment #10
seanB#610068-40: Document AJAX no-js and use-ajax contains everything I know of the attributes that can be used on a link with the use-ajax class.