So wie auf dem Camp am weeksde versprochen fasse ich meinen Vortrag über die Ajax-Abfrage von Views hier nochmal zusammen.

Es ging dabei um eine möglichst einfache Lösung Informationen einer View mittels Jquery als Ajaxanfrage abzuholen und dabei zu zeigen wie komfortabel und einfach die JS-Development durch den Einsatz von JQuery werden kann.

Die Session wird auch noch als Video nachgereicht werden, sowie die Videos aus unserer Schnittabteilung rauskommen.

Zum Einsatz kamen die beiden Module Views und . Für das Theme hab ich mich des Clean-Themes bedient.

Aus dem Bonuspack wird lediglich das Export-Modul benötigt, welches es ermöglicht Feeds auch reines XML auszugeben. Nexthin gehe ich bei der Firstllung des Skriptes davon aus, dass die Links zu Usern in folgender Form aufgebaut werden: /user/uid
Bei anderem Aufbau durch pathauto oder ähnlichem sind natürlich entsprechende Änderungen vorzunehmen.

Mittels dem Develmodul hatte ich schnell 50 User und 120 Posts erstellt. So ist auf der Home auch schon mal genügend Content vorhanden.

Firstllung der View
Als nächstes wurde die abzufragende View erstellt. Eine Node-View, der ich als Argument die User-ID mitgab, und die Felder mit dem Node-Title, der Node-ID und dem Firstllungsdatum abfragte.
Davon wird nun ein Feed-Display erstellt dessen Style man nun als XML-File ausgeben kann, dem Bonuspack sei dank.
Als Pfad dient /usersotries/%
Die Tags der XML-Datei werden aus den labels die man bei den Feldern eingibt erzeugt.

Firstllung des Skripts
Wenn die View gespeichert ist geht es an den Code. Hier für habe ich mir ein Scipt mit dem Namen usercontent.js im JS-Folder des Themes erstellt und dieses auch in die .info-Datei des Themes eingetragen.

Das vollständige Script hängt diesem Post an. Ich werde hier nur kurz den prinzipellen Ablauf erläutern.

Der Container für die View
Wenn der Dokumentbaum durch $(function(){}); vollständig geladen ist wird durch die Zeile $('#left').append(''); der Div-Container erzeugt, in dem die View später landen soll.

Der Eventhandler
Nun wird an alle User-links im Submitted-Bereich des Node-Teaser bzw. Bodies ein event-Handler für das Click-Event gehangen. $('.node-submitted a').click(function(event){});

Standardverhalten unterdrücken
In diesem Event-Handler verhindere ich durch event.preventDefault(); zunächst, dass die verlinkte Page aufgerufen wird.

Leeren des View-Containers
Dann gehe ich sicher, dass der Container in dem die View geladen werden soll auch leer ist, mittels der Zeile $('#ajax-userstories').empty();

Ermitteln der User-ID
Nun der erste "Tricky-Part": Ich erzeuge eine Variable welche den Ursprünglichen Pfad beinhaltet, der ja etwas mit /user/ am Anfag stehen hat.
Durch die substring-Methode kann ich mir ganz leicht die User-ID ermitteln, in dem ich einfach an 6. Stelle anfange. Der Code hierfür sieht dann so aus:
var userProfile = $(this).attr('href');
var userId = userProfile.substring(6);

Funktionsaufruf
Nun kann ich ganz leicht die Adresse zur XML-View aufbauen in dem ich anden String '/userstories/' die Variable userId anhänge.

Das ganze übergebe ich nun als Argument in dem Funktionsaufruf von viewLaden();

Die viewLaden()-Funktion wird deklariert
Diese Funktion wird in der oberen Hälfte des Scripts definiert und beinhaltet eine XML-Http-Request, deren Daten in der html-Variable verarbeitet und als HTML-Code abgelegt werden.
Beim Topic XML-Http-Request sträuben sich bei einigen JS-Entwicklern sicher die Nackenhaare. Die Zeiten sind dank der JQuery-Library jedoch vorbei.
Eine vollwertige Request wird durch diese Zeile Code erzeugt:
$.get(xmladresse, function(data){});
$.get muss lediglich eine Adresse, wie hier 'xmladresse' und eine Callback-Function bekommen. Das wars.

Der Callback für $.get
In der Callback-Function habe ich eine Variable html deklariert, welche zunächst einen

-einleitenden Code beinhaltet.

Schließlich werden die, von der XML-Http-Request erhaltenen, Daten, welche in 'data' gespeichert sind nach node-Tags durchsucht und auf jedes Gefundene eine Callbackfunction angewandt.
Dank jQuery ist auch dies ganz einfach: $(data).find('node').each(function(){}

Der Callback für $.each
In dem Callback hierfür speichere ich die erhaltenen Daten lediglich in dem Objekt: node und erweitere die html-Variable um den verlinkten Nodetile und das Postdate.
Das node-objekt lässt sich ganz leicht mit $().find() durchsuchen und der Text des gefundenen Elements mit der .text()-Methode ausgeben.
Den Node-Title erhalten wir also durch node.find('title').text();

So wird bei allen drei Feldern vorgegangen. Das ganze wird natürlich im gewünschten HTML-Code gewrappt.

Abschluss
Das wars dann auch schon. Ich denke, dass Unklarheiten beim Sichten des Codes und eventuellen Nachschlagens auf der sehr guten J-Query-Dokumentation wie von selbst lüften werden und wenn ich das Video nachreichen kann, dieses seinen Teil beitragen wird.
Of course dürft ihr aber gerne immer nachfragen und Verbesserungen anregen.