AJAX-Wahnsinn

[ortensirpo]

Wenn ich in Contenido ein blödes HTML-Modultemplate und ein Modul und den ganzen Krempel erstellt habe, warum zum Teufel bekomme ich wenn ich mir

Code: Alles auswählen

alert(xmlhttp.responseText);

die Antwort des PHP-Skripts ausgeben lasse den kompletter Source der Seite noch einmal zurück? Liegt dies am echo "AJAXTEST"; im PHP-Modul?

[xmurrix]

Wenn ich in Contenido ein blödes HTML-Modultemplate und ein Modul und den ganzen Krempel erstellt habe, warum zum Teufel bekomme ich wenn ich mir

Code: Alles auswählen

alert(xmlhttp.responseText);

die Antwort des PHP-Skripts ausgeben lasse den kompletter Source der Seite noch einmal zurück? Liegt dies am echo "AJAXTEST"; im PHP-Modul?

Weil dein Template sehr wahrscheinlich auf ein Layout basiert, das HTML-Code enthält?

Wenn das so ist, kannst das HTML-Layout zum Teufel schicken, und erstellst ein neues Layout ohne HTML-Code mit nur einem Modul-Container, so rein wie ein Engel.

Siehe da, es geschehen Wunder auf Erden

Gruß
xmurrix

[ortensirpo]

So, ich habe jetzt allen HTML-Code aus dem Layout unter Layouts entfernt, anschließend habe ich die Seite bzw. die front_content.php neu geladen, dann wurde nur ein weißer Bildschirm angezeigt.

Ich habe dann unter 'Templates' das Layout von meinem leeren Layout auf Standard gesetzt, irgendwie will mir dass nicht einleuchten?!

Mein Request per AJAX zerschiesst immer noch dass ganze

[xmurrix]

...Ich habe dann unter 'Templates' das Layout von meinem leeren Layout auf Standard gesetzt, irgendwie will mir dass nicht einleuchten?!

Mein Request per AJAX zerschiesst immer noch dass ganze ...

Irgendwo ist da noch der Wurm drin, versuch mal folgendes:

1. Ein neues Layout mit folgendem Code erstellen:

Code: Alles auswählen

<container id="10" name="AJAX" types="Content" mode="optional" default="MyAJAXModul">AJAX</container>

2. Erstelle ein Modul mit der Bezeichnung "MyAJAXModul" und der Modulausgabe:

Code: Alles auswählen

echo 'Foobar';

3. Erstelle ein neues Template "MyAJAXTemplate", das auf das Layout aus 1. basiert und das Modul aus 2. verwendet.

4. Erstelle eine neue Seite unter Content -> Artikel und wähle unter dem Register "Konfiguration" das "MyAJAXTemplate" und speichere die Seite.

Wenn du nun die Seite im Browser aufrufst, sollte nur "Foobar" ausgegeben werden. Das gilt auch dann, wenn ein AJAX-Request auf die Seite stattfindet.

Gruß
xmurrix

[ortensirpo]

Also, danke für den Tipp, aber:

1. Ich will keinen weißen Bildschirm wo ausschließlich mein Modul angezeigt wird, sonder ich will dass es im Content, praktisch als weiteres Contentelement angezeigt wird.

2. Er xmlhttp.responseText beinhaltet nach wie vor den kompletten Source der Seite und nicht nur die Daten die er zurück bekommt. Ich habe den Verdacht dass egal was ich in meiner PHP-Datei mit echo ausgebe, wird automatisch in dass Template (inkl. Modul-Template) gewrapt und ausgegeben. Die Dokumentation, die Suche, Google und dieses Forum habe ich im Übrigen bereits durchsucht.

[ortensirpo]

Das ist hier der Code, des Moduls:

Code: Alles auswählen

// Request wurde gesetzt
if (isset($_POST["quest"]))
{	
		print_r ($_POST);
} else {
		// Das Template ausgeben
    if (!isset($tpl) || !is_object($tpl)) {
        $tpl = new Template();
    }
    
    $tpl->reset();

    $tpl->generate($cfgClient[$client]["path"]["frontend"]."templates/bfw_frontend.html");
}

Und das ist der Code des Modul-Templates:

Code: Alles auswählen

<script type="text/javascript">
function getFromCMS(str)
{
var myUrl = "front_content.php";
var params = "quest="+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.open("POST", myUrl, true);
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState == 4) {
        	alert(xmlhttp.responseText);
            Field.innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.setRequestHeader('Content','application/x-www-urlencoded');

    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>

[xmurrix]

Das macht soweit einen guten Eindruck, ich würde aber das Modul etwas besser kontrollieren. In deinem Fall wird das Template ausgegeben, wenn keinen $_POST["quest"] gibt.

Definiere einfach eine Variable in deinem AJAX-Layout, z. B. ganz am Anfang:

Code: Alles auswählen

<?php $thisIsAAjaxLayout = true; ?>

Im Modulcode kannst dann daraufhin Prüfen:

Code: Alles auswählen

// Request wurde gesetzt 
if (isset($thisIsAAjaxLayout) && isset($_POST["quest"])) 
{    
      print_r ($_POST); 
} elseif (!isset($thisIsAAjaxLayout)) { 
      // Das Template ausgeben 
      ....
}

Den Rest würde ich wie vorhin beschrieben machen, AJAX-Layout, das Modul, ein Template und eine Seite, die das Template mit dem Modul enthält. Nehmen wir an, die Seite hat die Id 50.

In deinem JS-Code muss der Request dann auf die Seite gehen:

Code: Alles auswählen

function getFromCMS(str) 
{ 
var myUrl = "front_content.php"; 
var params = "idart=50&quest="+str; 
...

Das Modul kannst du mehrfach einsetzen. Auf einer Seite mit normalen Layout würde der Modulcode das Template ausgeben, auf der anderen Seite mit dem AJAX-Layout dann die andere Ausgabe...

Gruß
xmurrix

[ortensirpo]

In deinem Fall wird das Template ausgegeben, wenn keinen $_POST["quest"] gibt.

Leider, eben nicht, ich bekomme immer den kompletten Quelltext der Seite zurückgegeben ob die Variable gesetzt ist oder nicht. Der Einzige Unterschied besteht darin, dass er mir wenn $_POST gesetzt ist in dem Quelltext-Haufen noch die Antwort des Servers (echo ) ausgibt.

Die Verzweifelste Lösung wäre wohl mit JavaScript, den HTML-Source herausfiltern?

Was mir gerade noch gekommen ist, könnte es sein, dass dies ein Bug im Contenido ist? Da andere haben dieses Problem wie es scheint nicht und gerade dass macht mich sehr stutzig. Das müsste doch eigentlich ein typischer Anfängerfehler sein?!

[ortensirpo]

Also meine Einschätzung ist die folgende, das Contenido versucht irrtümlich alles was über Ajax in dem PHP-Skript zurückgegeben wird in das Template zu wrappen, also als ganzes wie wenn dies ein synchroner Request wäre zu behandeln. Ansonsten funktioniert dass alles mit der Maske und so wunderbar, nur alles was ich per echo zurückgebe (von AJAX abgefragt), wird durch diesen Template-dingens geschrottet, so langsam setzt die Verzweifelung ein. Das ist doch ein simpler AJAX-Request, da gibt es doch mehrere von in anderen Modulen / Projekten.

[xmurrix]

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

Code: Alles auswählen

var myUrl = "front_content.php?idart=123"; 

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