Posted by mr.alinaki on August 5, 2009 at 11:02am
Jump to:
| Project: | Ajax Tabs |
| Version: | 6.x-0.1 |
| Component: | User interface |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
Is it possible to display the preload image while tab is processing?
Wonderful module, by the way!
Comments
#1
I second this. Some kind of simple loading indicator would be great. Its not completely obvious that ajax is at work.
--
J.
#2
yeah! this is my first thought after enable this cool module.
#3
Yes, as it takes a while until the new content, a loading indicator would be cool!
Steps:
- Fade out the old content
- loader icon
- fade in new content
I'd be ready to sponsor a few bugs.
#4
I think too this feature is really needed!
#5
subscribe
#6
subscribing...
#7
I want to help out here but I am pretty new to contributing back to the community, so I will just put my thoughts in here for now, while I learn more about contributing to the amazing Drupal community
In the ajax_tabs.js file 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.
Joe Ybarra
Focal55 Designer Development
#8
UPDATE: I turned off this again, cuz there are still some problem...
it works perfectly!! Thanks focal55~
My example: http://bhuntr.com/match/detail/3160
I moved the AjaxTabs-preloader to #content-area prepend
#9
Thanks for the input into this issue, I cant seem to get it to work though.
I added you code that you posted to the bottom of the js file, I added a class
.AjaxTabs-preloader{
background:url("images/29.gif") no-repeat;
}
to my stylesheet but nothing happens. In firebug im expecting to see a div pre-pended to the the 'tabs-wrapper' but nothing happens. Am i missing something obvious?
#10
Same here (subscribe)
#11
Try this css
.AjaxTabs-preloader{background-image:url(images/status-active.gif) ;
background-position: center center;
background-repeat:no-repeat;
padding:15px;
float:left;
}
#12
Plz Tell me solution for this issue...This is must for every drupal website..