Drupal Ajax Tabs Module - Add Preloader | Focal55 Designer Development

I really love working with Drupal, and I have always wanted to contribute back to the Drupal community but never had an opportunity. However, today I stumbled across a module today called the Ajax Tabs modules by doublethink. The module turns the tabs in Drupal into Ajax Tabs (duh!). The only downside I saw in the module was the fact that it didnt render a preloader indicator anywhere, so when you clicked the tab, there was no way for the user to know that the page was loading the new content.

Finally after years of using Drupal and reaping the benefits of all the great developers that contribute to the forums, I knew a solution to this preloader issues. It turned out that a few others had posted the desire to have a preloader as well, so I took an opportunity to post my solution in the issue thread.

Here is what I posted

In the ajax_tabs.js file of the Ajax Tabs module, you can easily use jQuery to display a preloader when the tab is clicked. Here is an example of what I did to make a preloader show up.

ajax_tabs.js

Drupal.AjaxTabs = Drupal.AjaxTabs || {};
Drupal.behaviors.AjaxTabs = function (context) {
$('#tabs-wrapper a').click(function() {

//Once the click handler fires, check to see if the preloaders is already on the page
//If it is, fade it in. If not, prepend it to the tabs-wrapper. 
$('.AjaxTabs-preloader').length == 0 ? $('#tabs-wrapper').prepend('<div class="AjaxTabs-preloader"></div>') : $(".AjaxTabs-preloader").fadeIn("fast");


var target = $('#AjaxTabs-wrapper');
if (!$(this).hasClass('active')) {

$.ajax({
type: 'POST',
data: 'AjaxTabs=1',
dataType: 'json',
url: $(this).attr('href'),
success: function(response){

//Once we have a successfully response, fadeout the preloader
$(".AjaxTabs-preloader").fadeOut("fast");


if (response.__callbacks) {
$.each(response.__callbacks, function(i, callback) {
eval(callback)(target, response);
});
}
document.title = response.head_title;
}
});
$('#tabs-wrapper li').removeClass('active');
$('#tabs-wrapper a').removeClass('active');
$(this).addClass('active');
$(this).parents('#tabs-wrapper li').addClass('active');
}
return false;
});
}

Drupal.AjaxTabs.contentCallback = function (target, response) {
target = $(target).hide().html(response.content).fadeIn();
Drupal.attachBehaviors(target);
}

To summarize, after the user clicks on the tab, check to see if the preloader is already on the page and if not, fadeIn() the preloader. On a success response, fadeOut() the preloader.

I will go educate myself on how to properly contribute back code, but maybe this will help some of you in the meantime.

I should also note that I added a .AjaxTabs-preloader class to my themes style sheet and made a GIF preloader graphic the background image. I am not sure how to do this properly via a module.

FYI - http://preloaders.net and http://www.ajaxload.info are great resources for sweet preloader GIFs.

Add a Comment

Drupal Ajax Tabs Module - Add Preloader

By Joe Ybarra, Lead Developer

Recent blog posts