web-dev-qa-db-fra.com

Comment modifier le comportement de chargement ajax dans les vues?

J'ai une vue avec quelques filtres exposés dans un bloc; il utilise AJAX et la fonction de soumission automatique pour que la vue soit 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 la vue en cours de rechargement, le familier bleu AJAX throbber est affiché quelque part au bas du formulaire (je pense que le bouton d'envoi caché 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 de beaucoup, c'est estomper temporairement la forme du filtre exposé (et idéalement la vue principale également), en utilisant une animation jQuery. Ils réapparaissent ensuite lorsque l'appel AJAX est terminé.

A défaut, j'aimerais utiliser la même méthode que celle utilisée par le module Views UI lors de sa mise à jour, à savoir placer cette icône au milieu de la page:

enter image description here

Comme cela est déjà intégré, j'ai simplement supposé qu'il y aurait un paramètre quelque part pour changer le style/l'emplacement de ce comportement de chargement; pas de chance cependant.

Comment mettre en œuvre l'une de ces méthodes?

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

7viewsajaxjavascript
34
Clive

Si cela ne vous dérange pas d'utiliser un petit jquery, 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);
});
42
Chance G

Par souci d'exhaustivité, voici le code que j'ai fini par utiliser; il atténue à la fois la forme du filtre exposé et la vue lorsque la charge AJAX commence, et 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);
29
Clive

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.

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

Si vous le trouvez utile, veuillez le consulter ici afin qu'il puisse être approuvé comme projet officiel: http://drupal.org/node/1556114

10
ANDiTKO

Je viens de faire une recherche.
Le throbber est codé en dur ici dans le constructeur de Drupal.views.ajaxView.
Une instance de Drupal.views.ajaxView n'est pas stocké dans Drupal.ajax et il y a@todo à propos de ça.
Cela signifie que nous ne pouvons pas entrer dans l'objet et définir nos propres paramètres.

Comment fonctionne Views?

La réponse courte est CSS.
Affiche la page d'administration masque simplementthrobber 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é quelques méthodes que vous pouvez remplacer pour AJAX éléments (boutons, liens, etc.). J'ai montré un exemple ici: Comment étendre ou "accrocher" Drupal Forme AJAX? . Mais dans ce cas, ce ne sera pas si bon.
L'élément de progression s'affiche au stade beforeSend, vous pouvez donc faire quelque chose avant qu'il ne se produise.

6
kalabro