Tag Archives: ajax

Joomla + Ajax = Kein Problem

Posted on by
1

Überall liest man ja, das sich Joomla und Ajax nicht gut vertragen. Dem muss ich allerdings wiedersprechen. Habe ein kleines aber feines Script entwickelt, welches dieses Problem in wenigen Sekunden löst.

Doch erstmal: Wovon rede ich eigentlich?

Standardmäßig wird in Joomla ja nach einem Klick auf einen Link die Seite komplett neu geladen. Der Ajax-Way macht es anderst: Hierbei wird nur ein bestimmter Container mit neuen Inhalten geladen. Das kann in vielen Situationen hilfreich und erwünscht sein.

Beispielsweise wenn man ein laufendes Video auf der Seite hat, was nach jedem Klick neu starten würde.

Hier das Script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 // Ajax Script - by paxos - http://the-skylab.de/
 // Makes Joomla a Happy Ajax Hippo!
 
 var contentContainer = 'content'; // Change this!
 var ajaxLinkerDelayed = false;
 
 function ajaxLinker(url)
 {
    if (ajaxLinkerDelayed) return false;
    if (( url.href == null) || ( url.href.indexOf('#') != -1)) { return false; }
   
    var myUrl = url.href.replace('index.php', 'index2.php');
    // Home Seite hat kein index.php im Namen!
    if (myUrl.indexOf('index') == -1)
        myUrl += 'index2.php';
   
    var myHTMLRequest = new Request.HTML({url: myUrl, update: contentContainer, onComplete: function() { initAjaxContent() }}).send();
    ajaxLinkerDelayed = true;
    window.setTimeout("ajaxLinkerDelayed = false", 200);

    // Wichtig damit der Link nicht aufgerufen wird
    return false;
 }
 
 function initAjaxContent() {
    $$('#bg-center a').addEvent('click', function() { return ajaxLinker(this);});
 }
 
 function initAjax() {
    $$('a').addEvent('click', function() { return ajaxLinker(this);});
 }

Das Script sucht sich alle Links auf der Seite raus und hängt dort ein Event ran. Dieses Event wird fortan nach einem Klick aufgerufen und führt seinen eigenen Code aus. Gleichzeitig verhindert es, dass die Standardaktion, also das Aufrufen des angebenen Links, ausgeführt wird. Statt dessen lädt es selbstständig via Hintergrundrequest den neuen Inhalt vom Server und fügt ihn in den angebenen Container ein. Auf die neuen Inhalte wird das Script natürlich nochmals angewendet.

Einfach als JoomlaAjax.js speichern und im Header des Templates einbinden. Wenn ich Lust habe mach ich vielleicht mal ne Komponente draus und stell sie zum Download bereit.

Achtung: Das Script ist nur mit MooTools 1.2 getestet. Zum Zeitpunkt dieses Beitrages wird nur MooTools 1.1 mit Joomla ausgeliefert. Wie man die neue Version korrekt zum laufen bekommt wird hier beschrieben. Bitte NICHT einfach drüber kopieren, sonst funktioniert das Joomla Backend nicht mehr!