How do I change the ajax loading behaviour in Views?

Question

I have a view with some exposed filters in a block; it uses AJAX and the auto-submit feature so the view is re-loaded as soon as a filter option is changed.

In the short delay between selecting an option and the view being re-loaded, the familiar blue AJAX throbber is shown somewhere at the bottom of the form (I think where the hidden submit button is currently located).

I know I can customise this image by overriding the CSS for the throbber element, but I'd prefer not to use it at all.

What I'd much rather do is temporarily fade out the exposed filter form (and ideally the main view as well), using a jQuery animation. They would then fade back in when the AJAX call is complete.

Failing that, I'd like to use the same method that the Views UI module uses when it's updating, namely placing this icon in the middle of the page:

As that is already built in I just assumed there would be a setting somewhere to change the style/location of this loading behaviour; no such luck though.

How do I implement either of these methods?

I'm using Drupal 7 with Views 7.x-3.3.

Answer 1

If you don't mind using a little jquery you could always do something like:

$('#view-id').ajaxStart(function(){
   $('#view-filters-id').fadeTo(300, 0.5);
});
$('#view-id').ajaxSuccess(function(){
   $('#view-filters-id').fadeTo(300, 1.0);
});

Answer 2

For the sake of completeness here's the code I ended up using; it fades both the exposed filter form and the view out when the AJAX load begins, and back in again when it finishes:

(function($) {
  Drupal.behaviors.events = {
    attach: function(context, settings) {
      $('#views-exposed-form-events-page', context).ajaxStart(function(){
        $('#views-exposed-form-events-page,div.view-id-events', context).fadeTo(300, 0.5);
      });
      $('#views-exposed-form-events-page', context).ajaxSuccess(function(){
         $('#views-exposed-form-events-page', context).fadeTo(300, 1.0);
         $('div.view-id-events', context).css('opacity', 0.5).fadeTo(300, 1.0);
      });
    }
  };
})(jQuery);

Answer 3

Hello i have created a very simple module that dose exactly what you want to do. The module has configuration page where you can control the style of the throbber and even upload your own images without any hacking.

This is the sandbox link: http://drupal.org/sandbox/ANDiTKO/1556808

If you find it useful please reveiw it here so it can be approved as official project: http://drupal.org/node/1556114

Answer 4

I just have made a research.
The throbber is hardcoded here in the constructor of Drupal.views.ajaxView.
An instance of Drupal.views.ajaxView is not stored in Drupal.ajax and there is @todo about it.
It means that we can't go into the object and set our own params.

How does Views it do?

The short answer is CSS.
Views admin page just hides throbber and adds style to it's parent .ajax-progress-throbber.

.ajax-progress-throbber {
  background-color: #232323;
  background-image: url("../images/loading-small.gif");
  background-position: center center;
  background-repeat: no-repeat;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  height: 24px;
  opacity: .9;
  padding: 4px;
  width: 24px;
}

Can I do something with Drupal.ajax?

Yes, I found some methods you can overwrite for AJAX elements (buttons, links, etc). I have showed an example here: How to extend or “hook” Drupal Form AJAX?. But in this case it will be not so good.
Progress element is showing at beforeSend stage, so you can do something before it happens.