jQuery: Daten in zwei iframes unterschiedlich nutzen

[jQuietsch]

'n Abend zusammen!

als geübter HTML und CSS-Amateur möchte ich gerne die Vorteile von JavaScript bzw. jQuery nutzen, um elegant dynamische Seiten auf Grundlage einer CSV-Datei zu generieren. Meine JavaScript-Kenntnisse sind eher marginal, daher hier meine Bitte um Unterstützung. Der folgende Text ist als Überblick und Zusammenfassung entstanden und hilft hoffentlich meine Idee nachzuvoll ziehen. Allein für's Lesen schon herzlichen Dank!

Datenabfrage per HTML und jQuery

Die Daten

Bei den Daten handelt es sich Texte, die in einer Word-Tabelle angeordnet waren und per VBA in eine CSV-Datei geschrieben wurden. Das Format verwendet Spaltenüberschriften, die Datensätze haben pro Datenfeld variable Längen, ein Teil enthält <p> als HTML-Format bzw. <img src=“…“> und <a href=“…“>. Die Datensätze sind in der ersten Spalte durch eindeutige IDs gekennzeichnet. Die Datenfelder müssen durch Semikolon getrennt sein, da die Texte den sonst üblichen Delimiter Komma enthalten.

Die Ausgabe als Liste und im Detail

Die HTML-Seite ist in zwei iFrames aufgeteilt, in denen links eine Liste der Datensätze („navi“), sortiert nach einem Wert in Spalte 2, anschließend aufsteigend alphabetisch nach dem Wert in Spalte 3 in eine Linkliste umwandelt. Im rechten Frame („cont“) soll dann entsprechend formatiert der gesamte Datensatz mit ggf. Bildern angezeigt werden.

Beispieldarstellung

Die CSV-Datei

ID;Kategorie;Bezeichnung;Detail_1;Detail_2;Bild #001;A;Erster Artikel;Erster Detail-Text<p>Zweiter Absatz;Zweiter Detail-Text;Erstes_Bild.jpg #002;B;Zweiter Artikel;Erster Detail-Text<p>Zweiter Absatz;Zweiter Detail-Text;Zweites_Bild.jpg #003;A;Dritter Artikel;Erster Detail-Text<p>Zweiter Absatz;Zweiter Detail-Text;Drittes_Bild.jpg #004;C;Ausnahme-Artikel;Erster Detail-Text<p>Zweiter Absatz;Zweiter Detail-Text;Ausnahme_Bild.jpg

Darstellung als Liste und im Detail

iFrame 1 Erster Artikel

Dritter Artikel

Zweiter Artikel Ausnahme-Artikel Zweiter Artikel (Kategorie B)

iFrame 2 Erster Detail-Text

Zweiter Absatz

Zweiter Detail-Text

Der Aufruf der Seite

• Im iFrame navi werden die Daten aus Spalte 3 / Bezeichnung alphabetisch aufgeführt, in cont erscheint ein einleitender Text.

• Hinter jeder Zeile in navi wird ein Link generiert der bei Anklicken cont mit den Details des Datensatzes füllt. Hier soll eine HMTL/jQuery-Seite entsprechend der Filter-Bedingung ID (im Beispiel oben also #003) gefüllt und dem Wert der Spalte 2 das Wort Kategorie vorangestellt werden.

Beim Einlesen der Daten nach navi müssen dort also Links generiert werden, die die ID der einzelnen Datensätze in eine Variable der cont-HTML-Seite übergibt.

Eine meiner Fantasien dazu ist, mit dem Klick auf einen Link eine txt-Datei mit der ID (Cookie) zu füllen, aus der dann beim Laden von cont die Filtervariable geholt wird und der Keks einen Standardwert für die Einleitung erhält. Aber wahrscheinlich gibt es eine viel einfachere und elegantere Lösung.

Dankeschön jQuietsch