Comment changer le comportement de chargement ajax dans Views?

34

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:

entrez la description de l'image ici

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.

Clive
la source
Mmmm ... le projet du matin :)
Lester Peabody
Quelle est la période de temps dans laquelle vous avez besoin que cela soit fait?
Lester Peabody
@ Lester Je ne suis pas très pressé car ce n'est pas un bloqueur de publication pour aucun des projets sur lesquels je travaille ... mais je dois admettre que cela me dérange! J'utilise rarement Views et je n'ai pas le temps (ni l'énergie, franchement) de m'impliquer à un niveau inférieur; mais comme je commence maintenant à porter mes efforts de commerce électronique vers Drupal Commerce, je dois pouvoir faire ce genre de chose. Si je reçois une bonne réponse au cours de la période de prime de 7 jours, je serai sur la lune :)
Clive
Hey, je viens de terminer la création de mon module personnalisé (avec la page d'administration des paramètres) pour le style des vues Throbber. Êtes vous toujours intéressé? Je peux le télécharger d'ici quelques jours sur drupal.org
ANDiTKO
1
#random -: -o Je pensais que @Clive était tout au sujet des réponses, vous posez même des questions;): D
SGhosh

Réponses:

42

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);
});
Chance G
la source
4
Oui, je suis d'accord avec cette solution. Notez juste que jQuery ajaxSendet ajaxCompletepeut être utilisé avec condition if (settings.url == '/views/ajax') {//... }pour plus de contrôle.
Kalabro
Wow j'ai vraiment trop compliqué les choses, il semble si évident maintenant! Je devais attacher les événements à la forme du filtre plutôt qu'à la vue (sinon ajaxSuccess, je ne suis renvoyé qu'une fois; je suppose parce que l'événement n'est pas automatiquement lié à la personne remplacée <div>), mais à part cela, c'est parfait, pour ne pas dire magnifiquement simple. . Merci beaucoup
Clive
@ kalabro Merci encore pour votre aide, si je pouvais partager la prime entre ceci et votre réponse, je le ferais; mais je dois y aller vraiment car c'est presque un exemple pleinement fonctionnel :)
Clive
@Clive, je suis très content de la solution trouvée :)
kalabro
1
Depuis jQuery 1.8, la méthode .ajaxSuccess () ne devrait être attachée qu'au document . Comparer les paramètres, comme suggéré par kalabro ci-dessus, est la voie à suivre. source: api.jquery.com/ajaxSuccess
cjoy
29

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);
Clive
la source
Impressionnant! Je suis content que cela a fonctionné pour vous.
Chance G
Comment cela se fait-il sur Drupal 6?
Ryan G
vraiment génial, mais ne s'applique qu'une fois :)
Kojo
10

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

ANDiTKO
la source
Ça a l'air génial merci beaucoup :) Je l'installerai et posterai quelques commentaires sur l'examen quand j'aurai l'occasion
Clive
6

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.

Kalabro
la source
Merci beaucoup pour ces informations, mais je ne sais pas comment je les utiliserais pour résoudre mon problème. Voulez-vous dire qu'il n'est pas possible d'ajouter / de modifier le comportement par défaut du chargement de Views en dehors de CSS, du moins sans piratage du module Views?
Clive
Je veux dire, vous pouvez utiliser CSS, car Views l'utilise également. Il suffit de cacher .throbberet d'ajouter des styles à.ajax-progress-throbber
kalabro
OK, le formulaire de filtre exposé dans le bloc et la vue elle-même obtiennent-ils une classe .ajax-progress-throbberlorsque tout AJAX est appelé? Je dois admettre que je n'ai pas remarqué cela, mais je vais vérifier. Et vous pensez que je serai capable d'invoquer l'animation jQuery dans une beforeSendfonction (en fonction de la réponse à votre autre question)? Merci, je n'utilise pas vraiment Views et je ne peux pas être dérangé pour fouiller dans chaque code afin de savoir ce qui se passe! Je vous ferai savoir comment j'essaie de le faire
Clive
1
Pour obtenir l'effet de fondu souhaité sur les éléments de formulaire, vous pouvez également utiliser des transitions CSS au lieu des animations jQuery, bien que les animations jQuery fonctionnent avec tous les navigateurs et les transitions CSS uniquement sur la dernière génération.
Lester Peabody
Merci @ Lester, je préfère utiliser jQuery pour le moment. @ kalabro malheureusement votre suggestion ne fonctionne pas; ni la vue, ni le bloc de filtre exposé, ne leur .ajax-progress-throbberappliquent la classe à un moment quelconque pour que votre méthode ne fonctionne pas. Merci d'avoir essayé
Clive