Drupal 7: How to remove throbber image from ajax links and create a custom throbber.
In this howto, we will see how to remove the blue throbber image and related markup when you click on an ajax link and replace with a custom throbber image.
Any form element or link can be made ajax by setting #ajax property. But #ajax property is tied closely to drupal form elements. There is another way in drupal to convert a link to use ajax, by setting 'use-ajax' class. But for those links the progress type is always throbber.
In this howto we will look at one of the many ways to change to our custom throbber.
Instead of use-ajax we will use custom-ajax class. We will bind ajax behaviour to elements having this class. So instead of <a class="use-ajax">link</a> we will do <a class="custom-ajax">link</a>
<?php
Drupal.behaviors.MyAjax = {
attach: function(context, settings) {
// Bind Ajax behaviors to all items having the class 'custom-ajax'.
$('.custom-ajax', context).once('ajax', function () {
var element = this;
var element_settings = {};
element_settings.progress = { 'type': 'customLoader' };
if ($(this).attr('href')) {
element_settings.url = $(this).attr('href');
// Do ajax on a custom event
element_settings.event = 'MyClickEvent';
}
var base = $(element).attr('id');
var ajax = new Drupal.ajax(base, element, element_settings);
ajax.default_success = ajax.success;
// Change the success callback to remove/hide our custom throbber
ajax.success = function (response, status) {
// hide/remove custom loader
// Additionally we can remove our custom throbber markup here
$(element).parents('.my-throbber:eq(0)').hide();
// do normal processing
ajax.default_success(response, status);
};
// Similarly you may want to update error callback to remove your custom throbber in case of error
// By default it throws an alert , lets change it to something pretty
ajax.error = function(response, uri) {
// Hiding throbber
$(element).parents('.my-throbber:eq(0)').hide();
// display error in nice jquery_ui dialog
$('<div id="newDialogBox">' + Drupal.ajaxError(response, uri) + '</div>').dialog();
// Part of code below is copied from Drupal.ajax.prototype.error
// Undo hide.
$(this.wrapper).show();
// Re-enable the element.
$(this.element).removeClass('progress-disabled').removeAttr('disabled');
// Reattach behaviors, if they were detached in beforeSerialize().
if (this.form) {
var settings = response.settings || this.settings || Drupal.settings;
Drupal.attachBehaviors(this.form, settings);
}
};
// Add our new element to global variable, so other module can get a chance to update it
Drupal.ajax[base] = ajax;
// On a click event we will trigger our custom MyClickEvent which will do the ajax
// The whole idea is to make custom events, suppose you want to load content dynamically on mouseover like a tooltip, you can register a mouseover/hover event
$(element).click(function() {
// show custom throbber
// We can add our custom throbber markup here. In this case i already had a throbber markup in my html and was hidden by default
$(element).parents('.my-throbber:eq(0)').show();
// Trigger the ajax event
$(element).trigger('MyClickEvent');
return false;
});
});
}
};
?>In your php code add
<?php
drupal_add_library('system', 'ui.dialog');
?>
Post new comment