Banner-Rotation erstellen (Ajax)



Voraussetzungen



* Modul Bannerverwaltung
* [[webedition:embed-frameworks:embed-javascript-frameworks:embed-prototype-javascript-framework|Prototype JavaScript Framework einbinden]]

Das folgende Beispiel zeigt Ihnen, wie Sie eine Banner-Rotation erstellen.

Dabei wird der Banner zunächst direkt in die webEdition-Seite eingebunden. Für die Aktualisierung wird per JavaScript periodisch ein Ajax-Request auf eine dynamische webEdition-Seite durchgeführt. Die Zielseite dieses Ajax-Requests liefert einen neuen Bannercode zurück. Der ursprüngliche Bannercode wird durch diesen neuen Bannercode ersetzt.

Demo



* [[http://documentation-we.webedition.de/200808092019319190/index.html|Online-Demo öffnen]]

Quellcode



<box 100% round blue|Ausschnitt aus der Vorlage index.tmpl - Periodischer Ajax-Request>
<code html>
<!-- Prototype JavaScript framework einbinden -->
<script type="text/javascript" src="/js/prototype.js"></script>

<script type="text/javascript">
// Entfernt alle Kindknoten des angegebenen Knotens aus dem DOM.
function remove_all_child_nodes(id) {
if ($(id).hasChildNodes()) {
while ($(id).hasChildNodes()) {
$(id).removeChild($(id).firstChild);
}
}
}

Event.observe(window, 'load', function() {
// Periodisches (alle 5 Sekunden) Ausführen einer Funktion
new PeriodicalExecuter(function(pe) {
// URL und Optionen für den Ajax-Request definieren
var url = '/banner.php';
// Ajax-Request durchführen
var myAjax = new Ajax.Request(url, {
method: 'post',
onSuccess: function(response) {
// Rückgabewert des Ajax-Requests verarbeiten
result = response.responseText.strip();
result = result.evalJSON();
// Ursprünglichen Bannercode entfernen
remove_all_child_nodes('banner');
// Neuen Bannercode einsetzen
$('banner').innerHTML = result['banner'];
}
});
}, 5);
});
</script>
</code>
</box>

<box 100% round blue|index.tmpl - Vollständige Vorlage für die webEdition-Seite "index.html", von der aus der Ajax-Request gesendet wird>
<code html>
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<we:title></we:title>
<we:description/>
<we:keywords/>
<we:charset defined="UTF-8">UTF-8</we:charset>
<we:ifNotEditmode>
<!-- Prototype JavaScript framework einbinden -->
<script type="text/javascript" src="/js/prototype.js"></script>

<script type="text/javascript">
// Entfernt alle Kindknoten des angegebenen Knotens aus dem DOM.
function remove_all_child_nodes(id) {
if ($(id).hasChildNodes()) {
while ($(id).hasChildNodes()) {
$(id).removeChild($(id).firstChild);
}
}
}

Event.observe(window, 'load', function() {
// Periodisches (alle 5 Sekunden) Ausführen einer Funktion
new PeriodicalExecuter(function(pe) {
// URL und Optionen für den Ajax-Request definieren
var url = '/banner.php';
// Ajax-Request durchführen
var myAjax = new Ajax.Request(url, {
method: 'post',
onSuccess: function(response) {
// Rückgabewert des Ajax-Requests verarbeiten
result = response.responseText.strip();
result = result.evalJSON();
// Ursprünglichen Bannercode entfernen
remove_all_child_nodes('banner');
// Neuen Bannercode einsetzen
$('banner').innerHTML = result['banner'];
}
});
}, 5);
});
</script>

<style type="text/css">
html {
font-family: arial;
font-size: .8em;
color: #000000;
}

a {
color: #000000;
}
</style>
</we:ifNotEditmode>
</head>
<body>

<!-- Dieser Bereich ist nicht in der Dokumentenansicht Bearbeiten sichtbar. -->
<we:ifNotEditmode>
<!-- Der Inhalt dieses DIV-Elements wird periodisch mit Hilfe von JavaScript erneuert. -->
<div id="banner">
<we:banner name="200808092019319190" width="100" height="600" type="cookie" target="_blank" link="true"/>
</div>
</we:ifNotEditmode>

</body>
</html>
</code>
</box>

<box 100% round blue|banner.tmpl - Vorlage für die dynamischen webEdition-Seite "banner.php", die den neuen Bannercode im JSON-Format zurückgibt>
<code html>
<we:ifNotWebEdition><?php header("content-type:application/application/javascript; charset=UTF-8"); ?></we:ifNotWebEdition>
<?php
ob_start();
$arr_result = array();
?>
<we:banner name="200808092019319190" width="100" height="600" type="cookie" target="_blank" link="true"/>
<?php
$str_content = (string) trim(ob_get_contents());
$arr_result['banner'] = (string) $str_content;
ob_end_clean();
echo json_encode($arr_result);
?>
</code>
</box>

Weiterführende Informationen



* [[webedition:embed-frameworks:embed-javascript-frameworks:embed-prototype-javascript-framework|Prototype JavaScript Framework einbinden]]
* [[http://www.prototypejs.org|Webseite des Prototype JavaScript framework Entwicklers]]
powered by webEdition CMS