Make AJAX work on all render elements and/or have a better documentation for that

Created on 13 February 2015, almost 10 years ago
Updated 6 November 2024, 18 days ago

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'

Feature request
Status

Active

Version

11.0 🔥

Component

ajax system

Created by

🇩🇪Germany steamx

Live updates comments and jobs are added and updated live.
  • Documentation

    Primarily changes documentation, not code. For Drupal core issues, select the Documentation component instead of using this tag. In general, component selection is preferred over tag selection.

  • Needs subsystem maintainer review

    It is used to alert the maintainer(s) of a particular core subsystem that an issue significantly impacts their subsystem, and their signoff is needed (see the governance policy draft for more information). Also, if you use this tag, make sure the issue component is set to the correct subsystem. If an issue significantly impacts more than one subsystem, use needs framework manager review instead.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024