Div-Inhalt mittels AJAX aus einer MySQL-DB laden und anzeigen lassen

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

  • Div-Inhalt mittels AJAX aus einer MySQL-DB laden und anzeigen lassen

    Hallo erstmal!

    Und "Entschuldigung" gleich hinterher, da meine Frage bestimmt sehr anfängerhaft ist.

    Es geht um folgendes:
    Ich habe eine MySQL-Tabelle mit ein paar Einträgen (jeder Eintrag beschreibt ein bestimmtes Bild das auf dem Server abgespeichert ist. In der Tabelle steht für jedes Bild der Titel, client, enstehungsdatum, macher, der link zum Bild etc..)
    Auf meiner Homepage soll links eine Liste mit den Titeln aller Bilder zu sehen sein. Klickt man auf einen der Links wird in einem Div-Container rechts das Bild sowie alle weiteren Daten des Bildes angezeigt. Der Clou dabei ist, dass die Seite nicht neugeladen werden soll, desshalb AJAX und das der Container sich an die Maße des Bildes anpasst. Der letzte teil mit dem anpassen an das Bild funktionert schon (habs mit vorgegebenen werten ausprobiert).

    Und jetzt ganz einfache Frage:
    Wie stelle ich das an?

    Soweit bin ich:
    Da der ganze Div-Container aktualisiert werden muss, denke ich, ist es besser wenn die query sowie die berechnung und ertstellung des containers samt inhalt in einer externen datei gemacht wird. Dann wird der gesamte Block zurück an die Ursprungsdatei geschickt wo es gegen den alten div-container ersetzt wird. So lautet zumindest mein Denkansatz.

    In der Liste links brauch ich nur den Title des Bildes und die ID. Wenn auf den Titel geklickt wird, schickt AJAX die ID an die externe Datei. Dort wird mittels der ID die query ausgeführt, mittels welcher die restlichen Daten des Bilder geladen werden (autor, jahr, client, höhe, breite, etc). Dann wird dort noch das Div samt inhalt komplett ausdefiniert und der ganze Block wird zurück ans AJAX geschickt. Dann ersetzt AJAX den momentanen Div-Container mit dem neuen, und das alles ohne das ne neue Seite geladen wird.

    So, den Ajax-teil kann ich net. Die query und die Div-Erstellung krieg ich hin (also den MySQL und PHP Part).
    Könnte mir jemand von euch mit dem Javascript-teil helfen?
    Ich wäre sehr dankbar!

    Anti-Depressiva
  • Danke

    ich mach's mal genauer:

    Dieses Ajax-Tutorial verstehe und beherrsche ich:

    blog.coderlab.us/rasmus-30-second-ajax-tutorial/

    Das ist ja schon fast das, was ich haben will nur, dass bei mir nicht nur der string "foo done" in den div "foo" kommen soll, sondern der ganze div-container "foo" ersetzt werden soll.

    Oder anders gefragt: wie schaffe ichs dass in update[1] nicht nur "foo done" sondern " <div id="foo"><div id="nochmehrdivs>inahlt</div></div> " gespeichert wird, als string, ohne die sonderzeichen zu interpretieren...
    Das mal einfach als beispiel für mein problem...
  • Anti-Depressiva schrieb:

    wie schaffe ichs dass in update[1] nicht nur "foo done" sondern " <div id="foo"><div id="nochmehrdivs>inahlt</div></div> " gespeichert wird, als string, ohne die sonderzeichen zu interpretieren...

    Also auf Serverseite gibtst du <div id="nochmehrdivs>inahlt</div> zurück... und einfügen tust du das clienseitig in <div id="foo"></div>

    Und jetzt willst du aber dass der HTML Code nicht interpretiert wird?
    Dann würde ich die die Klammern durch &lt; und &gt; ersetzen.

    Im Endeffekt wäre das Resultat so:
    <div id="foo">&lt;div id="nochmehrdivs&gt;inahlt&lt;/div&gt;</div>