Javascript Ajax Problem

Monk

Erstmal ein dickes Hallo. Ich wusste nicht, wo ich dieses Thema posten sollte, deshalb entschied ich mich in der Rubrik "Talk im Turm", da die ja bekanntlich am ehesten geeigent ist, wenn man nicht weiss, wohin.

So, nun zu meinem Problem:

Ich bastele aktuell an einer Webseite und habe verschiedene Div-Container, die ich dynamisch mit einem schönen Ajax-Filter ein- und ausblenden kann. Die Funktion selbst ist recht einfach. Initialisiert wird das ganze folgendermaßen:

HTML

<script src="javascripts/prototype.js" type="text/javascript"></script>";<script src="javascripts/scriptaculous.js"type="text/javascript"></script>";<script type="text/javascript" language="javascript">";Effect.toggle('id_of_element', 'appear')";Effect.toggle('id_of_element', 'slide', { delay: 0.5 })";Effect.toggle('id_of_element', 'blind', { duration: 2.0 })";</script>;

Die Links, um die einzelnen Container ein- bzw auszublenden:

HTML

<a  href="#" onclick="Effect.toggle('toggle_appear', 'appear'); return false;">Optionen</a>

Hier kommt mein Problem, der nachfolgende Div-Container wird mittels id mit der obigen Funktion im Link verbunden. Steht also wie oben toggle_appear, erhält der nachfolgende div-Container id="toggle_appear". Dadurch ist gewährleistet, dass jeweils der richtige angesprochen wird. Das Spiel kann man dann endlos in den jeweiligen links fortsetzen: toggle_appear1, toggle_appear2, usw. Die dazu passenden divs lauten dann:

div id="toggle_appear1"
div id="toggle_appear2"
usw.

Das ist erstmal total simpel, wenn man weiss, wie viele divs man einsetzt. In meinem Fall geht es um ein Gästebuch und jeder Eintrag erscheint in einem eigenen Div. Die divs werden also automatisch generiert und mit Inhalten aus einer Datenbank gefühlt.

Wie schaffe ich es jetzt, meiner Seite beizubringen, dass die Endungen 2,3,4,5 hinter toggle-appear dynamisch erzeugt werden?

Grüße
Monk

BJ1

Serverseitige Generierung per PHP?

BJ1

Monk

Wenn ich den div serverseitig generieren lassen, habe ich immer noch das gleiche Problem oder irre ich mich da?:D

zisoft

Zitat von Monk

Ich wusste nicht, wo ich dieses Thema posten sollte, deshalb entschied ich mich in der Rubrik "Talk im Turm", da die ja bekanntlich am ehesten geeigent ist, wenn man nicht weiss, wohin.

Ich glaube, wir haben eine eigene Rubrik "Software-Entwicklung"

--> verschoben.

Zitat von Monk

Die divs werden also automatisch generiert und mit Inhalten aus einer Datenbank gefült.

Irgendwie habe ich das Problem auch noch nicht verstanden. Wenn die DIVs generiert werden, warum versiehst Du sie dabei nicht gleich mit einer ID mit laufender Nr. ?

BJ1

Zitat von Monk

Die divs werden also automatisch generiert und mit Inhalten aus einer Datenbank gefühlt.

Wie schaffe ich es jetzt, meiner Seite beizubringen, dass die Endungen 2,3,4,5 hinter toggle-appear dynamisch erzeugt werden?

Monk

Wenn denn die DIVs automatisch generiert werden, lass' das CSS doch gleich (automatisch/dynamisch) mit generieren?

BJ1

BTW: ein Gästebuch und so ein Aufriss?

BJ1

Zitat von Monk

Wenn ich den div serverseitig generieren lassen, habe ich immer noch das gleiche Problem oder irre ich mich da?:D

Nö, deine (serverseitige) Datenbank weiß doch, wieviele Records (Einträge) vorhanden sind...

Monk

Der div selbst ist fest im Quellcode verankert.

Es gibt nur einen einzigen div, so zu sagen als Schablone für meine Kommentare. Diese Kommenatinhalte kommen aus einer Datenbank. Das ganze soll nachher so ausschauen:

----------------------------------------------------------------
Das ist der Block mit Kommentar 1

-----------------------------------------------------------------
editieren (Hier hat der User die Möglichkeit seinen Kommentar zu editieren)

------------------------------------------------------------------
Kommentar 2

------------------------------------------------------------------
editieren

usw.

