javascript funktion .load html -> in div-Element – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self javascript funktion .load html -> in div-Element Fri, 08 Mar 19 10:31:55 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744058#m1744058 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744058#m1744058 <p>Hallo liebe Gemeinde!</p> <p>ich muss als erstes sagen, dass ich gerade wieder anfange mit der HTML-Programmierung ( meine letzten Schritte sind JAHRE her ). Nachdem mir hier im Formum schon wunderbar mit einem Problem der UTF-8 Kodierung geholfen wurde stehe ich nun vor einem neuen Problem.</p> <p>Wie oben schon gesagt habe ich vor ewigkeiten schonmal HTML geschrieben. Zu jener Zeit wurde noch eifrig mit FRAMES gearbeitet. Nun, wo ich wieder angefangen habe stelle ich Fest, dass das so nicht mehr gern gesehen ist und auch nicht mehr üblich ist. Also habe ich mich alternativ mit <div> beschäftigt.</p> <p>Mein Ziel ist es, einen <div id="content"> mittels javascript Function durch die Auswahl aus einem Navi Menü neu zu füllen. Meine Frage ist, ist dies überhaubt möglich ohne das ich den Browser zwinge die gesamt Seite neu zu laden?</p> <p>Die Function schein aufgerufen zu werden, dies habe ich mittels Alarm-Function getestet. Leider wird das <div> nicht aktualisiert, oder wird es eventuell aktualisiert und der Browser weiß nur nichts davon?</p> <p>Ich möchte halt den Inhalt des <div> in Abhägigkeit der Menüauswahl ändern ohne immer die ganze Seite neu laden zu müssen.</p> <p>Hier mein Code:</p> <p><code><?php header('Content-type: text/html; charset=utf-8'); ?></code></p> <p><code><!doctype html></code></p> <p><code><html lang="de"></code></p> <p><code><head></code></p> <p><code><meta http-equiv="Content-Type" content="text/html" charset=utf-8" /></code></p> <p><code> <script type="text/javascript"> </code></p> <p><code> function reload () {</code></p> <p><code> $( "#content" ).load( "test.html" );</code></p> <p><code> };</code></p> <p><code> </script></code></p> <p><code></head> </code></p> <p><code> <body></code></p> <p><code> <div id="menu"></code></p> <p><code> <ul></code></p> <p><code> <li><a href="javascript:reload()">Home</a></li></code></p> <p><code> <li><a href="#">Kalender</a></li></code></p> <p><code> </ul></code></p> <p><code> </div></code></p> <p><code> <div id="content"></code></p> <p><code> Hallo</code></p> <p><code> </div></code></p> <p><code></body></code></p> <p><code></html></code></p> <p>test.html ist liegt im selben Ordner wie die index.php und enthält zum testen einfach nur das Wort: Funktioniert</p> <p>Ich hoffe ihr könnt mein Anliegen verstehen und bitte um Eure Hilfe!</p> <p>Vielen Dank und Grüße Lars</p> javascript funktion .load html -> in div-Element Fri, 08 Mar 19 11:03:45 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744060#m1744060 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744060#m1744060 <p>Lieber Lars,</p> <blockquote> <p>Mein Ziel ist es, einen <div id="content"> mittels javascript Function durch die Auswahl aus einem Navi Menü neu zu füllen.</p> </blockquote> <p>dazu habe ich zwei Dinge:</p> <ol> <li>Du möchtest anstelle von <div id="content"> lieber ein <main>.</li> <li>Ohne JavaScript ist die Benutzung Deiner Seite also völlig unmöglich. Ist das so gewollt, und wenn ja, warum?</li> </ol> <p>Natürlich kann man zu 2. argumentieren, dass fast keine Seitenbesucher mehr ohne JavaScript daher kommen, aber inwiefern trennst Du dann Inhalt (Marku, HTML-Code) von Programmlogik (JavaScript)? Ich liebäugle noch sehr mit der Ansicht, dass die Inhalte einer Seite grundsätzlich ohne JavaScript erreichbar sein müssen. Auch wenn sie dann "weniger schön" dargestellt oder benutzbar sind.</p> <blockquote> <p>Meine Frage ist, ist dies überhaubt möglich ohne das ich den Browser zwinge die gesamt Seite neu zu laden?</p> </blockquote> <p>Ja, undzwar genau dann, wenn Du alle Inhalte "irgendwie" schon in dieser einen Seite geladen hast. Das ist übrigens auch das Konzept hinter den "one-pager"-Seiten. Allerdings sind die einfach eine lange Scroll-Angelegenheit. Aber genau hier könntest Du ansetzen und Deine Inhalte eben durch Verweise "austauschen". Dazu bräuchtest Du noch nicht einmal JavaScript, sondern könntest <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target" rel="nofollow noopener noreferrer">rein mit CSS das gleiche erreichen</a>:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</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>home<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>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</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>contact<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>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</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>privacy-policy<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>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Navigation<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#home<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#contact<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Contact Us<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#privacy-policy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Our Privacy Policy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> </code></pre> <p>Und in Deinem CSS-Code müsste dann in etwa das hier stehen:</p> <pre><code class="block language-css"><span class="token selector">article</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">article:target</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <blockquote> <p>Die Function schein aufgerufen zu werden, dies habe ich mittels Alarm-Function getestet. Leider wird das <div> nicht aktualisiert, oder wird es eventuell aktualisiert und der Browser weiß nur nichts davon?</p> </blockquote> <p>Hehe, willkommen beim Schreiben von JavaScript. Du nanntest HTML als Dein Vorwissen. JavaScript ist eine ergänzende Technologie, die aus dem Bereich der Programmiersprachen kommt. HTML ist keine Programmiersprache.</p> <blockquote> <p>Ich möchte halt den Inhalt des <div> in Abhägigkeit der Menüauswahl ändern ohne immer die ganze Seite neu laden zu müssen.</p> </blockquote> <p>Das geht schon ohne JavaScript. Siehe oben.</p> <blockquote> <p><code> <li><a href="javascript:reload()">Home</a></li></code></p> </blockquote> <p>Keine gute Idee. Du notierst JavaScript-Code in Deinem HTML-Dokument. Ohne JavaScript sollte da etwas anderes passieren. Also muss Dein JavaScript-Programm diese Links "kapern" und mit Deiner dynamischen Arbeitsweise versehen. Das nennt man dann wohl <em>unobtrusive</em>... also unaufdringlich. So machst Du die Funktionalität (lies: die Benutzbarkeit) Deiner Seite kaputt, weil ohne JavaScript nichts mehr geht (und aktuell mit JavaScript auch nicht).</p> <blockquote> <p><code> <li><a href="#">Kalender</a></li></code></p> </blockquote> <p>Siehst Du was ich meine? Hier kommt kein Kalender.</p> <blockquote> <p>test.html ist liegt im selben Ordner wie die index.php und enthält zum testen einfach nur das Wort: Funktioniert</p> </blockquote> <p>Oh weh, mit PHP hantierst Du auch noch? Wozu denn? Was leistet Dein PHP-Script, was Dein HTML nicht kann? Was für eine Programmlogik leistet hier PHP? Nicht, dass ich Dir ausreden möchte, den Umgang mit PHP zu erlernen, aber was genau tust Du hier?</p> <p>Für das obige Beispiel von mir könnte ich mir vorstellen, dass Dein PHP-Script einzelne HTML-Dateien zu einem gemeinsamen Dokument zusammenführt. Dabei könnten die einzelnen Seiten in Dateien wie <code>home.html</code>, <code>contact.html</code> oder <code>privacy-policy.html</code> stehen, und das PHP-Script baut aus ihrem Dateinamen entsprechende <code>id</code>-Werte (siehe Beispiel oben) für die <code>article</code>-Elemente, welche den HTML-Code aus dem jeweiligen <code>body</code>-Element der HTML-Dateien erhalten.</p> <p>Eine solche Lösung wäre gut skalierbar, da Du für weitere Seiten einfach (wirklich "einfach"!) weitere HTML-Dateien in das jeweilige Verzeichnis ablegst, die dann von PHP gefunden und auf dieselbe Weise eingebunden werden.</p> <p>Wenn Du später einmal eine Unterstützung für Mehrsprachigkeit obendrauf satteln willst, ist auch das mit diesem Vorgehen zu machen.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> javascript funktion .load html -> in div-Element Fri, 08 Mar 19 14:04:12 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744068#m1744068 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744068#m1744068 <p>Hallo Lars,</p> <p>wenn deine Datei auf dem Server exakt so aussieht wie gezeigt, kann es nicht funktionieren. <code>$('#content').load('test.html')</code> ist ein jQuery Aufruf, dazu musst Du jQuery einbinden. In heutigen Browsern braucht man für Ajax-Calls aber nicht mehr unbedingt jQuery. Schau Dir mal <a href="https://wiki.selfhtml.org/wiki/JavaScript/Window/fetch" rel="nofollow noopener noreferrer">fetch</a> an (für Support des Internet Explorer brauchst Du einen Polyfill für Fetch und Promise, könntest aber auch sagen: für den alten Schinken biete ich das nicht an und bleibe bei einfachem HTML).</p> <p>Es gibt einige Webseiten, die als SPA (Single Page Application) konzipiert sind und ohne JavaScript nicht benutzt werden können. Es ist dann aber sinnvoll, eine Fallback-Webseite bereitzustellen, die ohne JavaScript funktioniert und ggf. auch anders aussieht (Beispiel: schalte JavaScript ab und rufe Google auf. Sogar für Google Mail gibt es eine HTML-Variante ohne JS).</p> <p>PL hat neulich das Konzept angesprochen und mit mir diskutiert, wie man eine normale Webseite als Progressive Enhancement in eine Ajax-Seite umwandeln kann, ohne dass serverseitig irgendwas zu tun ist. Es gibt viele Wege, wie man das tun kann, es gibt auch Möglichkeiten, wie man serverseitig Optimierungen für den Ajax-Zweig vorsehen kann, vielleicht liest Du Dir das entsprechende Thema einfach mal durch.</p> <p><a href="https://forum.selfhtml.org/self/2019/feb/22/domparser-und-progressive-enhancement/1743135" rel="noopener noreferrer">https://forum.selfhtml.org/self/2019/feb/22/domparser-und-progressive-enhancement/1743135</a></p> <p>Wenn Du so etwas tun willst, brauchst Du allerdings gute JavaScript Kenntnisse.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> javascript funktion .load html -> in div-Element Sun, 10 Mar 19 09:51:39 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744163#m1744163 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744163#m1744163 <p>Hallo!</p> <p>Hui, hier hab ich ja gleich eine kleine Diskusionsrunde ausgelöst </p> <p>Ich habe mir nun alles aufmerksam durch gelesen und werde mir, sobald ich ein wenig Zeit habe auch die Themen "target" und "fetch" näher ansehen.Grob überflogen habe ich diese schon und es sind interessante Ansätze für mich zu sehen.</p> <p><a href="/users/243" class="mention registered-user" rel="noopener noreferrer">@Felix Riesterer</a></p> <blockquote> <p>Ja, undzwar genau dann, wenn Du alle Inhalte "irgendwie" schon in dieser einen Seite geladen hast. Das ist übrigens auch das Konzept hinter den "one-pager"-Seiten.</p> </blockquote> <p>Das ist ja eines meiner "Probleme" ich kann nicht gleich den gesamten Seiteninhalt laden. Das ist auch der Grund warum ich php benutze wie du ja schon angemerkt hast. Mein Inhalte werden via php dynamisch generiert, da sie zum grösten Teil aus einer Datenbank kommen.</p> <p>vielleicht hätte ich das gleich im ersten Post schon schreiben sollen!? </p> <p>Zeil von mir ist es z.b. nach der Auswahl eines Menüeintrages den enstprechenden Inhalt in einem <div> ( oder <main> oder was auch immer ) anzuzeigen. Diese könnte ich ja noch für alle Menü-Einträge "vor laden" und dann mit target/fetch arbeiten. Aber danach steht dann z.B. in einem <div> ein Listenfeld mit einer Anzahl von Herstellern. Nun möchte ich den Inhalt eines weiteren <div> nach der Auswahl eines Herstellers generieren und ausgeben ( z.b. mit dessen Artikeln ) -> Diese Daten kommen auch wieder aus der Datenbank. Da ich am Anfang natürlich nicht weiß, welcher Hersteller ausgewählt wurde ist es schwer die Inhalte "vor-zu-laden" !?</p> <p>Ich habe das ganze ja schon teilweise zum laufen bekommen, in dem ich meiner eigenen Seite, nach einer Auswahl aus dem Listenelement, dessen ID mit gegeben habe und dann wieder die ganze Seite entsprechend aufgebaut habe. Dies kommt mir aber sehr umständlich vor, da ich immer wieder die gesamte Seite aufbauen muss!?</p> <p>In den alten Frames Zeiten hätte ich in diesem Falle nur die html-Seite in dem entsprechendem Frame mit dem Parameter neu geladen.</p> <p>Klar würde ich im Moment lieber ohne java auskommen, was ja auch einer der Gründe war das ich mich an Euch gewendet habe!</p> <p>Ich hoffe ich konnte meine Absichten nun etwas deutlicher dar stellen.</p> <p>Lg Lars</p> javascript funktion .load html -> in div-Element Fri, 08 Mar 19 11:25:01 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744061#m1744061 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744061#m1744061 <p>@@Felix Riesterer</p> <blockquote> <p>2. Ohne JavaScript ist die Benutzung Deiner Seite also völlig unmöglich. Ist das so gewollt, und wenn ja, warum?</p> <p>Natürlich kann man zu 2. argumentieren, dass fast keine Seitenbesucher mehr ohne JavaScript daher kommen</p> </blockquote> <p>Kann man? Von einigen JavaScript-Deaktivierern abgesehen: <strong>jeder</strong> Seitenbesucher kommt ohne JavaScript daher, solange das JavaScript nicht geladen und ausgeführt wurde.</p> <p>Und das passiert häufiger als man denkt. Fahr mal mit der Bahn durch BrandEDGEburg! Und eingebundene fehlerhafte Fremd-Scripte können die Ausführung des eigenen JavaScripts verhindern.</p> <blockquote> <p>Ich liebäugle noch sehr mit der Ansicht, dass die Inhalte einer Seite grundsätzlich ohne JavaScript erreichbar sein müssen.</p> </blockquote> <p>Noch? Die Liebäugelei solltest du dir erhalten. JavaScript ist fragil; man kann sich darauf nicht verlassen.</p> <blockquote> <blockquote> <p>Meine Frage ist, ist dies überhaubt möglich ohne das ich den Browser zwinge die gesamt Seite neu zu laden?</p> </blockquote> <p>Ja, undzwar genau dann, wenn Du alle Inhalte "irgendwie" schon in dieser einen Seite geladen hast.</p> </blockquote> <p>„Genau dann, wenn“ trifft nicht zu. Man kann Inhalte mit JavaScript/AJAX auch nachladen.</p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</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>home<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>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</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>contact<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>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</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>privacy-policy<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>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Ich glaube nicht, dass <code>article</code> hier das passende Element ist. Ich tendiere zu <code>section</code> oder <code>div</code>.</p> <p>Was auch ginge:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</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>home<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>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</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>contact<span class="token punctuation">"</span></span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><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>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</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>privacy-policy<span class="token punctuation">"</span></span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><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>main</span><span class="token punctuation">></span></span> </code></pre> <p>Allerdings braucht man dann zum Umschalten der Sichtbarkeit (des <code>hidden</code>-Attributs) JavaScript.</p> <p>Und was man bei einer JavaScript-Lösung auf keinen Fall vergessen sollte: Über das History-API den URL in der Adresszeile ändern, damit die Seite als Lesezeichen gesetzt und mit anderen geteilt werden kann. Und damit der Zurück-Buttons des Browsers funktioniert.</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> javascript funktion .load html -> in div-Element Fri, 08 Mar 19 13:11:15 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744067#m1744067 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744067#m1744067 <p>@@Felix Riesterer</p> <blockquote> <p>Und in Deinem CSS-Code müsste dann in etwa das hier stehen:</p> <pre><code class="block language-css"><span class="token selector">article</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">article:target</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>In etwa, aber andersrum:</p> <pre><code class="block language-css"><span class="token selector">article:not(:target)</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none <span class="token punctuation">}</span> </code></pre> <p>Sonst ist in Browsern, die <code>:target</code> nicht unterstützen, nichts zu sehen.</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> javascript funktion .load html -> in div-Element Fri, 08 Mar 19 21:54:50 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744076#m1744076 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744076#m1744076 <p>Hallo Ingrid,</p> <blockquote> <pre><code class="block language-css"><span class="token selector">article</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">article:target</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>ich habe das <a href="https://jsfiddle.net/y7rev839/" rel="noopener noreferrer">gerade ausprobiert</a>. Dabei stellt sich das Problem, dass der Aufruf der Seite ohne Fragment-Identifier, also ohne <code>#home</code>, <code>#contact</code> oder <code>#privacy-policy</code> in der URL, keinen Inhalt liefert, bis man einen der Links geklickt hat. Auf die Schnelle weiß ich jetzt aber keine Lösung dafür.</p> <p>Wenn man den <code>home</code>-Abschnitt grundsätzlich sichtbar macht, wie will man es bei einem direkt angewählten anderen Bereich rein mit CSS wieder unsichtbar machen?</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> javascript funktion .load html -> in div-Element Fri, 08 Mar 19 12:37:11 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744064#m1744064 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744064#m1744064 <p>Lieber Gunnar,</p> <blockquote> <blockquote> <p>Ich liebäugle noch sehr mit der Ansicht, dass die Inhalte einer Seite grundsätzlich ohne JavaScript erreichbar sein müssen.</p> </blockquote> <p>Noch? Die Liebäugelei solltest du dir erhalten. JavaScript ist fragil; man kann sich darauf nicht verlassen.</p> </blockquote> <p>ich baue meine Seiten noch immer so, dass ihre Inhalte ohne JavaScript zu 100% genutzt werden können. Ausnahme mein R-Quiz, aber das ist ja klar. Im Admin-Bereich allerdings setze ich JavaScript voraus, das zugehörige Login-Formular ist ohne JavaScript nicht erreichbar.</p> <blockquote> <p>Ich glaube nicht, dass <code>article</code> hier das passende Element ist. Ich tendiere zu <code>section</code> oder <code>div</code>.</p> </blockquote> <p>Ach ja, die Frage, ob man <code>section</code> als Elternelement von <code>article</code> verwendet, oder umgekehrt. Wenn der "Aufsatz" (<code>article</code>) zu "Datenschutzrichtlinie" ein Teilsegment (<code>section</code>) der Seite ist, was ist dann das zu bevorzugende Element? Beide Lösungen haben ihren Sinn. Als Kapitel (<code>section</code>) innerhalb eines Aufsatzes oder Blogbeitrag (<code>article</code>) sehe ich dann aber eine klarere Strukturierung mit <code>article</code> als Elternelement.</p> <blockquote> <p>Was auch ginge:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</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>home<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>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</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>contact<span class="token punctuation">"</span></span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><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>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</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>privacy-policy<span class="token punctuation">"</span></span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><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>main</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Grundsätzlich finde ich das <code>hidden</code>-Attribut sehr chic, jedoch wie Du richtig anmerkst, bedarf es dazu JavaScript:</p> <blockquote> <p>Allerdings braucht man dann zum Umschalten der Sichtbarkeit (des <code>hidden</code>-Attributs) JavaScript.</p> </blockquote> <p>Daher fand ich meine CSS-basierte Lösung geschickter und ebenso semantisch/SEO/ARIA/WTF.</p> <blockquote> <p>Und was man bei einer JavaScript-Lösung auf keinen Fall vergessen sollte: Über das History-API den URL in der Adresszeile ändern, damit die Seite als Lesezeichen gesetzt und mit anderen geteilt werden kann. Und damit der Zurück-Buttons des Browsers funktioniert.</p> </blockquote> <p>Das wäre in meiner rein CSS-basierten Lösung bereits inklusive. Ist sie damit nicht die überlegenere Lösung?</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> javascript funktion .load html -> in div-Element Fri, 08 Mar 19 23:40:39 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744078#m1744078 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744078#m1744078 <p>@@Felix Riesterer</p> <blockquote> <blockquote> <p>Ich glaube nicht, dass <code>article</code> hier das passende Element ist. Ich tendiere zu <code>section</code> oder <code>div</code>.</p> </blockquote> <p>Ach ja, die Frage, ob man <code>section</code> als Elternelement von <code>article</code> verwendet, oder umgekehrt.</p> </blockquote> <p>Oder in dem Fall weder das eine noch das andere.</p> <p>Hier wird ja (im Normalfall) nur jeweils einer der Bereiche angezeigt, welcher dann den Hauptinhalt der Seite ausmacht und nicht nur einen Teil davon.</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> javascript funktion .load html -> in div-Element Sat, 09 Mar 19 00:42:16 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744080#m1744080 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744080#m1744080 <p>@@Felix Riesterer</p> <blockquote> <p>Das wäre in meiner rein CSS-basierten Lösung bereits inklusive. Ist sie damit nicht die überlegenere Lösung?</p> </blockquote> <p>Nein. Der Schwachpunkt der Lösung mit seiteninternen Ankern ist, dass nicht nur über <code>:target</code> die Sichtbarkeit geregelt wird, sondern eben auch der Anker angesprungen wird. Das heißt: die Seite springt vom Menü weg zu dem angewählten Bereich. Zu sehen bei <a href="https://codepen.io/gunnarbittersmann/pen/wOeMGd" rel="noopener noreferrer">mehr Inhalt</a>.</p> <p>Das dürfte einer mittleren UX-Katastrophe nahekommen.</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> javascript funktion .load html -> in div-Element Fri, 08 Mar 19 17:25:31 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744072#m1744072 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744072#m1744072 <p>Lieber Gunnar,</p> <blockquote> <p>Sonst ist in Browsern, die <code>:target</code> nicht unterstützen, nichts zu sehen.</p> </blockquote> <p>und <a href="https://caniuse.com/#search=%3Atarget" rel="noopener noreferrer">welche betriffst das noch</a>?</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> javascript funktion .load html -> in div-Element Fri, 08 Mar 19 17:42:10 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744073#m1744073 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744073#m1744073 <p>@@Felix Riesterer</p> <blockquote> <blockquote> <p>Sonst ist in Browsern, die <code>:target</code> nicht unterstützen, nichts zu sehen.</p> </blockquote> <p>und <a href="https://caniuse.com/#search=%3Atarget" rel="noopener noreferrer">welche betriffst das noch</a>?</p> </blockquote> <p>Ist mir schnuppe. Ich unterstütze <strong>jeden</strong> Browser – und optimiere für keinen, wie Jeremy Keith immer zu sagen pflegt.</p> <p><em lang="en">Progressive enhancement</em> heißt, die Grundfunktionalität für alle bereitzustellen – und das heißt in dem Fall, dass man den Inhalt in allen Browsern lesen kann. In <code>:target</code> oder <code>:not()</code> nicht unterstützenden Browsern wäre dann halt der gesamte Inhalt zu sehen – allemal besser als kein Inhalt.</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> javascript funktion .load html -> in div-Element Fri, 08 Mar 19 22:52:00 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744077#m1744077 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744077#m1744077 <p>Hallo Felix,</p> <p>wenn der #home Abschnitt der letzte im HTML ist und alle Artikel Kind des gleichen Containers sind, kann man vielleicht mit dem Geschwisterselektor was machen.</p> <pre><code class="block language-css"><span class="token selector">article</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">article:target:not(#home), #home</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">article:target ~ #home</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Ggf. muss man die Spezifität noch etwas tweaken.</p> <p>Ob das ein Ergebnis ist, bei dem Semantik und Accessibility stimmen, weiß ich aber nicht.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> javascript funktion .load html -> in div-Element Fri, 08 Mar 19 23:52:58 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744079#m1744079 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744079#m1744079 <p>@@Felix Riesterer</p> <blockquote> <p>Wenn man den <code>home</code>-Abschnitt grundsätzlich sichtbar macht, wie will man es bei einem direkt angewählten anderen Bereich rein mit CSS wieder unsichtbar machen?</p> </blockquote> <p>Ich behaupte mal ganz keck: gar nicht.</p> <p>Man kann initial den letzten Abschnitt sichtbar machen, indem man nur <code>:target:not(:last-of-type)</code> ausblendet. Der letzter Abschnitt wird ausgeblendet, wenn ein anderer davor angewählt ist: <code>:target ~ :last-of-type</code>.</p> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/aMwOeL" rel="noopener noreferrer">Codepen</a> </p> <p>Initial den letzten Abschnitt sichtbar machen ist aber sicher nicht das, was man will. Den ersten Abschnitt ans Ende stellen ist auch keine Lösung; dann ist die Seite kaputt, wenn CSS nicht interpretiert wird.</p> <p>Man muss deine Frage <em>Ist meine rein CSS-basierten Lösung nicht die überlegenere Lösung?</em> wohl mit einem klaren Nein beantworten.</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> javascript funktion .load html -> in div-Element Sat, 09 Mar 19 00:52:59 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744081#m1744081 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744081#m1744081 <p>@@Gunnar Bittersmann</p> <blockquote> <blockquote> <p>Wenn man den <code>home</code>-Abschnitt grundsätzlich sichtbar macht, wie will man es bei einem direkt angewählten anderen Bereich rein mit CSS wieder unsichtbar machen?</p> </blockquote> <p>Ich behaupte mal ganz keck: gar nicht.</p> </blockquote> <p>Ich nehm’s zurück und behaupte das Gegenteil.</p> <p>Der Trick ist, alle Bereiche übereinanderzulegen – in dieselbe Grid-Zelle – und den <em>ersten</em> Bereich nicht auszublenden, sondern alle anderen – und das nur in Grid unterstützenden Browsern (<em lang="en">feature query</em> <code>@supports (display: grid)</code>).</p> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/JzJYzw" rel="noopener noreferrer">Grid-Variante</a> </p> <blockquote> <p>Man muss deine Frage <em>Ist meine rein CSS-basierten Lösung nicht die überlegenere Lösung?</em> wohl mit einem klaren Nein beantworten.</p> </blockquote> <p>Das nehme ich allerdings nicht zurück. <a href="https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744080#m1744080" rel="noopener noreferrer">Aus Gründen.</a></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> javascript funktion .load html -> in div-Element Sat, 09 Mar 19 10:37:33 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744106#m1744106 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744106#m1744106 <p>Hallo Gunnar,</p> <blockquote> <p>wenn CSS nicht interpretiert wird.</p> </blockquote> <p>diesen Satz habe ich jetzt schon ein paar mal gelesen und ich frage mich: Wie? Außer, dass das CSS extern ist und nicht geladen wird. Dem kann man aber begegnen, indem man die für das Einblenden relevanten CSS Teile in den <head> der Seite verlegt; so viel ist das ja nicht.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> javascript funktion .load html -> in div-Element Sat, 09 Mar 19 08:41:48 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744094#m1744094 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744094#m1744094 <p>@@Gunnar Bittersmann</p> <blockquote> <p>Der Trick ist, alle Bereiche übereinanderzulegen – in dieselbe Grid-Zelle – und den <em>ersten</em> Bereich nicht auszublenden, sondern alle anderen – und das nur in Grid unterstützenden Browsern (<em lang="en">feature query</em> <code>@supports (display: grid)</code>).</p> </blockquote> <p>Braucht man gar nicht, wenn man nicht mit <code>display: none</code> ausblendet, sondern den jeweils anzuzeigenden Bereich mit <code>z-index</code> nach vorne holt. Dann sollte das auch in IE 10 und 11 funktionieren, die Grid (eingeschränkt; mit Präfix) unterstützen, aber nicht <code>@supports</code>.</p> <p>☞ <a href="https://codepen.io/gunnarbittersmann/pen/LaLxpm" rel="noopener noreferrer">Grid-Variante 2</a> (ungetestet in IE)</p> <p>„Funktionieren“ mit der Einschränkung, dass die gesamte Lösung aus Gründen nicht funktioniert.</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> javascript funktion .load html -> in div-Element Sat, 09 Mar 19 10:00:09 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744102#m1744102 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744102#m1744102 <p>@@Gunnar Bittersmann</p> <blockquote> <p>Braucht man gar nicht, wenn man nicht mit <code>display: none</code> ausblendet, sondern den jeweils anzuzeigenden Bereich mit <code>z-index</code> nach vorne holt.</p> </blockquote> <p>Was auch keine so gute Idee ist. Vor Screenreadern wären die Bereiche nicht versteckt; es würde etwas vorgelesen werden, was gar nicht auf dem Bildschirm zu sehen ist. Nicht machen!</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> javascript funktion .load html -> in div-Element Sat, 09 Mar 19 20:25:37 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744145#m1744145 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744145#m1744145 <p>@@Rolf B</p> <blockquote> <blockquote> <p>wenn CSS nicht interpretiert wird.</p> </blockquote> <p>diesen Satz habe ich jetzt schon ein paar mal gelesen und ich frage mich: Wie? Außer, dass das CSS extern ist und nicht geladen wird.</p> </blockquote> <ul> <li>Der Nutzer stellt CSS in ihrem Browser komplett aus.</li> <li>Der Browser ist ein Textbrowser wie Lynx.</li> </ul> <p>Fundamentale Dinge wie <code>display: none</code> wird vielleicht auch ein Textbrowser interpretieren? Änderungen von z-Indizes sicherlich nicht.</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> javascript funktion .load html -> in div-Element Sat, 09 Mar 19 22:16:46 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744148#m1744148 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744148#m1744148 <p>Hallo Gunnar,</p> <p>ok, das kann ich tatsächlich im Brandfuchs via Menü tun und in Chrome via Extension. Aber warum sollte man das tun, außer um zu testen wie die Seite aussieht wenn eine CSS Datei nicht ankommt? Und warum sollte man das dann SO tun, und die Inlinestile mit töten, statt die CSS Datei umzubenennen?</p> <p>Lync ist dagegen was anderes. Aber wer verwendet den noch? Selbst als Testbasis für sehbehinderte Menschen wird er nicht mehr empfohlen (sagt Wikipedia).</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> javascript funktion .load html -> in div-Element Sat, 09 Mar 19 22:39:37 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744149#m1744149 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744149#m1744149 <p>@@Rolf B</p> <blockquote> <p>Aber warum sollte man das tun …?<br> Aber wer verwendet den noch?</p> </blockquote> <p>Ich finde die Fragen müßig. Nutzer, die das tun oder den Browser verwenden, auszuschließen ist das Gegenteil von <em>inklusivem Design</em>.</p> <p>HTML ist die Grundlage; eine Seite sollte mit ausschließlich HTML schon funktionieren. Styling ist <em lang="en">progressive enhancement</em>.</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> javascript funktion .load html -> in div-Element Sun, 10 Mar 19 10:14:02 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744165#m1744165 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744165#m1744165 <p>Lieber Lars,</p> <blockquote> <p>Das ist ja eines meiner "Probleme" ich kann nicht gleich den gesamten Seiteninhalt laden. Das ist auch der Grund warum ich php benutze wie du ja schon angemerkt hast. Mein Inhalte werden via php dynamisch generiert, da sie zum grösten Teil aus einer Datenbank kommen.</p> </blockquote> <p>und wo ist nun das Problem? Warum willst Du nicht die Seite selbst neu laden müssen? Jetzt rück' doch mal wirklich mit dem wichtigen Kram heraus!</p> <ol> <li>User kommt "auf die Seite". Dort findet er Links zu Herstellern</li> <li>User klickt auf einen Link, der zu einer Unterseite mit einem bestimmten Hersteller führt.</li> </ol> <p>Wo hast Du hier das Bedürfnis, nur einen Teil der Seite inhaltlich zu aktualisieren? Und warum kannst Du mit PHP nicht einfach die Unterseite mit allen ihren Bestandteilen wieder zusammenstellen? Und warum sollte das weniger wünschenswert sein, als nur einen Teil mit clientseitiger Technik (JavaScript ist etwas anderes als Java!) auszutauschen?</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> javascript funktion .load html -> in div-Element Sun, 10 Mar 19 11:43:58 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744175#m1744175 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744175#m1744175 <p>Moin,</p> <blockquote> <p>Wo hast Du hier das Bedürfnis, nur einen Teil der Seite inhaltlich zu aktualisieren? Und warum kannst Du mit PHP nicht einfach die Unterseite mit allen ihren Bestandteilen wieder zusammenstellen? Und warum sollte das weniger wünschenswert sein, als nur einen Teil mit clientseitiger Technik (JavaScript ist etwas anderes als Java!) auszutauschen?</p> </blockquote> <ul> <li>um Traffic zu sparen?</li> <li>Seiteninhalt schneller ausliefern zu können?</li> <li>Nicht gespeicherte User Eingaben zu verlieren?</li> <li>geile Übergänge?</li> </ul> <p>Da fällt mir einiges ein.</p> javascript funktion .load html -> in div-Element Sun, 10 Mar 19 15:48:18 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744183#m1744183 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744183#m1744183 <p>Hallo Felix,</p> <p>einige Gründe hat ja Bernd schon genannt, warum ich nicht jedes mal die ganze Seite neu aufbauen will. Dazu kommt, wenn die Verzweigung immer tiefer geht …</p> <p>Hersteller -> Artikel des Hersteller -> Eizelteile des Artikel usw.</p> <p>dann werden es irgendwann unendlich viele Parameter die ich übergeben muss und beim Neuaufbau der Seite berücksichtigen muss.</p> <p>Es tut mir leid wenn ich dich mit meinen Fragen etwas nerve ( hab beinahe das Gefühl :( ), aber ich wollte ja auch keine fertige Lösung für meine Seite sondern nur einen Denkanstoß, wie von den anderen in Richtung target/fetch etc. Ich bin ja bereit mich dann weiter zu belesen und es selber raus zu finden.</p> <p>Es wäre halt aus meiner Sicht besser nur den Teil der Seite zu aktualisieren, welcher auch aktualisiert werden muss und hier wollte ich nur wissen ob es da Möglichkeiten gibt ( gerne ohne java/javascript ). Mein Denken geht in die Richtung ( vielleicht blödes Beispiel ) ... wenn ich den Sitzbezugs eines Auto wechseln will, baue ich das Auto ja auch nicht von Grund neu auf.</p> <p>Ich hoffe auch wir reden hier nicht irgendwie aneinander vorbei!?</p> <p>Grüße Lars</p> javascript funktion .load html -> in div-Element Sun, 10 Mar 19 21:15:01 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744193#m1744193 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744193#m1744193 <p>@@Bernd</p> <blockquote> <blockquote> <p>Wo hast Du hier das Bedürfnis, nur einen Teil der Seite inhaltlich zu aktualisieren? Und warum kannst Du mit PHP nicht einfach die Unterseite mit allen ihren Bestandteilen wieder zusammenstellen? Und warum sollte das weniger wünschenswert sein, als nur einen Teil mit clientseitiger Technik (JavaScript ist etwas anderes als Java!) auszutauschen?</p> </blockquote> <ul lang="en"> <li>um Traffic zu sparen?</li> <li>Seiteninhalt schneller ausliefern zu können?</li> </ul> </blockquote> <p><em>“Things to avoid: Assuming Ajax always delivers a faster and better user experience”</em> —Adam Silver in <a href="https://www.smashingmagazine.com/printed-books/form-design-patterns/" rel="nofollow noopener noreferrer">Form Design Patterns</a></p> <p>Sagte ich schon, dass dieses Buch in der Bibliothek eines Webentwicklers nicht fehlen sollte?</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> javascript funktion .load html -> in div-Element Sun, 10 Mar 19 18:45:29 Z https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744189#m1744189 https://forum.selfhtml.org/self/2019/mar/8/javascript-funktion-load-html-in-div-element/1744189#m1744189 <p>Hallo Sassl,</p> <blockquote> <p>dann werden es irgendwann unendlich viele Parameter die ich übergeben muss und beim Neuaufbau der Seite berücksichtigen muss.</p> </blockquote> <p>Ich habe zwei schlechte Nachrichten für Dich:</p> <ol> <li> <p>Das wird bei einer Ajax-Seite nicht einfacher. Die Komplexität der Business-Logik hängt eher nicht von der verwendeten Technologie ab.</p> </li> <li> <p>Was machst Du mit Leuten, die JavaScript deaktiviert haben? Willst Du die von der Nutzung deiner Seite ausschließen? Ajax kann immer nur ein <em>Progressive Enhancement</em> sein, aber niemals die einzige Lösung. Was Du bisher genannt hast: Hersteller / Artikel / Einzelteil - das sind 3 IDs, mehr nicht, das ist noch gut zu handhaben. Dann kommt noch der Punkt des Deeplinking. Eine per Ajax aktualisierte SPA<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> sollte über Hash-URLs ihren Zustand darstellen, damit man auf eine bestimmte Ansicht einen Favoriten setzen kann (z.B. http://example.org/showData#Brumm,Mk2-2015,Hinterachse. In der Nicht-Javascript-Version kannst Du die Parameter nicht hinter den Hash stellen (weil der nicht am Server ankommt), darum sollte der Link ähnlich aussehen, z.B. so: http://example.org/showData/Brumm/Mk2-2015/Hinterachse oder so: http://example.org/showData?marke=Brumm&modell=Mk2-2015&teil=Hinterachse.</p> </li> </ol> <p>Serverseitig ist wichtig, dass Du den Code, der die Daten für diese Levels bereitstellst, gut isolierst. Für einen Ajax-Betrieb ist wichtig, dass Du bspw. den Code für die Darstellung der Informationen zu einem Hersteller eigenständig nutzen kannst, so dass Du den Herstellerdatenblock wahlweise in einem kompletten Seitenneuaufbau und in einem Ajax-Request verwenden kannst.</p> <p>Trivial wird es in keinem Fall.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Single Page Application <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section>