Moving ajax progress throbber out of tabs and into quicktabs-tabpage

I would like to know how to do this, as well as disable it entirely!

subscribe

I'm altering the Drupal.ajax.prototype.beforeSend to do that thing.

This used to work well in the D6 version of quicktabs. The throbber was an actual progress bar inside the tabpage, instead of the blue circle in the tab itself.

You can hide the blue circle with CSS:

ul.quicktabs-tabs li .ajax-progress{ display:none; }

But then the user has no indication of why there's a delay when loading some tabs.

It seems that with the simplification of the javascript code in the D7 version, there's no longer a start() and stop() callback for the tabpage itself, so we can't stick a progress bar in the tab container while the content is loading.

Is there any way to add those back in D7? Darrylmabini, can you share what you did?

Sure Sir aasarava,

Note: This solution maybe not a very good solution - I just did this for my clients needs. And If someone can improve it or give suggestions or opinions, it will be good for us.

Here's how:
In my theme I created "mythemeAjax.js" file - please see code below. What I did there was to get the last first child element of quicktab container. And make a condition if undefined meaning it's not a quicktab the default will be use. So far I don't experience bad on this method. I already ask here: http://drupal.org/node/1518378 to ask for any suggestions or opinions regarding this ajax alter, but no one answering.

This can also be done in module. Maybe if the quicktab developer can fix this they can have an option what progress to use (throbber, or bar), because right now it is hardcoded and defaulted to throbber. and meassage is "" (empty text);

I attached sample image.

Thanks,
Darryl
Sorry bad english, but I practice

<?php <---- Disregard this I just want to have a colored text:D
(function($){
	Drupal.behaviors.mythemeAjax = {
		attach: function (context, settings) {
      
      if (Drupal.ajax) {
      
        Drupal.ajax.prototype.beforeSend = function (xmlhttprequest, options) {
          // Get the tab page selector
          var selector = $(this.selector).closest("div.item-list").next().children(":last-child").attr("id");
          var element = '#' + selector;
          if (selector == 'undefined') {
            element = this.element;
          }         
          
          if (this.form) {
            options.extraData = options.extraData || {};

            options.extraData.ajax_iframe_upload = '1';

            var v = $.fieldValue(this.element);
            if (v !== null) {
              options.extraData[this.element.name] = v;
            }
          }

          $(this.element).addClass('progress-disabled').attr('disabled', true);

          // Insert progressbar or throbber.
          if (this.progress.type == 'bar') {
            var progressBar = new Drupal.progressBar('ajax-progress-' + this.element.id, eval(this.progress.update_callback), this.progress.method, eval(this.progress.error_callback));
            if (this.progress.message) {
              progressBar.setProgress(-1, this.progress.message);
            }
            if (this.progress.url) {
              progressBar.startMonitoring(this.progress.url, this.progress.interval || 1500);
            }
            this.progress.element = $(progressBar.element).addClass('ajax-progress ajax-progress-bar');
            this.progress.object = progressBar;
            $(element).after(this.progress.element);
          }
          else if (this.progress.type == 'throbber') {
            this.progress.element = $('<div class="ajax-progress ajax-progress-throbber"><div class="throbber">&nbsp;</div></div>');
            if (this.progress.message) {
              $('.throbber', this.progress.element).after('<div class="message">' + this.progress.message + '</div>');
            }
            $(element).after(this.progress.element);
          }
        };
        
      }
  
		}
	}
})(jQuery);
?>

Easy solution:

1. add in theme js file:

(function ($) {
  Drupal.behaviors.themename = {
    attach: function (context, settings) {
      $('.quicktabs-tabs a:not(.quicktabs-loaded)', context).click(function() {
        if ($(this).hasClass('progress-disabled')) {
          $(this).closest('.quicktabs-wrapper').addClass('quicktabs-loading');
        }
      });
      if ($(context).hasClass('quicktabs-tabpage')) {
        $(context).closest('.quicktabs-wrapper').removeClass('quicktabs-loading');
      }
    }
  };
})(jQuery);

2. add in theme css file:

.quicktabs-tabs .ajax-progress {
  display: none;
}
.quicktabs-loading .quicktabs_main {
  height: 30px;
  margin-top: 20px;
  background: url(/misc/progress.gif);
}

With D7 EOL approaching in a month I'm starting to triage the D7 side of quicktabs queue. This doesn't appear to have any code so believe this may not make it, sorry! Thanks though!

If still an issue or needed for 4.0.x (latest branch) feel free to reopen