Wie ändere ich das Ajax-Ladeverhalten in Ansichten?

34

Ich habe eine Ansicht mit einigen herausgestellten Filtern in einem Block; Es verwendet AJAX und die Funktion zum automatischen Senden, sodass die Ansicht erneut geladen wird, sobald eine Filteroption geändert wird.

In der kurzen Zeitspanne zwischen der Auswahl einer Option und dem erneuten Laden der Ansicht wird der vertraute blaue AJAX-Throbber irgendwo unten im Formular angezeigt (ich denke, wo sich derzeit die versteckte Schaltfläche zum Senden befindet).

Ich weiß, dass ich dieses Bild anpassen kann, indem ich das CSS für das throbber-Element überschreibe, aber ich würde es vorziehen, es überhaupt nicht zu verwenden.

Am liebsten würde ich die belichtete Filterform (und im Idealfall auch die Hauptansicht) mithilfe einer jQuery-Animation vorübergehend ausblenden. Sie werden dann wieder eingeblendet, wenn der AJAX-Aufruf abgeschlossen ist.

Andernfalls würde ich gerne die gleiche Methode verwenden, die das Ansichten-UI-Modul beim Aktualisieren verwendet, nämlich dieses Symbol in der Mitte der Seite zu platzieren:

Bildbeschreibung hier eingeben

Da dies bereits eingebaut ist, habe ich nur angenommen, dass es irgendwo eine Einstellung geben würde, um den Stil / die Position dieses Ladeverhaltens zu ändern. aber kein solches Glück.

Wie implementiere ich eine dieser Methoden?

Ich verwende Drupal 7 mit Views 7.x-3.3.

Clive
quelle
Mmmm ... Morgenprojekt :)
Lester Peabody
In welchem ​​Zeitraum muss das erledigt werden?
Lester Peabody
@Lester Ich bin nicht in Eile, da es für keines der Projekte, an denen ich arbeite, ein Release-Blocker ist ... aber ich muss zugeben, es nervt mich! Ich benutze selten Views und ich habe nicht die Zeit (oder Energie offen), mich auf einer niedrigeren Ebene darauf einzulassen. Aber da ich jetzt beginne, meine E-Commerce-Bemühungen auf Drupal Commerce zu übertragen, muss ich in der Lage sein, dies zu tun. Wenn ich während der 7-tägigen Kopfgeldperiode eine gute Antwort erhalte, bin ich überglücklich :)
Clive
Hey, ich habe gerade mein benutzerdefiniertes Modul (mit der Einstellungsadministrationsseite) zum Stylen des Views Throbber fertiggestellt. Sind Sie immer noch interessiert? Ich kann es innerhalb weniger Tage auf drupal.org hochladen
ANDiTKO
1
#random -: -o Ich dachte, bei @Clive dreht sich alles um Antworten, du stellst sogar Fragen;): D
SGhosh

Antworten:

42

Wenn es Ihnen nichts ausmacht, ein wenig jquery zu benutzen, können Sie immer etwas tun wie:

$('#view-id').ajaxStart(function(){
   $('#view-filters-id').fadeTo(300, 0.5);
});
$('#view-id').ajaxSuccess(function(){
   $('#view-filters-id').fadeTo(300, 1.0);
});
Chance G
quelle
4
Ja, ich stimme dieser Lösung zu. Man beachte nur, dass jQuery ajaxSendund ajaxCompletemit Bedingung if (settings.url == '/views/ajax') {//... }für mehr Kontrolle verwendet werden können.
Kalabro
Wow, ich habe die Dinge wirklich überkompliziert, es scheint jetzt so offensichtlich zu sein! Ich musste die Ereignisse eher an das Filterformular als an die Ansicht anhängen (ansonsten wird es ajaxSuccessnur einmal ausgelöst; ich schätze, weil das Ereignis nicht automatisch an das ersetzte gebunden wird <div>), aber ansonsten ist dies perfekt, ganz zu schweigen von der schönen Einfachheit . Vielen Dank
Clive
@kalabro Nochmals vielen Dank für Ihre Hilfe, wenn ich das Kopfgeld zwischen diesem und Ihrer Antwort aufteilen könnte, würde ich; aber ich muss mich wirklich für dieses entscheiden, da es fast ein voll funktionsfähiges Beispiel ist :)
Clive
@Clive, ich bin sehr glücklich, die Lösung gefunden :)
Kalabro
1
Ab jQuery 1.8 sollte die Methode .ajaxSuccess () nur an das Dokument angehängt werden . Der Vergleich der Einstellungswerte, wie von Kalabro oben vorgeschlagen, ist der richtige Weg. Quelle: api.jquery.com/ajaxSuccess
cjoy
29

