Drupal 8: Show Drupal throbber on button that manually calls Views AJAX RefreshView

In this tutorial, I will guide you how to show Drupal's progress/throbber icon on your button that call the Views AJAX RefreshView.

 

Views Configuration

Make sure your view is using AJAX. To do that, set the "Advanced > Use Ajax" on your view.

 

HTML Button

<a href="#" class="btn btn-default reload-view-button">Refresh View</a>

 

Javascript

Drupal.behaviors.refreshLink = {
  attach: function(context, settings) {
    if ($('.reload-view-button', context).length > 0) {
      $('.reload-view-button', context).once().on('click', function(e) {
        e.preventDefault();
        var self = this;

        // Change [YOUR VIEW ID] to your actual view id

        // This loop will get the view instance from the view class
        var viewInstance = Object.values(Drupal.views.instances).find(function(item) {
          if (item.$view.length > 0 && $('.view-id-[YOUR VIEW ID]').length > 0) {
            return item.$view[0] === $('.view-id-[YOUR VIEW ID]')[0];
          }
        });

        if (viewInstance) {
          // Get the ajax throbber from theme
          var progressElement = $(Drupal.theme('ajaxProgressThrobber'));

          // Append the throbber to the button
          $(self).append(progressElement);

          // Refresh the view by ajax
          $('.view-id-[YOUR VIEW ID]').trigger('RefreshView');

          // Override the success callback method
          viewInstance.refreshViewAjax.success = function(response, status) {
            // Call the original callback
            Drupal.Ajax.prototype.success.call(this, response, status);

            // ADD ALL THE THINGS WE WANT TO DO AFTER REFRESH VIEW AJAX SUCCESS!

            // Remove the throbber element that we added above
            $(progressElement).remove();
          };
        }
      });
    }
  }
}

 

Comments

person

admin

• 1 year ago• Permalink

Hi Zach,

If you look at core/misc/ajax.js file, you will see that the drupal core ajax method default progress is "throbber":

... 
Drupal.Ajax = function (base, element, elementSettings) {
    var defaults = {
      event: element ? 'mousedown' : null,
      keypress: true,
      selector: base ? '#' + base : null,
      effect: 'none',
      speed: 'none',
      method: 'replaceWith',
      progress: {
        type: 'throbber',
        message: Drupal.t('Please wait...')
      },
      submit: {
        js: true
      }
    };
...

and if trace this part of the code:

Drupal.Ajax.prototype.beforeSend = function (xmlhttprequest, options) {
    if (this.$form) {
      options.extraData = options.extraData || {};

      options.extraData.ajax_iframe_upload = '1';

      var v = $.fieldValue(this.element);
      if (v !== null) {
        options.extraData[this.element.name] = v;
      }
    }

    $(this.element).prop('disabled', true);

    if (!this.progress || !this.progress.type) {
      return;
    }

    var progressIndicatorMethod = 'setProgressIndicator' + this.progress.type.slice(0, 1).toUpperCase() + this.progress.type.slice(1).toLowerCase();
    if (progressIndicatorMethod in this && typeof this[progressIndicatorMethod] === 'function') {
      this[progressIndicatorMethod].call(this);
    }
  };

You'll see there that the variable progressIndicatorMethod forms to call this function Drupal.Ajax.prototype.setProgressIndicatorThrobber
 

...
Drupal.Ajax.prototype.setProgressIndicatorThrobber = function () {
    this.progress.element = $(Drupal.theme('ajaxProgressThrobber', this.progress.message));
    $(this.element).after(this.progress.element);
  };
...

Then you'll see there that it's calling the Drupal.theme('ajaxProgressThrobber').

You can also see the ajaxProgressThrobber theme and other themes from the same file.

...
Drupal.theme.ajaxProgressThrobber = function (message) {
    var messageMarkup = typeof message === 'string' ? Drupal.theme('ajaxProgressMessage', message) : '';
    var throbber = '<div class="throbber">&nbsp;</div>';

    return '<div class="ajax-progress ajax-progress-throbber">' + throbber + messageMarkup + '</div>';
  };
...

 

Hope that helps

Add new comment

About text formats

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

Related Contents

No related content found :(