Comment changer le comportement de chargement ajax dans Views?

J'ai une vue avec des filtres exposés dans un bloc; Il utilise AJAX et la fonction d'envoi automatique, de sorte que la vue est rechargée dès qu'une option de filtre est modifiée.

Dans le court délai entre la sélection d'une option et le réaffichage de la vue, le throbber AJAX bleu bien connu est affiché quelque part au bas du formulaire (je pense que le bouton de soumission masqué se trouve actuellement).

Je sais que je peux personnaliser cette image en remplaçant le CSS pour l'élément throbber, mais je préférerais ne pas l'utiliser du tout.

Ce que je préférerais beaucoup faire, c’est effacer temporairement la forme de filtre exposée (et idéalement la vue principale également), en utilisant une animation jQuery. Ils réapparaissent ensuite une fois l'appel AJAX terminé.

À défaut, j'aimerais utiliser la même méthode que celle utilisée par le module d'interface utilisateur lors de la mise à jour, à savoir en plaçant cette icône au milieu de la page:

Comme cela est déjà intégré, je pensais simplement qu’il y aurait un réglage quelque part pour changer le style / l’emplacement de ce comportement de chargement; pas de chance cependant.

Comment implémenter l'une ou l'autre de ces méthodes?

J'utilise Drupal 7 avec Views 7.x-3.3.

Si cela ne vous dérange pas d'utiliser un peu de temps, vous pouvez toujours faire quelque chose comme:

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

Par souci d'exhaustivité, voici le code que j'ai finalement utilisé; il atténue à la fois la forme de filtre exposée et la vue lorsque la charge AJAX commence, puis revient à la fin:

(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);

Bonjour, j'ai créé un module très simple qui dose exactement ce que vous voulez faire. Le module a une page de configuration où vous pouvez contrôler le style du throbber et même télécharger vos propres images sans aucun piratage.

C'est le lien du bac à sable: http://drupal.org/sandbox/ANDiTKO/1556808

Si vous le trouvez utile, merci de le relire ici pour qu'il puisse être approuvé en tant que projet officiel: http://drupal.org/node/1556114

Je viens de faire une recherche.
Le throbberest codé en dur ici dans le constructeur de Drupal.views.ajaxView.
Une instance de Drupal.views.ajaxViewn'est pas stockée dans Drupal.ajaxet il y a @todo à ce sujet.
Cela signifie que nous ne pouvons pas aller dans l'objet et définir nos propres paramètres.

Comment fait-il vues?

La réponse courte est CSS.
La page d'administration de Views masque throbber et ajoute du style à son 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;
}

Puis-je faire quelque chose avec Drupal.ajax?

Oui, j'ai trouvé des méthodes que vous pouvez écraser pour les éléments AJAX (boutons, liens, etc.). J'ai montré un exemple ici: Comment étendre ou “accrocher” Drupal Form AJAX? . Mais dans ce cas, ce ne sera pas si bon.
L'élément de progrès est affiché à l' beforeSendétape, vous pouvez donc faire quelque chose avant que cela n'arrive.