Seiten via Ajax nachladen¶
- Seiten via Ajax nachladen
- Vorwort:
- Schritt 1: Das Main Template Anpassen
- Schritt 2: Die mootools Funktion erstellen
- Schritt 4:
- Fazit
- Bekannte Schwächen
- Schlußwort
Vorwort:¶
Vorab möchte ich mich bei Darki aus dem Forum bedanken der mir mit seinem Post den nötigen Denkanstoß und somit auch die Vorlage zu diesem kleinen Tutorial gegeben hat. Dieses Tutorial ist nur ein Beispiel wie man das ganze realisieren kann.
Unter "habe ich eine Demo Webseite zur Verfügung gestellt auf der man das live testen kann. Die Linke Main Navigation läd über Ajax den Content nach. Für ganz eilige oder faule gibt es am Ende des Tutorials einen Download Link mit der modifizierten fe_page sowie der js Datei.
Die Mootools Funktion die hier als Beispiel dient ist keineswegs Perfekt aber sie erfüllt Ihren Demonstrationszweck.
Was benötige ich um dieses Tutorial zu verstehen?
1. Mootools Basic Kenntnisse, sind von Vorteil. Für alle die dies nachholen wollen gibt es einen (1.2!!!) Einblick im [http://www.mootorial.com/wiki/ Mootorial":http://may17.de/ajaxtest/]
2. Man sollte Wissen wie man Typolight Templates bearbeitet, was eigentlich alle können :)
Schritt 1: Das Main Template Anpassen¶
Jeder der sich bereits an einem Ajax Aufruf in einem Framework wie Typolight versucht hat kennt dieses Problem wahrscheinlich: "Es wird die komplette Seite samt Doctype html, head, body" in den Div geladen. Das liegt daran das wenn man eine url in Typolight in einem Ajax call verarbeitet die fertig gerenderte Page zurückbekommt und nicht den Teil den man gerne hätte.
Wie im Vorwort angekündigt hat darki hierzu eine Lösung in den tiefen des Forums preisgegeben die ich bei meiner intensiven Recherche bei dem Thema gefunden habe. Man fragt im Template einfach ab $_GET['request'] gesetzt ist oder nicht. Wenn er nicht gesetzt ist wird das Template normal ausgegeben, ansonsten nur die gewählte Spalte.
Das bedeutet in der Praxis folgendes:
Man setzt diese Abfrage an den Anfang des Templates:
1 <?php if(!isset($_GET['request'])): ?>Dann kommt das Normale Template:
1 <?php echo $this->doctype; ?>
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>">
3 <!--
4
5 This website is powered by TYPOlight :: open source web content management system
6 TYPOlight was developed by Leo Feyer (leo@typolight.org) :: released under GNU/LGPL
7 Visit the project website http://www.typolight.org for more information
8
9 //-->
10 <head>
11 <base href="<?php echo $this->base; ?>" />
12 <title><?php echo $this->mainTitle; ?> - <?php echo $this->pageTitle; ?></title>
13 <meta http-equiv="Content-Type" content="text/html; charset=<?php echo $this->charset; ?>" />
14 <meta name="description" content="<?php echo $this->description; ?>" />
15 <meta name="keywords" content="<?php echo $this->keywords; ?>" />
16 ........ Die weiteren Template Elemente hier..........
17 </body>
18 </html>Am Ende der Abfrage setzt man nun den else Teil:
1 <?php else: echo $this->$_GET['request']; endif; ?>Wenn man nun eine Seite wie z.b. und dahinter ?request=main (Beispiel: /impressum.html?request=main) hängt bekommt man den blanken Inhalt und hat somit die Basis um Content sauber nachladen zu können.
Schritt 2: Die mootools Funktion erstellen¶
Da wir jetzt die Basis geschaffen haben um Content sauber nachladen zu können ist es an der Zeit uns mit der Ajax Funktion auseinander zusetzen. In meinem Beispiel verwende ich die Standart Klasse von Mootools. Wir legen also folgendes an:
1. eine neue externe Javascript Datei in eurem Template Folder (z.b. tl_verzeichniss/res/js/go_ajax.js)
2. Diese binden wir in unser fe_template das wir benutzen wollen.
Nun zur Tat. Wir öffnen nun unsere neue js file (z.B. go_ajax.js) und erstellen dort unsere Ajax Funktion. Dies könnte wie folgt aussehen:
1 var go_ajax = function() {
2 new Ajax('update url', {
3 method: 'post',
4 update: S('mein_update_div'),
5 onRequest: function() {
6 //Irgendwas was passieren soll wenn der request gestartet wird
7 },
8 onComplete: function(response) {
9 //Irgendwas was passieren soll wenn der request fertig ist
10 }
11 }).request();
12 }Das wäre eine Standart Ajax Funktion die z.b. über onclick angesteuert werden könnte. Da ich onclick aber sehr unsexy finde habe ich folgende Funktion geschrieben:
1 var go_ajax = function (element, updateid, column) {
2 var to_update = $(updateid);
3 $$(element+' a').each(function(el){
4 el.onclick = function() {
5 var url = el.href;
6 var urlextend = url+"?request="+column;
7 var fadeout = to_update.effect('opacity').start(1, 0)
8
9 fadeout.addEvent('onComplete', function(e) {
10 new Ajax(urlextend, {
11 method: 'post',
12 update: to_update,
13 onRequest: function() {
14 },
15 onComplete: function(response) {
16 //location.hash = '#'+escape(url);
17 to_update.effect('opacity').start(0, 1);
18 }
19 }).request();
20 });
21 return false;
22 }
23 });
24 }Hier die Erklärung:
1 var go_ajax = function (element, updateid, column) {Ich definiere eine neue Funktion und gebe ihr die Parameter:
- Element: zur Übergabe der Element id in der ich die a tags benutzen will
- updateid: In der ich mir den div der upgedatet werden soll raus nehme
- column: mit dem ich sage welche Typolight Spalte dafür genommen werden soll.
1 var to_update = $(updateid);Ich definiere eine neue variable mit der mootools eigenen getElementById Funktion.
1 $$(element+' a').each(function(el){Ich übergebe den element parameter (die id) und erweitere die getElements abfrage um den a tag. Danach verarbeite ich jedes element in einer for in.
1 el.onclick = function() {
2 var url = el.href;
3 var urlextend = url+"?request="+column;
4 var fadeout = to_update.effect('opacity').start(1, 0)
5
6 fadeout.addEvent('onComplete', function(e) {
7 new Ajax(urlextend, {
8 method: 'post',
9 update: to_update,
10 onRequest: function() {
11 },
12 onComplete: function(response) {
13 //location.hash = '#'+escape(url);
14 to_update.effect('opacity').start(0, 1);
15 }
16 }).request();
17 });
18 return false;
19 }Jedes Element bekommt nun eine onclick Anweisung. Ich gehe nun auf die Effect Erstellung und Ajax Klasse weniger ein. Das wichtige was hier gemacht werden muss ist die a Tag Erweiterung:
1 var url = el.href;
2 var urlextend = url+"?request="+column;Die Variable url speichert jeweils den href des jeweiligen Links. In urlextend erweitere ich den Link aus dem a tag einfach nur noch um die passende Spalte. Diese Funktionalität ist sehr wichtig. Zum einen lässt es sich einfacher damit arbeiten und zum anderen stellt dies Variante sicher das die Links auch ohne Ajax weiterhin aufgerufen werden können und Funktionieren.
Schritt 4:¶
Nun muss die Funktion nur noch ausgeführt werden, dazu bindet man im Template folgenden Schnippsel in den Head Bereich:
1 window.addEvent('domready', function(e) {
2 go_ajax(
3 '#nav', // ID oder class des/der divs in dem die a tags liegen die aufgerufen werden sollen
4 'wrapper', // id des divs, welcher geupdated werden soll, ohne Raute!
5 'main' // Angabe der Spalte die man benutzen möchte
6 );
7 });Fazit¶
Wie im Vorwort erwähnt ist die hier verwendete Mootools Variante nur zu Demonstrationszwecken gedacht. Es stehen einem aber hier alle Wege offen. Zudem kommt hinzu das Mootools in Version 1.2 einfach wesentlich bessere Möglichkeiten bietet, daher hoffe ich dass das Typolight release 2.7 bald kommt :)
Bekannte Schwächen¶
Man sollte es mit dieser Technik nicht übertreiben, man bedenke das Typolight auf Barrierefreiheit setzt, in meinem Demoscript wird im Moment darauf allerdings keine Rücksicht genommen. Dadurch das die Seiten intern neu geladen werden, verändert sich der Status der url leiste nicht.
Das bedeutet das man keine Bookmarks und Browser History Funktionen. Die Lösung hierfür wäre eine hash basierte Erweiterung welche ich im Script kurz angerissen habe:
1 location.hash = '#'+escape(url);der Link bei aufruf eines verändert sich dadurch wiefolgt: index.html#impressum.html usw. Für dieses Problem gibt es eine mootools Erweiterung Namens History Manager.
Schlußwort¶
Ich hoffe das dieses Tutorial Euch weiter geholfen hat und freue mich über Fragen, Diskussionen und Kritik jeder Art im Forum. Zu guter letzt findet ihr unter "alle Dateien die in diesem Tutorial angesprochen wurden.
http://may17.de/ajaxtest/ajax_files.zip
--- Tutorial erstellt von Joe Ray Gregory