Contrib.social

Fix AJAX add_css – insert the needed CSS assets after the already-inserted ones

Open on Drupal.org →
Created on 29 February 2012, over 12 years ago
Updated 31 July 2023, over 1 year ago

Problem/Motivation

The AddCssCommand (typically used by AjaxResponseAttachmentsProcessor) always adds the missing-but-required CSS assets to the beginning of the HTML → .

Theme developers often rely on the loading order of the CSS assets, but due to the functionality described above, this becomes impossible when an ajax-driven operation happens on the page.

Proposed resolution

After superficially checking the CssCollectionRenderer, I would say it works fine: It returns the required CSS assets in the expected order (respecting the library dependencies).

Since we know that we have all off the required dependencies in the 'before-ajax' state, and the newly added CSS assets seems to be in the expected order, my proposed solutions are:

  1. Modify ajax.js's add_css command to add the CSS assets after the last stylesheet referrer link on the page <link rel="stylesheet">.
  2. Append to the HTML <head> (or <body> ?).

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Original report

See ajax_render()

And more specifically these lines:

  if (!empty($styles)) {
    $extra_commands[] = ajax_command_prepend('head', $styles);
  }

When you try to add stylesheets through ajax, isn't the expected behaviour that these stylesheets actually do something?
By prepending them to the head, you basically give them the lowest possible priority towards all other already loaded stylesheets.

Suggestion: use ajax_command_append() instead.

Example (shoddy, but it illustrates the problem):

  • I want to add and trigger a jQuery dialog through AJAX
  • I load the files using drupal_add_library and drupal_add_css in my AJAX callback
  • The JavaScript behaves as expected, the CSS doesn't because it has to yield to the system stylesheet for dialogs
🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Ajax  →

Last updated 1 day ago

Created by

🇧🇪Belgium kristiaanvandeneynde Antwerp, Belgium

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

    Worse Than Failure. Approximates the unpleasant remark made by Drupal developers when they first encounter a particular (mis)feature.

  • Needs backport to D7

    After being applied to the 8.x branch, it should be considered for backport to the 7.x branch. Note: This tag should generally remain even after the backport has been written, approved, and committed.

  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

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.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024