The fullscreen version of the ajax-progress loader is inserted after the body.

Drupal.Ajax.prototype.setProgressIndicatorFullscreen = function () {
    this.progress.element = $('<div class="ajax-progress ajax-progress-fullscreen">&nbsp;</div>');
    $('body').after(this.progress.element);
};

You should not insert html elements after the body, it is not valid HTML and will fail W3C. Try testing this, which is what Drupal generates.

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
</head>
<body></body>
<div></div>
</html>

$('body').after() should be replaced with $('body').append()

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

chishah92’s picture

Assigned: Unassigned » chishah92
chishah92’s picture

Status: Active » Needs review
FileSize
568 bytes

Have added patch to fix appending valid HTML

chishah92’s picture

Assigned: chishah92 » Unassigned

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Chi’s picture

Status: Needs review » Needs work

This needs to be changed in ajax.es6.js file.
https://www.drupal.org/node/2815083

Chi’s picture

Besides the non-valid HTML markup it is also impossible to use body classes for styling as the throbber is placed outside body.

shaal’s picture

I created a patch for ajax.es6.js file.

Chi’s picture

Title: ajax-progress-fullscreen $('body').after(this.progress.element) Not Valid HTML » Fullscreen ajax throbber should be inside body
Status: Needs work » Reviewed & tested by the community
Issue tags: -ajax-progress-fullscreen ajax-progress

Works perfect for me. Thanks.

Chi’s picture

Status: Reviewed & tested by the community » Needs work
shaal’s picture

Status: Needs work » Needs review

Random core media test error which is unrelated,
I ran the test again and it's successful.
Switching back to "Needs Review"

shaal’s picture

Status: Needs review » Reviewed & tested by the community

This was already RTBC'd in #10

But that status changed due to an unrelated random media test that failed, and at #13 I switched it back to "Needs Review", instead of RTBC.

lauriii’s picture

Status: Reviewed & tested by the community » Fixed

Committed 2a48f46 and pushed to 8.8.x. Thanks!

  • lauriii committed 2a48f46 on 8.8.x
    Issue #2955000 by shaal, chishah92: Fullscreen ajax throbber should be...
lauriii’s picture

Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.