Mach mal folgendes:
1. Layout "layAJAXTest" erstellen
Code: Alles auswählen
<html>
<head>
<title>test</title>
</head>
<body>
<container id="10" name="Inhalt" types="Content" mode="optional" default="">Content 1</container>
</body>
</html>
und ein Layout "layAJAXTestAusgabe" erstellen
Code: Alles auswählen
<?php $thisIsAAjaxLayout = true; ?>
<container id="10" name="Inhalt" types="Content" mode="optional" default="">Content 1</container>
2. Modul "modAJAX" erstellen
Code: Alles auswählen
<?php
// Request wurde gesetzt
if (isset($thisIsAAjaxLayout) && isset($_POST["quest"]))
{
print_r ($_POST);
} elseif (!isset($thisIsAAjaxLayout)) {
echo <<<HTML
<script type="text/javascript">
function getFromCMS(str)
{
var myUrl = "front_content.php?idart=123";
var params = "quest=" + encodeURI(str);
var myField = "bfwsuchfeld";
var Field = document.getElementById(myField); // selects the given element
try {
if(window.XMLHttpRequest) {
// Gecko (Firefox, Moz), KHTML (Konqueror, Safari), Opera, Internet Explorer 7
xmlhttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer 4,5,5.5,6
}
} catch(e) {
return false;
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4) {
alert(xmlhttp.responseText);
Field.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", myUrl, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
<div id="bfw-form">
<fieldset>
<legend>Bitte wählen Sie die Branche aus</legend>
<p>
<label for="felderwahl">Bitte wählen Sie das Suchfeld aus:</label>
<select name="felderwahl" size="1" onchange="getFromCMS(this.value)">
<option value="standort">Standort</option>
<option value="branche">Branche</option>
<option value="beruf">Beruf</option>
<option value="berufe_dauer">Ausbildungsdauer</option>
<option value="abschluss">Ausbildungsqualifikation</option>
<option value="hilfen">besondere Hilfen</option>
</select>
</p>
</fieldset>
<div id="bfwsuchfeld"></div>
</div>
HTML;
}
?>
Da du die Daten per POST schickst, muss eine andere Request-Header an den Server geschickt werden, habe den Code korrigiert.
Wichtig:
In der Zeile
ist die Artikelid des Artikels "artAJAXTestAusgabe" (siehe 4.) anzugeben.
3. Erstelle ein Template "tplAJAXTest", das auf das Layout "layAJAXTest" basiert und das Modul "modAJAX" verwendet.
Danach ein Template "tplAJAXTestAusgabe", das auf das Layout "layAJAXTestAusgabe" basiert und auch das Modul "modAJAX" verwendet.
4. Erstelle eine Seite "artAJAXTest", wähle in der Artikelkonfiguration "tplAJAXTest" als Template aus.
Und erstelle eine Seite "artAJAXTestAusgabe", wähle in der Artikelkonfiguration "tplAJAXTestAusgabe" als Template aus.
Die Id des Artikels mit dem Namen "artAJAXTestAusgabe" musst du im Modulcode angeben.
Wenn du die Seite "artAJAXTest" im Browser aufrufst, sollte dort die Selectbox mit dem JS-Code erscheinen. Dort kannst du dann auf der Selectbox deine Auswahl treffen, die dann per POST an die Seite "artAJAXTestAusgabe" geht.
Der AJAX Request geht auf die Seite "artAJAXTestAusgabe", da diese Seite das Template "tplAJAXTestAusgabe" verwendet und das Template auf das Layout "layAJAXTestAusgabe" basiert, das kein HTML-Code enthält, sollte die Ausgabe das im Modulcode in der Bedingung angegebene print_r ($_POST); sein, mehrt nicht.
Die Ausgabe der Selectbox und die Ausgabe der Antwort auf das AJAX-Request kann nicht von der gleichen Seite (Artikel) behandelt werden. Es sind zwei separate Seiten die im Endeffekt auf zwei verschiedene Layouts basieren.
Gruß
xmurrix