1

In my Drupal 7 site, I created a custom theme. In my theme, I want to change the AJAX progress throbber HTML structure, which by default is the following one.

<div class="ajax-progress ajax-progress-throbber"><div class="throbber">&nbsp;</div><div class="message">Please wait...</div></div>

I searched a lot about this issue, but I couldn't find any useful document or sample.

2 Answers 2

2

It looks like this is mostly contained within misc/ajax.js file. For example in the beforeSend method:

  else if (this.progress.type == 'throbber') {
    this.progress.element = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber">&nbsp;</div></div>');
    if (this.progress.message) {
      $('.throbber', this.progress.element).after('<div class="message">' + this.progress.message + '</div>');
    }
    $(this.element).after(this.progress.element);
  }

What I think you would need to do is override this. Clive provides an answer here on how to do just that.

(function($) {
  // In mymodule.js, which appears after ajax.js in the page build
  Drupal.ajax.prototype.beforeSend = function(xmlhttprequest, options) {
    // Replacement code.
  }
})(jQuery);

So your custom file would have to load last or at least after the core file does in order to override it.

Myself, I would probably attempt to create a new progress type, but it looks like other areas override aspects of AJAX callbacks to force throbber as the default, which means you'd have to override more functions and handle that.

Of course, this change above means the throbber would be overridden everywhere it appears in your theme, which may or may not be desired (think Views using AJAX paging, Form AJAX, etc).

5
  • Drupal.ajax.prototype.beforeSend is called before sending ajax command. after receiving data from server which function is called?
    – Mehrdad201
    Commented Oct 4, 2018 at 9:39
  • ajaxComplete?? Why?
    – Kevin
    Commented Oct 4, 2018 at 11:16
  • because in before send method, I show a full screen modal overlay , but when ajax calling is finished, I must hide full screen modal, I don't know how define ajaxComplete !
    – Mehrdad201
    Commented Oct 4, 2018 at 22:35
  • Its in the answer above, you would need to create your own JS file and ensure it loads after ajax.js from Drupal core, and override it. Which essentially in your case means copying 98% of the code over for both and tweaking what you need.
    – Kevin
    Commented Oct 4, 2018 at 22:44
  • You could copy the misc.js, make your changes, and swap it so it instead loads your custom misc.js file using hook_js_alter like in my answer here
    – No Sssweat
    Commented Oct 5, 2018 at 4:48
7

For Drupal 8 there is a new way of doing this as per this change record

add the following into the respective files

THEMENAME.info.yml

libraries-extend:
  core/drupal.ajax:
    - THEMENAME/throbber

THEMENAME.libraries.yml

throbber:
  css:
    css/throbber.css: {}
  js:
    js/throbber.js: {}
  dependencies:
    - core/jquery
    - core/drupal

js/throbber.js

/**
 * @file
 * Replaced Drupal cores ajax throbber(s), see: https://www.drupal.org/node/2974681
 *
 */
(function ($, Drupal) {
  Drupal.theme.ajaxProgressThrobber = function () {
    return "<div class=\"ajax-spinner ajax-spinner--inline\"><span class=\"ajax-spinner__label\">" + Drupal.t('Loading&nbsp;&hellip;', {}, {
      context: "Loading text for Drupal cores Ajax throbber (inline)"
    }) + "</span></div>";
  };
  
  Drupal.theme.ajaxProgressIndicatorFullscreen = function () {
    return "<div class=\"ajax-spinner ajax-spinner--fullscreen\"><span class=\"ajax-spinner__label\">" + Drupal.t('Loading&nbsp;&hellip;', {}, {
      context: "Loading text for Drupal cores Ajax throbber (fullscreen)"
    }) + "</span></div>";
  };
    // You can also customize only throbber message:
    // Drupal.theme.ajaxProgressMessage = message => '<div class="my-message">' + message + '</div>';
})(jQuery, Drupal);

css/throbber.css

// optional code of your ajax-spinner classes

An alternative would be to use the ajax_loader module which lets you customize the throbber.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.