Drupal Views per Ajax Request aufrufen und einbinden

Zur Verwaltung von Bilder stelle ich eine extra Seite im Intranet zur Verfügung. Hierzu werden in einem Netzwerkpfad sämtliche Bilder in einer Verzeichnisstruktur gefilter und in eine Drupalseite importiert und regelmäßig synchronisiert. Werden z.B. Bilder im Netzwerkpfad gelöscht, so wird auch in Drupal das Bilder entfernt. Da die Bilder durch EXIF und IPTC mit Keywords versehen werden, nutze ich diese Keywords gleichzeitig im Taxonomy System von Drupal. So kann man Bilder wunderbar über die Keywords / Taxonomy Terms navigieren.

Bei tausenden von Bilder möchte man allerdings UND / ODER Verknüpfungen nutzen können, um Bilder besser finden zu können. Es gibt hier eine ganze Palette an Drupal Modulen, allerdings hab ich kein wirklich hilfreichen gefunden, welche gleichzeitig auch Ajax / jQuery nutzt um die Seite dynamisch ändern zu können.

Was soll passieren

Ich möchte also innerhalb eines Blocks (Seitennavigation) eine Auswahl von Keywords sortiert nach deren Anzahl haben. Durch klicken auf einen Begriff werden innerhalb der Seite die entsprechenden Bilder angezeigt. Durch Anklicken eines weiteren Begriffes werden dann nur die Bilder angezeigt, die beide Begriffe enthalten usw.
Auf die Idee dazu gebracht hat mich dieser Artikel: Genial einfach: Blöcke, Nodes und Views mit AJAX und jQuery laden | Das Drupal Magazin

Keywords als Block

Zur Erzeugung eines Blocks mit den Keywords kann man ganz einfach einen View erstellen. Um Begriffen nach ihrer Häufigkeit sortieren zu können benötigen wir neben dem Begriffsfeld noch ein zusätzliches innerhalb des Views. Innerhalb dieses Feldes muss die Anzahl an Beiträgen ausgegeben werden, die einen bestimmten Begriff nutzen. Das nötige Feld stellt und das Zusatzmodule Term Node Count bereit.
Wie im Bild zu sehen kann man dann die Feldausgabe übersteuern und neben dem Begriff die Anzahl in Klammern ausgeben lassen, so wird nur eine Zeile benötigt

Keywordsauswahl überschreiben

Klick man auf einen Begriff innerhalb des angelegten Blocks, wird logischer die dazugehörige Taxonomy Seite aufgerufen, da wir hier mit Ajax Requests arbeiten wollen überschreiben wir dieses verhalten. Mittels eines kleinen jQuery Skriptes überschreiben wir jeden Link innerhalb des Blocks, so das wir dieses für uns nutzen können.
Durch jQuery können wir die Links relativ einfach durch die CSS-Elemente (z.B. #block-views-taxo_block-block_1 .field-content a) ansprechen. Klick man also auf eine der Links innerhalb des Blocks, wird eine URL erzeugt. Hierzu wird der gesamte Block durchsucht und schon eventuelle angewählte Term-Begriffe mit ihrer TermID an eine URL angehangen (z.B. /component/view/pictures/default/234,245; Komma sind UND-Verknüpfungen Pluszeichen sind ODER-Verknüpfungen, siehe View-Parameter)
Nach Generierung der URL wird dann eine Ajaxabfrage gestartet. Wir brauchen dazu einen entsprechende Ajax-Handler-Url, hierzu gibt das Component Module, es stellt uns relativ einfach Ajax-URLs für Nodes, Views, ... bereit. Sicherlich wäre es einfach selber eine URL anzulegen, wir müssen nämlich noch einen der Patch anwenden Pass additional parameters as view arguments, sonst gibt das Component Module die Views Argumente nicht weiter. Zum Anlegen eigener AjaxView Urls dieses Tutorial beachten: How to dynamically update view display

Skript einbinden

Um das jQuery Skript nutzen zu können, müssen wir dann folgenden PHP-Code (Eingabeformat: PHP-Filter nutzen) auf einer beliebige Drupalseite einbinden.

drupal_add_js('test.js');
echo '<div id="wrapping">select term</div>';

Javascript jQuery (test.js)

     $(document).ready(function(){
       $("#block-views-taxo_block-block_1 .field-content a").click(function(event){
 
		 $("#wrapping").html("loading...");
 
 	     if ($(this).hasClass("act")) {
		   $(this).removeClass("act");
		   $(this).css("background-color", "transparent");
		 } else {
           $(this).addClass("act");
		   $(this).css("background-color", "#FFB7BF");
		 }
 
         //alert("As you can see, the link no longer took you to jquery.com");
         $var="";
         $("#block-views-taxo_block-block_1 .act").each(function(){
           if ($var!="") $var = $var + ",";
           $var = $var + $(this).attr("href").substring($(this).attr("href").lastIndexOf("/")+1);
         });
         //alert($var);
		 if ($var!="") $("#wrapping").load("/component/view/pictures/default/" + $var);
 
         event.preventDefault();
       });
     });