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();
};
}
});
}
}
}