Mein Problem ist, dass ich diesen div im Quelltext nur einmal habe, der Rest wird dann dynamisch erzeugt. Gebe ich ihm eine feste ID, so wie sie vom toggle effect der Prototyp-Bibliothek gewünscht wird, dann kann ich zwar auf meine einzelnen editbuttons unter den Kommentaren klicken, aber in jedem erscheinenden Textformular erscheint der Inhalt von Kommentar 1, eben diesem einen div, dem ich die ID zugewiesen habe. Mein Problem ist, ich muss die divs automatisch mit IDs ausstatten, weiss aber nicht, wie ich da vorgehen soll, zumal das ganze ja auch noch mit der ajax function harmonieren muss.

Monk

Zitat von zisoft

Wenn die DIVs generiert werden, warum versiehst Du sie dabei nicht gleich mit einer ID mit laufender Nr. ?

Das würde ich ja gerne, weiss aber nicht wie ich das machen soll.;D

Bin wirklich für jede Hilfe und Beispiel-codes dankbar.

LigH

Wie wird denn "der Rest" erzeugt, und was ist das für ein "Rest"?

Irgendwo muss doch eine Anfrage an die Datenbank geschickt werden: "Liefere mir alle Gästebucheinträge". Heraus kommt ein Ergebnis mit n Datensätzen. Dann muss es irgendwo eine Schleife geben, die für jeden Datensatz i von 1 bis n den Gästebucheintrag aus der Datenbank abholt, und den Inhalt in eine neue Kopie dieses Vorlage-DIV einfügt.

Entweder du hast eine Zählschleife: for(i = 0; i < n; i++) -- dann sollte es möglich sein, jeder neuen Kopie des Vorlage-DIVs eine neue ID zu geben (new_div.id = "toggle_appear"+i), bevor der Inhalt eingefügt wird.

Oder du hast eine flexible Schleife, die so lange arbeitet, wie Datensätze verfügbar sind. Dann initialisierst du vor der Datenbankabfrage eine Variable i = 0; und in der Schleife wird i inkrementiert, bevor die Kopie des Vorlage-DIVs erzeugt wird, um der Kopie danach die neue ID zu verpassen.

Das funktioniert sowohl wenn die IDs inklusive DIV-Kopien per PHP auf dem Server erzeugt werden (dann wird das HTML per "echo" ausgegeben und per AJAX komplett die ganze Ergebnisliste fertig eingefügt), als auch wenn jeder Datensatz per AJAX mit JavaScript einzeln angefordert und per DOM-Zugriff einzeln als DIV-Kopie eingefügt wird (innerHTML).

Tja ... wie läuft das nun bei dir?

Monk

Hi Ligh,

ich hatte ein Brett vor der Rübe. Die Lösung war ganz simpel. Ich schaute in meinen Wordpress-Blog und da kam es mir ... also geistesblitzmässig versteht sich.;-)

Alle meine Beiträge werden mit folgender Variable gespeichert:

PHP

$post[0]

Und genau das habe ich nun als ID vergeben.

HTML

<div id="$post[0]">dynamischer Inhalt</div>

Jetzt funktioniert es. Es war so simpel und ich hänge da 4 Stunden fest. grusel. Egal, jetzt kann ich beruhigt schlafen. Trotzdem nochmal vielen Dank für Eure Unterstützung.

Grüße
Monk

LigH

Hmm, na ich weiß nicht... das sieht mir hier doch etwas wie PHP und HTML kreuz und quer gemischt und abgekürzt aus. Versuche auf jeden Fall dafür zu sorgen, dass eine HTML-Element-ID auch ordentlich formatiert ist und wie eine gültige ID aufgebaut ist: Nur ASCII7-Buchstaben und evtl. Unterstrich, ab der 2. Stelle auch Ziffern. Ansonsten wirst du Probleme kriegen, das Element im DOM anzusprechen.

Monk

Die Seite ist eigentlich ein php-Dokument. Es sieht also jetzt so aus:

PHP

echo "<a  href=\"#\" onclick=\"Effect.toggle('$post[0]', 'appear'); return false;\">Optionen</a>";
echo "<div id=\"$post[0]\" style=\"display:none; width:720px;border-style:none;margin-bottom:10px;background:#f3f3f3\">";
echo "<div class=\"kommentare\"></div</div>";

Funktioniert auf jeden Fall super. Habe es mit IE, Firefox, Opera und Webkit getestet.

Jetzt mitmachen!