-
Seitennachladen via Ajax
Guten Morgen, sitze gerade an dem Versuch ein html5/javascript basierte Webseite in Contao zu verwirklichen. Der Grundgedanke war der wie es in der Flash Welt bekannt war ein Panorama als Hintergrund einzusetzen und diese über die verschiedenen Seiten hinweg zu bewegen. Der Seiten aufbau sieht wie folgt aus.
HTML-Code:
<header>
<nav>
</nav>
</header>
<div id="Panorama">
<div id="wrapper">
<section id="main">
</section>
</div>
</div>
<footer>
<footer>
Nun soll beim Anklicken eines Menüpunktes nur der spezifische Inhalt der Seite in der Section #main geladen werden, der Rest des Templates also Header, #Panorama und Footer sollen nicht nach geladen werden. Habe mir bereits die Erweiterung [Ajax] von Andreas Schempp angeschaut, diese ist allerdings nur für Frontend Module, Inhaltselement und Formularfelder ausgelegt. Daher die Frage gibt es einen einfachen weg oder vielleicht sogar ein Tutorial wie ich hier zum Ziel kommen könnte. Hab leider wenig Erfahrung was die Kombination Mootools/Ajax und Contao betrifft. Danke euch jetzt schon mal.
-
Hey
ich klemme mich mal an diesen Thread an, weil es für mein aktuelles Projekt auch wichtig ist.
Zuerst gibt es hier ein kleines Tutorial:
http://dev.contao.org/projects/typol...aAjaxnachladen
Dazu ein Gesrpäch im alten Forum:
http://www.contao.org/board/topic/9835.html
Hat noch jemand Erfahrungen mit diesem Thema? Gibt es bereits eine Möglichkeit, ohne das Ändern der fe_page.tpl (fe_page.html5) an einen bestimmten Layoutbereich zu kommen? In der Art "?request=$layoutbereich"?
Vielleicht können wir diesen Thread zu einer weiteren Diskussion zu diesem Thema nutzen..
Danke im Voraus, auch von mir!
-
Wäre für mich auch super!!! Komm da auch nicht wirklich dahinter, wie man das mit Contao vernünftig umsetzt!!
Habe einmal ein Template nach dem alten Thread zusammengebastelt. Lief auch solala... Problem: Sobald ein Link im selben DIV liegt, das eben auch nachgeladen werden soll!!! Klappt nicht!
Auch wenn die Hauptnavigation in einem eigenen DIV lag, so konnte ich zwar das Main-DIV nachladen. Dies ging aber auch etwas holprig vonstatten und lief nicht so schön flüssig, wie man es sonst häufig sieht!
Bin somit stark dafür ein aktuelles, gut funktionierendes Tutorial zu schreiben... Nur wer hilft???? Werde spätestens Montag (bis da bin ich im Einsatz) versuchen mein altes Template zu beschreiben und die go_ajax.js Datei zu demonstrieren! Das wär zumindest mal ein erster Schritt...
-
Hey
ich arbeite daran, etwas gut zu funktionierendes auf die Beine zu stellen - bisher hakt es immer noch an einigen Stellen. Deswegen schaue ich mir gerade das jQuery-basierende BBQ-Plugin an.
Wenn ich damit etwas anständiges zum Laufen gebracht habe, werde ich es hier posten; hoffe, dass auch andere ihre Lösungen mal zeigen :)
-
BBQ nutzt wohl anscheinend nicht die HistoryAPI der neuen HTML5 Browser - history.js allerdings schon, deswegen probiere ich jetzt das mal aus. Momentan wird das Menü noch nicht richtig geändert... hat schon jemand damit Erfahrungen?
Wie schauts bei Dir aus buchbergertom?
-
Die go_ajax.js Datei (im Seitenlayout einbinden)
Code:
var go_ajax = function (element, updateid, column) {
var to_update = $(updateid);
$$(element+' a').each(function(el){
el.addEvent('click', function() {
$$(element+' ul li.active').each(function(e2){e2.removeClass('active')});
var url = el.href;
var urlextend = url+"?request="+column;
var fadeout = to_update.fade(0.0);
var req = new Request.HTML({
url: urlextend,
method: 'post',
onRequest: function(){ },
onComplete: function(responseTree, responseElements, responseHTML, responseJavaScript){
to_update.fade(1.0);
}
})
req.addEvent('success',function(responseTree, responseElements, responseHTML, responseJavaScript)
{
to_update.set('html',responseHTML);
$exec(responseJavaScript);
});
req.send();
el.parentNode.addClass('active');
return false;
});
});
}
Das Seitentemplate muss die go_ajax.js laden! Das fe_seitenlayout.tpl (oder ab Contao 2.10 eben .xhtml) muss so aussehen...
Code:
<?php if(!isset($_GET['request'])): ?>
Dann alle normalen Inhalte eines normalen Seitentemplates...
Im Header noch dieses Script einbauen (muss von den DIVs an das eigene Layout angepasst werden!!! Bei mir werden so 2 DIVs nachgeladen! Aber wenn die Links im Selben DIV liegen der nachgeladen werden soll klappt das nicht --HILFE gerne angenommen)
Code:
<script src="js/go_ajax.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function(e) {
go_ajax(
'#navigation', // ID oder class des/der divs in dem die a tags liegen die aufgerufen werden sollen
'inhaltmain', // id des divs, welcher geupdated werden soll, ohne Raute!
'main' // Angabe der Spalte die man benutzen möchte
);
go_ajax(
'#navigation', // ID oder class des/der divs in dem die a tags liegen die aufgerufen werden sollen
'slider', // id des divs, welcher geupdated werden soll, ohne Raute!
'header' // Angabe der Spalte die man benutzen möchte
);
go_ajax(
'#inhaltmain', // ID oder class des/der divs in dem die a tags liegen die aufgerufen werden sollen
'inhaltmain', // id des divs, welcher geupdated werden soll, ohne Raute!
'main' // Angabe der Spalte die man benutzen möchte
);
});
</script>
Am Ende des Templates diesen Code einfügen
Code:
<?php else: echo $this->$_GET['request']; endif; ?>
<script type="text/javascript">
Cufon.refresh();
Mediabox.scanPage();
</script>
Das Script am Ende bewirkt, dass die Mediabox auch nach dem Nachladen klappt. Dasselbe für Cufon (sofern man es denn eingebaut hat -- sonst entfernen)
Das Ergebnis klappt (zumindest vor Contao 2.10) -- aber eben nicht ganz ohne Probleme. Wie oben erwähnt klappt es nicht wenn die Links im selben DIV liegen, der nachgeladen werden soll (z.B. bei News Liste, Galerie Liste,...). Man kann in de Go_Ajax auch eine Klasse definieren, die die entsprechenen Links vorweisen müssen. Dazu müsste man noch die nav_default ändern!
Diese Vorgehensweise basiert auf einem alten Thread und sollte nach möglichkeit auf einen aktuellen Stand gebracht werden. Ich komme aber grad nicht dazu hier weiterzutesten...