Der Vollständigkeit halber hier der Code, den ich letztendlich benutzt habe; Es blendet sowohl die belichtete Filterform als auch die Ansicht aus, wenn das AJAX-Laden beginnt, und wieder ein, wenn es beendet ist:

(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
quelle
Genial! Ich bin froh, dass das für dich geklappt hat.
Chance G
Wie geht das auf Drupal 6?
Ryan G
wirklich toll, aber nur einmal gilt :)
Kojo
10

Hallo, ich habe ein sehr einfaches Modul erstellt, das genau das dosiert, was Sie tun möchten. Das Modul verfügt über eine Konfigurationsseite, auf der Sie den Stil des Throbbers steuern und sogar Ihre eigenen Bilder hochladen können, ohne hacken zu müssen.

Dies ist der Sandbox-Link: http://drupal.org/sandbox/ANDiTKO/1556808

Wenn Sie es nützlich finden, lesen Sie es bitte hier, damit es als offizielles Projekt genehmigt werden kann: http://drupal.org/node/1556114

ANDiTKO
quelle
Das sieht großartig aus, danke :) Ich werde es installieren lassen und einige Kommentare zu der Rezension posten, wenn ich die Chance bekomme
Clive
6

Ich habe gerade recherchiert.
Das throbberist hier im Konstruktor von hardcodiert Drupal.views.ajaxView.
Eine Instanz von Drupal.views.ajaxViewwird nicht in gespeichert Drupal.ajaxund es gibt @todo darüber.
Es bedeutet, dass wir nicht in das Objekt hineingehen und unsere eigenen Parameter einstellen können.

Wie funktioniert Views?

Die kurze Antwort lautet CSS.
Die Ansichten-Administratorseite wird nur ausgeblendet throbber und dem übergeordneten Element ein Stil hinzugefügt .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;
}

Kann ich etwas mit Drupal.ajax machen?

Ja, ich habe einige Methoden gefunden, die Sie für AJAX-Elemente überschreiben können (Schaltflächen, Links usw.). Ich habe hier ein Beispiel gezeigt: Wie kann man Drupal Form AJAX erweitern oder "einbinden"? . Aber in diesem Fall wird es nicht so gut sein.
Das Fortschrittselement wird in der beforeSendPhase angezeigt, sodass Sie etwas tun können, bevor es passiert.

kalabro
quelle
Vielen Dank für die Informationen, aber ich bin nicht sicher, wie ich sie verwenden würde, um mein Problem zu lösen. Wollen Sie damit sagen, dass es nicht möglich ist, das Standardladeverhalten von Views ajax über CSS hinaus hinzuzufügen / zu ändern, zumindest ohne das Views-Modul zu hacken?
Clive
Ich meine, Sie können CSS verwenden, weil Views es auch verwendet. Einfach verstecken .throbberund ein paar Styles hinzufügen.ajax-progress-throbber
Kalabro
OK, also erhalten sowohl das exponierte Filterformular im Block als auch die Ansicht selbst eine Klasse, .ajax-progress-throbberwann AJAX aufgerufen wird? Ich muss zugeben, dass ich das nicht bemerkt habe, aber ich werde es überprüfen. Und Sie glauben, ich kann jQuery-Animation in einer beforeSendFunktion aufrufen (basierend auf der Antwort auf Ihre andere Frage)? Danke, ich benutze Views nicht wirklich und ich kann mich nicht die Mühe machen, mich in jeden Code zu vertiefen, um herauszufinden, was passiert! Ich werde Sie wissen lassen, wie es mir gelingt, das zu versuchen
Clive
1
Um den gewünschten Überblendungseffekt für die Formularelemente zu erzielen, können Sie anstelle von jQuery-Animationen auch CSS-Übergänge verwenden. Allerdings funktionieren jQuery-Animationen nur in der neuesten Generation in allen Browsern und CSS-Übergängen.
Lester Peabody
Danke @Lester, ich würde vorerst lieber jQuery verwenden. @kalabro Ihr Vorschlag funktioniert leider nicht. Weder für die Ansicht noch für den freigelegten Filterblock wird die .ajax-progress-throbberKlasse zu irgendeinem Zeitpunkt angewendet, sodass Ihre Methode nicht funktioniert. Vielen Dank für den Versuch
Clive