Preloader

I second this. Some kind of simple loading indicator would be great. Its not completely obvious that ajax is at work.
--
J.

yeah! this is my first thought after enable this cool module.

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.

I think too this feature is really needed!

subscribe

subscribing...

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

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

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?

Same here (subscribe)

Try this css

.AjaxTabs-preloader{
background-image:url(images/status-active.gif) ;
 background-position: center center;
background-repeat:no-repeat;
padding:15px;
float:left;
}

Plz Tell me solution for this issue...This is must for every drupal website..