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

[Matthias Apsel]

Hallo jQuietsch,

Die HTML-Seite ist in zwei iFrames aufgeteilt,

Das ist schlecht (http://www.subotnik.net/html/frames.html).

in denen links eine Liste der Datensätze („navi“),

Das nav-Element existiert.

Im rechten Frame („cont“) soll dann entsprechend formatiert der gesamte Datensatz mit ggf. Bildern angezeigt werden.

Das main-Element ebenso.

Bis demnächst
Matthias

[jQuietsch]

Hallo Matthias,

Dein Link verweist auf eine alte Diskussion, die m.E. mit HTML5 und iframes (die ich benutze) obsolet ist. Und selbst wenn ich noch Frames nutzen würde, dem jQuery-Thema näher bringt mich Dein Beitrag nicht.

Gruß jQ...h

[Matthias Apsel]

Hallo jQuietsch,

Dein Link verweist auf eine alte Diskussion, die m.E. mit HTML5 und iframes (die ich benutze) obsolet ist.

Nein. Ein Großteil der beschriebenen Probleme besteht ob mit oder ohne I.

Und selbst wenn ich noch Frames nutzen würde, dem jQuery-Thema näher bringt mich Dein Beitrag nicht.

Alles, was du in den beiden Frames machen möchtest, kannst du auch in nav und main tun. In einer Seite (https://wiki.selfhtml.org/wiki/JavaScript/XMLHttpRequest).

Bis demnächst
Matthias

[jQuietsch]

Zur besseren Darstellung des gewünschten Ergebnisses hier ein Screenshot:

Gruß jQ...h

[JürgenB]

Hallo,

warum Iframes? Warum jquery?

Links ein nav, rechts z.B. ein main, für das Holen der Daten XMLHttpRequest bzw. fetch, und dann noch ein paar Stringfunktionen um die csv-Daten zu zerlegen. Und wenn du schon mal im Wiki bist, solltest du hier deine Javascriptkenntnisse auch noch etwas auffrischen.

Gruß
Jürgen

[jQuietsch]

Hallo Jürgen,

gerne versuche ich Alternativen zu meiner Idee zu erlernen und werde mir Deine Vorschläge (Lieben Dank!) auch genauer anschauen. Schließlich hatte ich nach "eleganteren" Lösungen gefragt.

Allerdings: "auffrischen" kann man nur, was man schon mal erlernt hat, und da ist bei mir eben noch nichts...

Gruß jQ...h

[Rolf B]

Hallo jQuietsch,

rein technisch kannst Du einen iframe als Container benutzen. Du kannst ihn ohne src Attribut auf deine Seite setzen, und dann am contentDocument herumfummeln. Oder Du setzt ihn mit src-Attribut auf deine Seite und lädst ein Basis-Dokument vom gleichen Server (sonst gibt's cross-domain Blockaden vom Browser). Das Basis-Dokument kann dann schon mal die nötigen Styles mitbringen. Es kann auch JavaScript mitbringen, du kannst aus dem Rahmendokument Eventlistener auf Links oder Buttons im Child-Dokument setzen.

Die Frage ist nur, warum? Ein iframe ist meines Wissens zum Einbinden fremder Inhalte gedacht, aber deine Inhalte sind nicht fremd. Du kannst also statt des iframe genauso gut Boxen im Document deiner Hauptseite verwenden. Eben <nav> für die Navigation (wenn es denn eine Navigation ist) und <main> für den Hauptinhalt.

Die nächste Frage, die Du Dir stellen solltest, ist: Was passiert, wenn JavaScript abgeschaltet ist. In deinem Konzept wäre die Seite dann funktionslos. Abgesehen davon führt der Google Bot kein Script aus. D.h. eine Inhalte würden nicht indiziert.

Eine gute und suchmaschinenfreundlichere Seite, sagen wir "artikel.php", würde die Artikelliste auf dem Server erzeugen und alle Einträge darin als Links ausgeben. Jeder dieser Links würde auf Adressen wie artikel.php?nr=003 zeigen, und die Serverseite würde beim Aufruf einer solchen Adresse die Details zum Artikel #003 ins Detailfenster eintragen. Mit iframes wäre das viel schwieriger zu lösen.

Wenn Du kein PHP am Server verwenden kannst oder willst, dann kannst Du auch für jede Detailansicht eine eigene HTML Seite erzeugen und über rewrites in der Serverkonfiguration (Apache: siehe mod_rewrite) dafür sorgen, dass der Aufruf von artikel.html?nr=003 zur Anzeige von artikel_003.html führt. Du kannst statt dessen auch Server Side Includes verwenden (falls dein Hoster das unterstützt), um je nach Artikelnummer ein passendes Detailfragment zu includieren.

Wenn JavaScript eingeschaltet ist, fängt es die click-Events auf diese Links ab, erzeugt die Detailansicht, verhindert die Browserreaktion auf den Klick (preventDefault) und ändert die URL in die Browser-History (window.history.pushState). Über das popstate Event kann das Script auch die Back und Forward Buttons des Browsers behandeln und in Ajax-Calls für die Details umwandeln. Das ist alles nicht ganz trivial und wird durch jQuery nur unwesentlich einfacher. Es gibt andere JS-Libraries, die hier mehr Support bieten (die ich persönlich nicht nutze; aber ich meine, Angular und React können das. Im einfachsten Fall: Sammy.js). Diese Frameworks sind aber meiner Meinung nach nichts für JS-Einsteiger; sämtliche Tutorials dafür würden Dich überfordern.

Das HTML in deinem CSV ist übrigens nicht in Ordnung: Zu einem <p> gehört immer auch ein </p>. Der Browser denkt sich ein fehlendes </p> zwar auch gerne mal hinzu, aber darauf sollte man sich nicht verlassen.

Viele diese Überlegungen stehen und fallen mit dem Einsatzzweck und dem Hosting der Seite. Ist das eine Internetseite? Intranet? Von einem Webserver geladen (welcher?) oder persönlich für Dich aus file:///? Welche serverseitigen aktiven Komponenten (PHP, SSI) sind verfügbar und werden von Dir verstanden?

Rolf

[JürgenB]

Hallo Rolf,

Abgesehen davon führt der Google Bot kein Script aus. D.h. eine Inhalte würden nicht indiziert.

da wäre ich mir nicht so sicher. Eins meiner Scripte, das sich einer gewissen Beliebtheit erfreut, baut als Copyright per Javascript einen Link auf meine Seite ein. In der Search Console von Google sehe ich "wahnsinnig viele" Links auf meine Seite mit dem entsprechenden Linktext. Daher muss Google auf diesen Seiten das Script ausführen.

Gruß
Jürgen

[Mitleser]

Abgesehen davon führt der Google Bot kein Script aus. D.h. eine Inhalte würden nicht indiziert. da wäre ich mir nicht so sicher. Eins meiner Scripte, das sich einer gewissen Beliebtheit erfreut, baut als Copyright per Javascript einen Link auf meine Seite ein. In der Search Console von Google sehe ich "wahnsinnig viele" Links auf meine Seite mit dem entsprechenden Linktext. Daher muss Google auf diesen Seiten das Script ausführen.

Korrekt. Die Information, der Google-Bot würde kein JavaScript ausführen, ist schon seit vielen Jahren nicht mehr korrekt.

[pl]

Abgesehen davon führt der Google Bot kein Script aus. D.h. eine Inhalte würden nicht indiziert. da wäre ich mir nicht so sicher. Eins meiner Scripte, das sich einer gewissen Beliebtheit erfreut, baut als Copyright per Javascript einen Link auf meine Seite ein. In der Search Console von Google sehe ich "wahnsinnig viele" Links auf meine Seite mit dem entsprechenden Linktext. Daher muss Google auf diesen Seiten das Script ausführen.

Korrekt. Die Information, der Google-Bot würde kein JavaScript ausführen, ist schon seit vielen Jahren nicht mehr korrekt.

So isses. Googlebot macht auch vor keiner Requestmethode halt. Also von wegen kein POST oder PUT. MFG

[dedlfix]

Tach!

Googlebot macht auch vor keiner Requestmethode halt. Also von wegen kein POST oder PUT.

Die Aussage ist wohl so nicht ganz richtig. Der Bot startet zwar auch POST-Requests, jedoch nicht wahllos. Jener Blog-Post ist zwar schon älter, aber aktuelle Aussagen dazu habe ich nicht gefunden.

dedlfix.

[jQuietsch]

Hallo allerseits und besonders Rolf!

Erst einmal sorry für meine späte Rückmeldung, ich war unterwegs und bin da aus Prinzip nur passiv online.

Viele diese Überlegungen stehen und fallen mit dem Einsatzzweck und dem Hosting der Seite

Nach einem langen und sehr aufschlussreichen Text eine sehr gute Frage: Um die Umgebungsbedingungen einfach zu charakterisieren: Nur Intranet, JavaScript aktiviert, Cookies erlaubt, Gockel und Robs muüssen nicht gefüttert werden, als Browser FF, der auch offene HTML-Tags versteht (wobei der Hinweis natürlich seine Richtigkeit hat).

Ohne mich damit auszukennen erscheint mir Mustache als Alternative zu jQuery. Mir geht es hier so eine bisschen wie mit den vorgeschlagenen XMLRequests: Als Amateur wieder bei Null anzufangen. Mit jQuery habe ich es immerhin geschafft, mir die Daten einer CSV in ein HTML-Dokument zu holen.

Eine entsprechende Beispieldatei liefere ich nach einer kurzen REM-Phase morgen nach.

VIELEN DANK! jQ...h

[Matthias Apsel]

Hallo jQuietsch,

Zu einem <p> gehört immer auch ein </p>.

der auch offene HTML-Tags versteht (wobei der Hinweis natürlich seine Richtigkeit hat).

Beachte den Unterschied zwischen Tag und Element.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Beachte den Unterschied zwischen Tag und Element.

Das ist ein Unterschied wie zwischen Tag und Nacht.

LLAP 🖖

[JürgenB]

Hallo,

Mit jQuery habe ich es immerhin geschafft, mir die Daten einer CSV in ein HTML-Dokument zu holen.

jQuery ist eine Javascript-Bibliothek. jQuery ohne Javascriptgrundkenntnisse ist wie Tauchen ohne Schwimmen zu können.

Gruß
Jürgen

[dedlfix]

Tach!

jQuery ist eine Javascript-Bibliothek. jQuery ohne Javascriptgrundkenntnisse ist wie Tauchen ohne Schwimmen zu können.

Dass Schwimmen können sinnvoll ist, bezweifle ich nicht. Aber beim Tauchen nützen einem beispielsweise die Kenntnisse im Brustschwimmen nicht viel. Dieser Schwimmstil ist beim Tauchen eher hinderlich als nützlich. Nicht alles was schwimmt ist ein Fisch. 😉

dedlfix.

[pl]

Aber beim Tauchen nützen einem beispielsweise die Kenntnisse im Brustschwimmen nicht viel. Dieser Schwimmstil ist beim Tauchen eher hinderlich als nützlich.

Stimmt. Mit Kraulen kommt man auch beim Tauchen viel besser vorwärts 😉

[Gunnar Bittersmann]

@@JürgenB

jQuery ist eine Javascript-Bibliothek. jQuery ohne Javascriptgrundkenntnisse ist wie Tauchen ohne Schwimmen zu können.

Der Fisch hinkt.

Tauchen ist sinnvoll.

LLAP 🖖

[JürgenB]

Hallo Gunnar und dedlfix,

solange Luft in der Flasche und das Ufer und Helfer in der Nähe sind, ist Tauchen ganz lustig, aber wehe, es geht einem die Luft aus und weit und breit kein Ufer und kein Helfer.

Hier schlagen immer wieder Fragende auf, die mit jquery die tollsten Sachen hinbekommen, aber am if scheitern.

Gruß
Jürgen

[dedlfix]

Tach!

solange Luft in der Flasche und das Ufer und Helfer in der Nähe sind, ist Tauchen ganz lustig, aber wehe, es geht einem die Luft aus und weit und breit kein Ufer und kein Helfer.

Verantwortungsvolle Taucher gehen zum einen nicht allein ins Wasser, und schauen auch darauf, dass man den Rückweg spätestens antritt, wenn die Flasche noch halbvoll ist. (Und ja, ich meine hier Gerätetauchen und nicht nur Schwimmen unter Wasser mit Luft anhalten.) Tauchen lernt man in der Regel per Ausbildung und mit Zertifizierung. Aber lassen wir das mal und gehen wieder zu Javascript/jQuery.

Programmieren heißt üblicherweise vor allem, die Grundlagen der Sprache zu kennen, also deren Syntax und Schlüsselwörter. Der Teil ist recht klein und geht auch schnell zu lernen, wenn man bereits grundlegende Kenntnisse im Programmieren hat. Da man damit aber noch nicht sehr weit kommt, gibt es in vielen Systemen noch eine Standardbibliothek für Aufgabenstellungen allgemeiner Art, wie Stringverarbeitung. Auch das muss man nicht bis ins kleinste Detail kennen, um Anwendungen schreiben zu können. Wenn es davon mehrere Ausführungen gibt, reicht im Prinzip auch, wenn man mit einer umgehen kann. Weiterhin gibt es oft noch spezialisierte Bibliotheken. Im Webumfeld ist das zum Beispiel der Teil für das Arbeiten mit dem DOM. Wenn sich nun ein System anschickt, dieses Arbeiten auf andere Weise zu lösen, dann kann man auch glücklich werden, wenn man nur dieses System kennt. Man kann mit jQuery (plus grundlegendes Javascript) Anwendungen schreiben, ohne zu wissen, dass es document.addEventListener() oder document.querySelector() gibt.

Je nachdem, wie man "Meine JavaScript-Kenntnisse sind eher marginal" wertet (kann ja auch bescheiden tiefgestapelt sein), kann es also bereits reichen, um mit jQuery erfolgreich zu werden. Viel wichtiger sehe ich, allgemeine Kenntnisse der Vorgänge im Browser, von HTML-Elementen, vom DOM, von Events, und so weiter zu haben, damit man weiß, was man wie manipulieren muss, um zum Ziel zu kommen. Ob man das dann mit den Funktionen und der Syntax von jQuery oder von Vanilla-Javascript macht, ist für mich nebensächlich.

Natürlich gibt es noch weitere Kriterien, die den generellen Einsatz von jQuery oder anderen Tools für bestimmte Anwendungsfälle unterschiedlich bewerten. Aber das ist ein anderes Thema.

dedlfix.

[Gunnar Bittersmann]

@@JürgenB

Hier schlagen immer wieder Fragende auf, die mit jquery die tollsten Sachen hinbekommen, aber am if scheitern.

Dabei ist das doch ganz einfach:

if (typeof $ != 'undefined')
{
	throw 'Learn JavaScript!';
}

LLAP 🖖

[pl]

Keine große Sache. Da erstellst Du ein Template, holst die Daten per AJAX/JSON und renderst damit das Template (z.B. Mustache). MFG

[JürgenB]

Hallo pl,

ein Autofahrer hat sich verfahren und fragt einen Fußgänger, wo er sich denn gerade befindet. Der Fußgänger grübelt eine Zeit lang angestrengt mit finsterer Mine, dann hellen sich seine Gesichtszüge auf, und er verkündet mit strahlendem Gesichtsausdruck seine Antwort: „Sie befinden sich in einem Auto“.

Gruß
Jürgen

[Tabellenkalk]

Hallo,

Autofahrer

Fußgänger

Du hast vergessen zu erwähnen, wer von den beiden Bart trägt…

Gruß
Kalk

[pl]

Keine große Sache. Da erstellst Du ein Template, holst die Daten per AJAX/JSON und renderst damit das Template (z.B. Mustache). MFG

Ergänzung, Templates für Mustache möchten folgende Datenstruktur, ein Array mit Objekten:

[
  {"ID":"123", "Kategorie":"Spiel" /*usw*/},
  {"ID":"456", "Kategorie":"Spaß" /*usw*/}
]

das kannst Du also als JSON senden in einer AJAX Response. Dazu muss Deine CSV Datei serverseitig aufgearbeitet werden, also aus CSV mach JSON.

Wie die Templates aussehen müssen beschreibt Mustache, siehe ebenda. Mit diesen Stichworten ist alles zu finden was dazugehört. Für eine Tabelle ist das Template im Prinzip nur eine Zeile, den Rest erledigt Mustache. MFG

[pl]

Untenstehend ein Beispielcode. Die Daten werden als CSV per AJAX vom Server geladen. Im AJAX Callback wird das Array für Mustache erstellt. Und mit diesem Array wird dann das Template gerendert:

<script src="/jquery.min.js"></script>
<script src="/mustache.js"></script>

<script type="text/template" id="tt">
<table class="grid" style="width:100%">
    <tr style="text-align:left">
        <th>WKR_NR</th>
        <th>WKR_NAME</th>
        <th>LAND_NR</th>
        <th>LAND_NAME</th>
        <th>LAND_ABK</th>
    </tr>
    {{#loop}}
    <tr>
        <td>{{& WKR_NR}}</td>
        <td>{{& WKR_NAME}}</td>
        <td>{{& LAND_NR}}</td>
        <td>{{& LAND_NAME}}</td>
        <td>{{& LAND_ABK}}</td>
    </tr>
    {{/loop}}
</table>
</script>

<div id="out"></div>


<script>
function load_csv(){
    var xhr = new XMLHttpRequest();
    xhr.open("GET","/wahlkreise.csv");
    xhr.onload = function(){
        var lines = this.response.split("\n");
        var headlines = lines.shift();
        var cols = headlines.split(";");
        //console.log(cols); // WKR_NR WKR_NAME LAND_NR LAND_NAME LAND_ABK
        var wahlkreise = [];
        while( lines.length ){
            var line = lines.shift();
            var values = line.split(";");
            var wk = {};
            for(var i = 0; i < cols.length; i++){
                wk[cols[i]] = values[i];
            }
            wahlkreise.push(wk);
        }

        $('#out').html( Mustache.render($('#tt').text(), {loop:wahlkreise}) );
    };
    xhr.send();
}

load_csv();

</script>

Das Ergebnis ist eine Tabelle, siehe Template. MFG

[pl]

Keine große Sache. Da erstellst Du ein Template, holst die Daten per AJAX/JSON und renderst damit das Template (z.B. Mustache). MFG

Artikel+Demo