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
Zach (not verified)
• 1 year ago• PermalinkHeyo, How did you know what…
Heyo,
How did you know what to pass into `Drupal.theme` to get this specific template?
admin
• 1 year ago• PermalinkHi Zach, If you look at…
Hi Zach,
If you look at core/misc/ajax.js file, you will see that the drupal core ajax method default progress is "throbber":
and if trace this part of the code:
You'll see there that the variable progressIndicatorMethod forms to call this function Drupal.Ajax.prototype.setProgressIndicatorThrobber
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.
Hope that helps
In reply to Hi Zach, If you look at… by admin
Anonymous (not verified)
• 1 year ago• PermalinkAmazing!
Amazing!
Add new comment