tag:forum.selfhtml.org,2005:/selfjQuery: Daten in zwei iframes unterschiedlich nutzen – SELFHTML-Forum2019-05-16T15:14:34Zhttps://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748728#m1748728jQuietsch2019-05-14T18:07:01Z2019-05-14T18:17:36ZjQuery: Daten in zwei iframes unterschiedlich nutzen<p>'n Abend zusammen!</p>
<p>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!</p>
<p><strong>Datenabfrage per HTML und jQuery</strong></p>
<p><strong>Die Daten</strong></p>
<p>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.</p>
<p><strong>Die Ausgabe als Liste und im Detail</strong></p>
<p>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.</p>
<p><strong>Beispieldarstellung</strong></p>
<p><strong>Die CSV-Datei</strong></p>
<p>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</p>
<p><strong>Darstellung als Liste und im Detail</strong></p>
<p><strong>iFrame 1</strong>
Erster Artikel</p>
<p>Dritter Artikel</p>
<p>Zweiter Artikel
Ausnahme-Artikel Zweiter Artikel (Kategorie B)</p>
<p><strong>iFrame 2</strong>
Erster Detail-Text</p>
<p>Zweiter Absatz</p>
<p>Zweiter Detail-Text</p>
<p><strong>Der Aufruf der Seite</strong></p>
<p>• Im iFrame navi werden die Daten aus Spalte 3 / Bezeichnung alphabetisch aufgeführt, in cont erscheint ein einleitender Text.</p>
<p>• 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.</p>
<p>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.</p>
<p>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.</p>
<p>Dankeschön
jQuietsch</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748729#m1748729Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2019-05-14T18:30:04Z2019-05-14T18:30:04ZjQuery: Daten in zwei iframes unterschiedlich nutzen<p>Hallo jQuietsch,</p>
<blockquote>
<p>Die HTML-Seite ist in zwei iFrames aufgeteilt,</p>
</blockquote>
<p>Das ist schlecht (<a href="http://www.subotnik.net/html/frames.html" rel="nofollow noopener noreferrer">http://www.subotnik.net/html/frames.html</a>).</p>
<blockquote>
<p>in denen links eine Liste der Datensätze („navi“),</p>
</blockquote>
<p>Das <code>nav</code>-Element existiert.</p>
<blockquote>
<p>Im rechten Frame („cont“) soll dann entsprechend formatiert der gesamte Datensatz mit ggf. Bildern angezeigt werden.</p>
</blockquote>
<p>Das <code>main</code>-Element ebenso.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Pantoffeltierchen haben keine Hobbys.<br>
¯\_(ツ)_/¯
</div>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748732#m1748732jQuietsch2019-05-14T19:02:08Z2019-05-14T19:02:08ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<p>Zur besseren Darstellung des gewünschten Ergebnisses hier ein Screenshot:</p>
<p><a href="/images/f3174591-5dde-4d84-a54c-14e8045bb409.jpg" rel="noopener noreferrer"><img src="/images/f3174591-5dde-4d84-a54c-14e8045bb409.jpg?size=medium" alt="Screenshot" title="Screenshot" loading="lazy"></a></p>
<p>Gruß jQ...h</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748742#m1748742pl2019-05-15T06:28:18Z2019-05-15T06:28:18ZjQuery: Daten in zwei iframes unterschiedlich nutzen<p>Keine große Sache. Da erstellst Du ein Template, holst die Daten per AJAX/JSON und renderst damit das Template (z.B. Mustache). MFG</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748731#m1748731jQuietsch2019-05-14T18:43:19Z2019-05-14T18:43:19ZjQuery: Daten in zwei iframes unterschiedlich nutzen<p>Hallo Matthias,</p>
<p>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.</p>
<p>Gruß jQ...h</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748738#m1748738Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2019-05-14T19:43:00Z2019-05-14T19:43:00ZjQuery: Daten in zwei iframes unterschiedlich nutzen<p>Hallo jQuietsch,</p>
<blockquote>
<p>Dein Link verweist auf eine alte Diskussion, die m.E. mit HTML5 und iframes (die ich benutze) obsolet ist.</p>
</blockquote>
<p>Nein. Ein Großteil der beschriebenen Probleme besteht ob mit oder ohne <em>I</em>.</p>
<blockquote>
<p>Und selbst wenn ich noch Frames nutzen würde, dem jQuery-Thema näher bringt mich Dein Beitrag nicht.</p>
</blockquote>
<p>Alles, was du in den beiden Frames machen möchtest, kannst du auch in <code>nav</code> und <code>main</code> tun. In <em>einer</em> Seite (<a href="https://wiki.selfhtml.org/wiki/JavaScript/XMLHttpRequest" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/JavaScript/XMLHttpRequest</a>).</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Pantoffeltierchen haben keine Hobbys.<br>
¯\_(ツ)_/¯
</div>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748736#m1748736JürgenBhttps://www.j-berkemeier.de2019-05-14T19:31:03Z2019-05-14T19:31:03ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<p>Hallo,</p>
<p>warum Iframes? Warum jquery?</p>
<p>Links ein <code>nav</code>, rechts z.B. ein <code>main</code>, für das Holen der Daten <a href="https://wiki.selfhtml.org/wiki/JavaScript/XMLHttpRequest" rel="nofollow noopener noreferrer">XMLHttpRequest</a> bzw. <a href="https://wiki.selfhtml.org/wiki/JavaScript/Window/fetch" rel="nofollow noopener noreferrer">fetch</a>, und dann noch ein paar <a href="https://wiki.selfhtml.org/wiki/JavaScript/Objekte/String" rel="nofollow noopener noreferrer">Stringfunktionen</a> um die csv-Daten zu zerlegen. Und wenn du schon mal im Wiki bist, solltest du <a href="https://wiki.selfhtml.org/wiki/JavaScript" rel="nofollow noopener noreferrer">hier</a> deine Javascriptkenntnisse auch noch etwas auffrischen.</p>
<p>Gruß<br>
Jürgen</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748737#m1748737jQuietsch2019-05-14T19:40:57Z2019-05-14T19:40:57ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<p>Hallo Jürgen,</p>
<p>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.</p>
<p>Allerdings: "auffrischen" kann man nur, was man schon mal erlernt hat, und da ist bei mir eben noch nichts...</p>
<p>Gruß jQ...h</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748746#m1748746Rolf B2019-05-15T09:15:29Z2019-05-15T09:15:29ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<p>Hallo jQuietsch,</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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?</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748744#m1748744JürgenBhttps://www.j-berkemeier.de2019-05-15T06:50:33Z2019-05-15T06:50:33ZjQuery: Daten in zwei iframes unterschiedlich nutzen<p>Hallo pl,</p>
<p>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“.</p>
<p>Gruß<br>
Jürgen</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748765#m1748765pl2019-05-15T15:15:25Z2019-05-15T15:25:00ZjQuery: Daten in zwei iframes unterschiedlich nutzen<blockquote>
<p>Keine große Sache. Da erstellst Du ein Template, holst die Daten per AJAX/JSON und renderst damit das Template (z.B. Mustache). MFG</p>
</blockquote>
<p>Ergänzung, Templates für Mustache möchten folgende Datenstruktur, ein Array mit Objekten:</p>
<pre><code class="block language-js"><span class="token punctuation">[</span>
<span class="token punctuation">{</span><span class="token string-property property">"ID"</span><span class="token operator">:</span><span class="token string">"123"</span><span class="token punctuation">,</span> <span class="token string-property property">"Kategorie"</span><span class="token operator">:</span><span class="token string">"Spiel"</span> <span class="token comment">/*usw*/</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span><span class="token string-property property">"ID"</span><span class="token operator">:</span><span class="token string">"456"</span><span class="token punctuation">,</span> <span class="token string-property property">"Kategorie"</span><span class="token operator">:</span><span class="token string">"Spaß"</span> <span class="token comment">/*usw*/</span><span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</code></pre>
<p>das kannst Du also als JSON senden in einer AJAX Response. Dazu muss Deine CSV Datei serverseitig aufgearbeitet werden, also aus CSV mach JSON.</p>
<p>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</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748849#m1748849pl2019-05-16T15:14:34Z2019-05-16T15:14:34ZjQuery: Daten in zwei iframes unterschiedlich nutzen<blockquote>
<p>Keine große Sache. Da erstellst Du ein Template, holst die Daten per AJAX/JSON und renderst damit das Template (z.B. Mustache). MFG</p>
</blockquote>
<p><a href="https://rolfrost.de/mustache.html" rel="nofollow noopener noreferrer">Artikel+Demo</a></p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748745#m1748745Tabellenkalk2019-05-15T07:28:48Z2019-05-15T07:28:48ZjQuery: Daten in zwei iframes unterschiedlich nutzen<p>Hallo,</p>
<blockquote>
<p>Autofahrer</p>
<p>Fußgänger</p>
</blockquote>
<p>Du hast vergessen zu erwähnen, wer von den beiden Bart trägt…</p>
<p>Gruß<br>
Kalk</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748750#m1748750JürgenBhttps://www.j-berkemeier.de2019-05-15T09:45:22Z2019-05-15T09:47:08ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<p>Hallo Rolf,</p>
<blockquote>
<p>Abgesehen davon führt der Google Bot kein Script aus. D.h. eine Inhalte würden nicht indiziert.</p>
</blockquote>
<p>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.</p>
<p>Gruß<br>
Jürgen</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748777#m1748777jQuietsch2019-05-15T20:55:54Z2019-05-15T20:55:54ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<p>Hallo allerseits und besonders Rolf!</p>
<p>Erst einmal sorry für meine späte Rückmeldung, ich war unterwegs und bin da aus Prinzip nur passiv online.</p>
<blockquote>
<p>Viele diese Überlegungen stehen und fallen mit dem Einsatzzweck und dem Hosting der Seite</p>
</blockquote>
<p>Nach einem langen und sehr aufschlussreichen Text eine <strong>sehr gute Frage</strong>: 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).</p>
<p>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.</p>
<p>Eine entsprechende Beispieldatei liefere ich nach einer kurzen REM-Phase morgen nach.</p>
<p>VIELEN DANK! jQ...h</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748754#m1748754Mitleser2019-05-15T10:43:25Z2019-05-15T10:43:25ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<blockquote>
<blockquote>
<p>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.</p>
</blockquote>
</blockquote>
<p>Korrekt. Die Information, der Google-Bot würde kein JavaScript ausführen, ist schon seit vielen Jahren nicht mehr korrekt.</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748764#m1748764pl2019-05-15T15:07:34Z2019-05-15T15:07:34ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<blockquote>
<blockquote>
<blockquote>
<p>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.</p>
</blockquote>
</blockquote>
<p>Korrekt. Die Information, der Google-Bot würde kein JavaScript ausführen, ist schon seit vielen Jahren nicht mehr korrekt.</p>
</blockquote>
<p>So isses. Googlebot macht auch vor keiner Requestmethode halt. Also von wegen kein POST oder PUT. MFG</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748766#m1748766dedlfix2019-05-15T15:17:18Z2019-05-15T15:17:18ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<p>Tach!</p>
<blockquote>
<p>Googlebot macht auch vor keiner Requestmethode halt. Also von wegen kein POST oder PUT.</p>
</blockquote>
<p>Die Aussage ist wohl so nicht ganz richtig. Der Bot startet zwar auch POST-Requests, jedoch nicht wahllos. <a href="https://webmasters.googleblog.com/2011/11/get-post-and-safely-surfacing-more-of.html" rel="nofollow noopener noreferrer">Jener Blog-Post</a> ist zwar schon älter, aber aktuelle Aussagen dazu habe ich nicht gefunden.</p>
<p>dedlfix.</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748837#m1748837pl2019-05-16T14:07:07Z2019-05-16T14:07:07ZjQuery: Daten in zwei iframes unterschiedlich nutzen<p>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:</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/jquery.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/mustache.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/template<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token operator"><</span>table <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"grid"</span> style<span class="token operator">=</span><span class="token string">"width:100%"</span><span class="token operator">></span>
<span class="token operator"><</span>tr style<span class="token operator">=</span><span class="token string">"text-align:left"</span><span class="token operator">></span>
<span class="token operator"><</span>th<span class="token operator">></span><span class="token constant">WKR_NR</span><span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span>
<span class="token operator"><</span>th<span class="token operator">></span><span class="token constant">WKR_NAME</span><span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span>
<span class="token operator"><</span>th<span class="token operator">></span><span class="token constant">LAND_NR</span><span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span>
<span class="token operator"><</span>th<span class="token operator">></span><span class="token constant">LAND_NAME</span><span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span>
<span class="token operator"><</span>th<span class="token operator">></span><span class="token constant">LAND_ABK</span><span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span>
<span class="token punctuation">{</span><span class="token punctuation">{</span>#loop<span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator"><</span>tr<span class="token operator">></span>
<span class="token operator"><</span>td<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token operator">&</span> <span class="token constant">WKR_NR</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
<span class="token operator"><</span>td<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token operator">&</span> <span class="token constant">WKR_NAME</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
<span class="token operator"><</span>td<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token operator">&</span> <span class="token constant">LAND_NR</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
<span class="token operator"><</span>td<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token operator">&</span> <span class="token constant">LAND_NAME</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
<span class="token operator"><</span>td<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token operator">&</span> <span class="token constant">LAND_ABK</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span>
<span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token operator">/</span>loop<span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>table<span class="token operator">></span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>out<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">function</span> <span class="token function">load_csv</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">var</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"GET"</span><span class="token punctuation">,</span><span class="token string">"/wahlkreise.csv"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
xhr<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">var</span> lines <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">"\n"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> headlines <span class="token operator">=</span> lines<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> cols <span class="token operator">=</span> headlines<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">";"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//console.log(cols); // WKR_NR WKR_NAME LAND_NR LAND_NAME LAND_ABK</span>
<span class="token keyword">var</span> wahlkreise <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">while</span><span class="token punctuation">(</span> lines<span class="token punctuation">.</span>length <span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">var</span> line <span class="token operator">=</span> lines<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> values <span class="token operator">=</span> line<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">";"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> wk <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> cols<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
wk<span class="token punctuation">[</span>cols<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">=</span> values<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
wahlkreise<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>wk<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#out'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span> Mustache<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#tt'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">loop</span><span class="token operator">:</span>wahlkreise<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">load_csv</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre>
<p>Das Ergebnis ist eine Tabelle, siehe Template. MFG</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748787#m1748787Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2019-05-16T06:04:46Z2019-05-16T06:04:46ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<p>Hallo jQuietsch,</p>
<blockquote>
<blockquote>
<p>Zu einem <p> gehört immer auch ein </p>.</p>
</blockquote>
</blockquote>
<blockquote>
<p>der auch offene HTML-Tags versteht (wobei der Hinweis natürlich seine Richtigkeit hat).</p>
</blockquote>
<p>Beachte den <a href="http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut.html" rel="nofollow noopener noreferrer">Unterschied zwischen Tag und Element</a>.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Pantoffeltierchen haben keine Hobbys.<br>
¯\_(ツ)_/¯
</div>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748802#m1748802JürgenBhttps://www.j-berkemeier.de2019-05-16T08:58:34Z2019-05-16T08:58:34ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<p>Hallo,</p>
<blockquote>
<p>Mit jQuery habe ich es immerhin geschafft, mir die Daten einer CSV in ein HTML-Dokument zu holen.</p>
</blockquote>
<p>jQuery ist eine Javascript-Bibliothek. jQuery ohne Javascriptgrundkenntnisse ist wie Tauchen ohne Schwimmen zu können.</p>
<p>Gruß<br>
Jürgen</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748798#m1748798Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2019-05-16T07:18:03Z2019-05-16T07:18:03ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<p>@@Matthias Apsel</p>
<blockquote>
<p>Beachte den <a href="http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut.html" rel="nofollow noopener noreferrer">Unterschied zwischen Tag und Element</a>.</p>
</blockquote>
<p>Das ist ein Unterschied wie zwischen Tag und Nacht.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748804#m1748804dedlfix2019-05-16T09:09:34Z2019-05-16T09:09:34ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<p>Tach!</p>
<blockquote>
<p>jQuery ist eine Javascript-Bibliothek. jQuery ohne Javascriptgrundkenntnisse ist wie Tauchen ohne Schwimmen zu können.</p>
</blockquote>
<p>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. </p>
<p>dedlfix.</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748806#m1748806Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2019-05-16T09:29:08Z2019-05-16T09:29:08ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<p>@@JürgenB</p>
<blockquote>
<p>jQuery ist eine Javascript-Bibliothek. jQuery ohne Javascriptgrundkenntnisse ist wie Tauchen ohne Schwimmen zu können.</p>
</blockquote>
<p>Der Fisch hinkt.</p>
<p>Tauchen ist sinnvoll.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748807#m1748807pl2019-05-16T09:35:35Z2019-05-16T09:50:25ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<blockquote>
<p>Aber beim Tauchen nützen einem beispielsweise die Kenntnisse im Brustschwimmen nicht viel. Dieser Schwimmstil ist beim Tauchen eher hinderlich als nützlich.</p>
</blockquote>
<p>Stimmt. Mit Kraulen kommt man auch beim Tauchen viel besser vorwärts </p>
<div class="signature">-- <br>
Dem Schwarzspecht seine Lieblingsspeise ist die große Waldameise.
</div>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748809#m1748809JürgenBhttps://www.j-berkemeier.de2019-05-16T09:52:15Z2019-05-16T09:52:15ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<p>Hallo Gunnar und dedlfix,</p>
<p>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.</p>
<p>Hier schlagen immer wieder Fragende auf, die mit jquery die tollsten Sachen hinbekommen, aber am <code>if</code> scheitern.</p>
<p>Gruß<br>
Jürgen</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748810#m1748810dedlfix2019-05-16T10:23:58Z2019-05-16T10:23:58ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<p>Tach!</p>
<blockquote>
<p>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.</p>
</blockquote>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>dedlfix.</p>
https://forum.selfhtml.org/self/2019/may/14/jquery-daten-in-zwei-iframes-unterschiedlich-nutzen/1748811#m1748811Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2019-05-16T10:24:19Z2019-05-16T10:24:19ZjQuery: Daten in zwei iframes unterschiedlich nutzen (Nachtrag)<p>@@JürgenB</p>
<blockquote>
<p>Hier schlagen immer wieder Fragende auf, die mit jquery die tollsten Sachen hinbekommen, aber am <code>if</code> scheitern.</p>
</blockquote>
<p>Dabei ist das doch ganz einfach:</p>
<pre><code class="block language-javascript"><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> $ <span class="token operator">!=</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
<span class="token keyword">throw</span> <span class="token string">'Learn JavaScript!'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>