Mehrere PHP Inhalte mit AJAX nachladen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Mehrere PHP Inhalte mit AJAX nachladen

    Hallo erstmal,

    die ist mein erstes Posting in dem Forum - und genaugenommen habe ich schon seit Jahren nicht mehr in solchen Foren gepostet, da ich mir mein Wissen üblicherweise durch Lesen und Trail&Error-Versuche aneigne. Doch in diesem Fall geht es nicht anders. Ich sitze seit gestern vor einem total bescheuerten Problem, bei dem ich nicht weiterkomme. Es betrifft das dynamische Nachladen von Inhalten.
    Dazu habe ich die beiden Tutorails für "[coderwiki]HowTos/Ajax-Inhalte-mit-PHP-nachladen[/coderwiki]" und "Nachladen mit Select (oder so ähnlich *g*)" zerpflückt.
    Was funktioniert:
    Ich kann die Inhalte durchaus nachladen, das klappt soweit - jedoch kann ich den nachgeladenen Inhalt lediglicher EINER id eines Objektes zuweisen. D.h., dass der nachgeladene Inhalt immer nur an einer Stelle meiner Seite angezeigt wird. Mein Problem ist nun meine kleine große Schwäche in JavaScript. Ich kann zwar nachvollziehen, was ein Script bewirkt, doch kann ich es nicht meinen Bedürfnissen anpassen.

    Genaue Darstellung des Problems:
    Ich lese meine DB aus (Name + id) und lasse die Namen alphabetisch sortiert in jeweils einem DIV ausgeben, welchem ich die id des zum Namen gehörenden Datensatzes zuweise. Durch einen klick auf ein DIV werden nun weitere Daten anhand der id aus der DB ausgelesen und mir danach an einer Position meiner Seite (sagen wir der einfachkeit halber OBEN) ausgegeben.

    Quellcode

    1. function handleResponse() {
    2. if(req.readyState == 4){
    3. document.getElementById('content').innerHTML = req.responseText;
    4. }



    Im Grunde ist das schonmal eine feine Sache. Jedoch möchte ich es bewerkstelligen, dass diese zusätzlich nachgeladenen Informationen jeweils in ein DIV/SPAN/P (or whatever) UNTERHALB des DIVs mit dem Namen erscheint. Ich lasse also gleichzeitig nach der 1. DB-Abfrage mit Ausgabe der Namen in DIVs auch leere DIVs mit der jeweiligen id (in form von id="content15", id="content995", id="content3715" usw.) erstellen. Also das jeweils unter dem Namen befindliche DIV soll bei einem Klick auf den Namen mit dem Inhalt gefüllt werden.
    Mein Hauptproblem ist nun das ansprechen der jeweils leeren DIVs. Wenn ich mir das richtig überlegt habe, müsste ich lediglich im Javascript eine Variable definieren, die aus "content"+digit besteht. Wieso 'digit'? weil mein sendRequest so aussieht:

    Quellcode

    1. function sendRequest(digit) {
    2. try {
    3. req = window.XMLHttpRequest?new XMLHttpRequest():
    4. new ActiveXObject("Microsoft.XMLHTTP");
    5. } catch (e) {
    6. //Kein AJAX Support
    7. }
    8. req.onreadystatechange = handleResponse;
    9. req.open("GET", 'func.php?fid='+ digit);
    10. req.send(null);
    11. }
    Alles anzeigen

    Auf jeden fall bekomme ich die Sache mit dem Erstellen der Variablen einfach nicht auf die Reihe. Ich dachte, ich käme mit

    Quellcode

    1. var nr = "content"+ digit;

    und dem ändern des handleResponses in

    Quellcode

    1. document.getElementById(nr).innerHTML = req.responseText;
    zum Erfolg. Unglücklicherweise ist das nicht der Fall. Also ich habe schon weitaus mehr rumprobiert, aber keiner meiner Ansätze wurde mit Erfolg belohnt. Ich kenne nun aber 1000 Fälle, wie es NICHT funktioniert *g*

    Lange Rede kurzer Sinn: Hat hier jemand vielleicht eine Idee, wie ich mein gewünschtes Ziel erreichen kann?

    Danke im Voraus.

    greetz
    ollo

  • wenn du dem learning by doing prinzip treu bleiben willst, dann bau dir die umgeschriebene handleResponse() Funktion mal ein....

    Quellcode

    1. function handleResponse() {
    2. if ((req.readyState == 4) && (req.status == 200)) {
    3. var write = "";
    4. var update = new Array();
    5. var response = req.responseText;
    6. write += "<h3>Folgender Text wurde empfangen</h3>"+response;
    8. if(response.indexOf('||' != -1)) {
    9. write += "<h3>Der Text enthält mehrere Blöcke</h3>";
    10. update = response.split('||');
    11. for(i=0; i<update.length; i+=2) {
    12. write += "<h3>Befülle Element mit ID \""+update[i]+"\"</h3>"+
    13. "mit folgendem Code<br /><pre>"+update[i+1]+"</pre>";
    14. document.getElementById(update[i]).innerHTML = update[i+1];
    15. }
    16. }
    17. document.getElementById('debugger').innerHTML = write;
    18. }
    19. }
    Alles anzeigen


    und füge deinem Dokuemnt außerdem ein Element mit der ID debugger hinzu

    Quellcode

    1. <div id="debugger"></div>


    Vielleicht wird es dann klarer

  • @donut:
    Danke für Deine Antwort. Ich habe meine handleResponse durch die von Dir gepostete ersetzt und ein P-Element mir der ID 'debugger' der Seite hinzugefügt. Nun kann ich auf meine DIV-Name klicken, wie ich will. Es passiert rein gar nichts.

    Die DIVs sehen bei mir übrigens so aus (ich weiß nicht, ob dir das evtl. weiterhilft)

    Quellcode

    1. echo '<div onClick="sendRequest('.$row->fid.')" style="clear:both; width: 600px; border-color: black; border-style: solid; border-width:0.1em">';
    2. echo '<a href="#t'.$row->fid.'" >'.$row->Filmname.'</a>';
    3. echo '</div>';

    (Der Style steht beabsichtigt nicht in einer CSS)

  • Achso, hab irgendwie überlesen, dass schon der Wiki Code nicht bei dir funktioniert.

    Falls du mit dem Firefox arbeitest (der hat unter Extras eine Fehlerkonsole) wirst du vermutlich feststellen, dass er eine Fehler meldet: ~getElementByID(...) ist Null oder kein Okjekt

    Wenn ein Fehler gefunden wird, läuft auh der "Debugger" nicht weiter.

    Ich tippe auf dieses Problem:
    http://www.easy-coding.de/fehlermeldung-inhalte-mit-ajax-und-php-nachladen-t2194.html#8567

  • Ja, ich benutze in der Tat Firefox. Die Fehlermeldung lautet wie folgt:
    Fehler: document.getElementById(update) has no properties

    Den Link den du gepostet hast, hilft mir nicht wirklich weiter, da ich die func.php komplett umgeschrieben habe. Wie auch schon erwähnt, funktioniert das Auslesen an sich vorzüglich. Nur möchte ich den Nachgeladenen Inhalt in ein Element direkt unterhalb des DIVs mit dem klickbaren Namen anzeigen lassen.
    Und diese Elemente haben keine fortlaufende Numerierung, sondern besitzen die ID mit dem Wert der ID aus der DB.
    Schwierig zu erklären, ich weiß *amkoppkratz*

  • Wenn du alles umgeschrieben hast, dann musst du schon Code posten.
    Das Tutorial funktioniert - aber viele machen eben den Fehler, dass ihnen Leerzeichen unterrutschen.

    Schau mal ob in deiner func.php wirklich kein Leerzeichen um deine HTML ID sind
    ...||htmlid||....


    ansonsten mach noch ein alert(update) um zu erfahren, welche IDs versucht werden zu befüllen.

  • Ich hab in meiner func.php überhaupt gar keine HTML ID *g*. Brauch ich die etwa? *g*
    meine func.php sieht folgendermaßen aus:

    Quellcode

    1. <?
    2. include("dbconnect.php");
    3. $ffid = $HTTP_GET_VARS['fid'];
    4. $query = "SELECT Adresse FROM db WHERE fid='$ffid'";
    5. $ergebnis = mysql_query($query);
    6. while($row = mysql_fetch_object($ergebnis))
    7. {
    8. echo "<br />".$row->Adresse."<br />";
    9. }
    10. ?>

  • öhm.. ja *g*

    wenn du mehrere Felder mit einer AJAX Anfrage befüllen magst, dann brauchst du die.

    Schau mal ins Tutorial:
    Wenn ihr die func.php auf eurem Webserver folgendermaßen mit func.php?s=2 aufruft, dann solltet ihr in etwa folgenden Inhalt sehen
    content2||ist 2 eine 2 eigene 2 die 2 einige 2 mit 2 Ihr 2 Datenbank 2 und 2 herzlichst 2 so 2 den 2 Tagen 2 Upload 2 Wir 2 Beiträge 2 dem 2 soll 2 Anfänger 2 der 2 Gratis-Hoster 2 Willkommen 2 in 2 und 2 Schreibt 2 Tos 2 W


    Wenn du nun mit func.php?s=x aufrufst, sieht die ausgabe so aus:
    content1||ist 1 eine 1 eigene 1 die 1 einige 1 mit 1 Ihr 1 Datenbank 1 und 1 herzlichst 1 so 1 den 1 Tagen 1 Upload 1 Wir 1 Beiträge 1 dem 1 soll 1 Anfänger 1 der 1 Gratis-Hoster 1 Willkommen 1 in 1 und 1 Schreibt 1 Tos 1 W||content2||ist 2 eine 2 eigene 2 die 2 einige 2 mit 2 Ihr 2 Datenbank 2 und 2 herzlichst 2 so 2 den 2 Tagen 2 Upload 2 Wir 2 Beiträge 2 dem 2 soll 2 Anfänger 2 der 2 Gratis-Hoster 2 Willkommen 2 in 2 und 2 Schreibt 2 Tos 2 W||content3||ist 3 eine 3 eigene 3 die 3 einige 3 mit 3 Ihr 3 Datenbank 3 und 3 herzlichst 3 so 3 den 3 Tagen 3 Upload 3 Wir 3 Beiträge 3 dem 3 soll 3 Anfänger 3 der 3 Gratis-Hoster 3 Willkommen 3 in 3 und 3 Schreibt 3 Tos 3 W


    eben "id||inhalt||id||inhalt"