tag:forum.selfhtml.org,2005:/self Komme mit Jquery UI Dialog nicht recht klar – SELFHTML-Forum 2017-10-19T10:05:40Z https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706452#m1706452 Pit 2017-10-18T15:53:44Z 2017-10-18T15:53:44Z Komme mit Jquery UI Dialog nicht recht klar <p>Hallo Forum,</p> <p>ich habe ein Jquery UI Dialog Problem. (Kurz vorab gesagt, ich habe noch nie mit UI-Dialog gearbeitet)</p> <p>Und zwar möchte ich innerhalb einer Tabelle beim Klick auf eine Tabellenzelle (bzw. ein Backgroundimage innerhalb der Zelle) einen Dialog öffnen.</p> <p>Problem Nr1: Wo hänge ich den onclick-Eventhamndler an? Ich dachte schonmal daran, der Tabellenzelle eine eindeutige ID zu geben (über xy-Achse) und zugleich eine Klasse zuzuordnen. Und dann an die Klasse das onclick-Event binden?</p> <p>Problem Nr.2: Innerhalb des zu öffnenden Dialoges soll ein Formular sein, das ich dann absenden kann. Das Formular soll als "hidden input" die ID der Tabellenzelle beinhalten. Sehe ich das korrekt, dass ich das serverseitig gar nicht hin bekomme, sondern nur über den Client schaffe? Ich meine, ich will ja nicht unzählige Formulare vorbereiten (in der Schleife), sondern möglichst nur eines.</p> <p>Pit</p> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706453#m1706453 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-10-18T15:57:06Z 2017-10-18T15:57:06Z Komme mit Jquery UI Dialog nicht recht klar <p>Hallo Pit,</p> <p>Lies mal <a href="https://forum.selfhtml.org/self/2017/oct/17/nummerierung-bei-dynamischen-formular/1706365#m1706365" rel="noopener noreferrer">dies</a>. Einige der Antworten könnten für dich hilfreich sein.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706456#m1706456 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-10-18T16:33:27Z 2017-10-18T16:33:27Z Komme mit Jquery UI Dialog nicht recht klar <p>@@Pit</p> <blockquote> <p>Und zwar möchte ich innerhalb einer Tabelle beim Klick auf eine Tabellenzelle (bzw. ein Backgroundimage innerhalb der Zelle) einen Dialog öffnen.</p> </blockquote> <p>Auf Tabellenzellen kann man (im Sinne von: jeder) nicht clicken. Auf Buttons schon.</p> <blockquote> <p>Problem Nr1: Wo hänge ich den onclick-Eventhamndler an?</p> </blockquote> <p>An das <code>button</code>-Element in der jeweiligen Tabellenzelle.</p> <p>Oder besser mit <strong lang="en">event delegation</strong>: An das <code>table</code>-Element. Innerhalb des Eventhandlers fragst du ab, welcher Button das Event ausgelöst hat.</p> <blockquote> <p>Ich dachte schonmal daran, der Tabellenzelle eine eindeutige ID zu geben (über xy-Achse) und zugleich eine Klasse zuzuordnen. Und dann an die Klasse das onclick-Event binden?</p> </blockquote> <p><a href="https://www.sitepoint.com/event-delegation-with-jquery/" rel="nofollow noopener noreferrer">Event Delegation with jQuery</a> | <a href="https://learn.jquery.com/events/event-delegation/" rel="nofollow noopener noreferrer">Understanding Event Delegation</a></p> <blockquote> <p>Problem Nr.2: Innerhalb des zu öffnenden Dialoges soll ein Formular sein, das ich dann absenden kann. Das Formular soll als "hidden input" die ID der Tabellenzelle beinhalten. Sehe ich das korrekt, dass ich das serverseitig gar nicht hin bekomme, sondern nur über den Client schaffe? Ich meine, ich will ja nicht unzählige Formulare vorbereiten (in der Schleife), sondern möglichst nur eines.</p> </blockquote> <p>Bei <em lang="en">event delegation</em> hast du ja den Button und damit auch dessen Tabellenzelle.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706461#m1706461 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-10-18T17:34:16Z 2017-10-18T17:34:16Z Komme mit Jquery UI Dialog nicht recht klar <p>@@Pit</p> <blockquote> <p>Problem Nr.2: Innerhalb des zu öffnenden Dialoges soll ein Formular sein, das ich dann absenden kann. Das Formular soll als "hidden input" die ID der Tabellenzelle beinhalten. Sehe ich das korrekt, dass ich das serverseitig gar nicht hin bekomme, sondern nur über den Client schaffe? Ich meine, ich will ja nicht unzählige Formulare vorbereiten (in der Schleife), sondern möglichst nur eines.</p> </blockquote> <p>Warum eigentlich?</p> <p>Wenn du in jeder Zelle ein Formular hast, brauchst du kein JavaScript. ☞ <a href="https://codepen.io/gunnarbittersmann/pen/WZLVMG" rel="noopener noreferrer">Beispiel</a></p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706454#m1706454 Pit 2017-10-18T16:25:52Z 2017-10-18T16:25:52Z Komme mit Jquery UI Dialog nicht recht klar <p>Hallo Mathias,</p> <p>da gehts aber um ein anderes Problem. Meine Tabelle ist rein php-dynamisch, d.h. die IDs der Tabellenzellen ist auch php-Sache.</p> <p>Im Grunde gehts doch nur darum, wie der zu öffnende Dialog an die ZellenID kommt, was ich jetzt auch nicht so schwer finde, dass ich mich durch anderer Leute Probleme wälzen muß, wo es eher darum geht, ein JS-dynamisches Formular zu nummerieren.</p> <p>Pit</p> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706457#m1706457 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-10-18T16:35:18Z 2017-10-18T16:35:18Z Komme mit Jquery UI Dialog nicht recht klar <p>@@Matthias Apsel</p> <blockquote> <p>Lies mal <a href="https://forum.selfhtml.org/self/2017/oct/17/nummerierung-bei-dynamischen-formular/1706365#m1706365" rel="noopener noreferrer">dies</a>. Einige der Antworten könnten für dich hilfreich sein.</p> </blockquote> <p>In jenem Thread finde ich beim Überfliegen weder den Hinweis, dass man keine <code>click</code>-Handler für nicht-interaktive Elemente registrieren soll, noch den Hinweis auf <em lang="en">event delegation</em>.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706459#m1706459 Pit 2017-10-18T16:53:39Z 2017-10-18T16:53:39Z Komme mit Jquery UI Dialog nicht recht klar <p>Hi Gunnar,</p> <p>jep, genau sowas suche ich. Ich dachte mir schon, dass es im Grunde um die Selection geht. Jetzt studiere ich die beiden Links und frage dann nochmal, wenn es sich nicht von selber klärt.</p> <p>Wobei, miene Frage 2 bleibt ja eigentlich offen: Ist es am sinnvollsten, die ID per JS ins Formular zu packen? Bzw., IMHO gehts gar nicht anders, oder?</p> <p>Pit</p> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706469#m1706469 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2017-10-18T18:35:59Z 2017-10-18T18:35:59Z Komme mit Jquery UI Dialog nicht recht klar <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>In jenem Thread finde ich beim Überfliegen weder den Hinweis, dass man keine <code>click</code>-Handler für nicht-interaktive Elemente registrieren soll, noch den Hinweis auf <em lang="en">event delegation</em>.</p> </blockquote> <p>Unterhalb der sich um die Waden wickelnden Fallstricke.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706462#m1706462 Pit 2017-10-18T17:37:37Z 2017-10-18T17:37:37Z Komme mit Jquery UI Dialog nicht recht klar <p>Nein, Gunnar,</p> <p>ich habe nur 1 Formular. Aber in diesem benötige ich die ID des Buttons der Zelle, die das Formular aufgerufen hat.</p> <p>Ich schau grad in die <a href="http://api.jqueryui.com/dialog/" rel="nofollow noopener noreferrer">API von dialog</a>, aber bin n och nicht fündig geworden…</p> <p>Das Aufrufen mittels Event Delegation klappt indes bereits wunderbar.</p> <p>Pit</p> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706464#m1706464 Pit 2017-10-18T17:59:58Z 2017-10-18T17:59:58Z Komme mit Jquery UI Dialog nicht recht klar <blockquote> <p>Ich schau grad in die <a href="http://api.jqueryui.com/dialog/" rel="nofollow noopener noreferrer">API von dialog</a>, aber bin n och nicht fündig geworden…</p> </blockquote> <p>Was auch gar nicht nötig war. Ich kann die ID schlicht beim Ausführen des event delegierten Onclicks bereits anhängen, das passt.</p> <p>Danke für die Hilfe, Pit</p> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706467#m1706467 Rolf B 2017-10-18T18:29:19Z 2017-10-18T18:30:52Z Komme mit Jquery UI Dialog nicht recht klar <p>Hallo Pit,</p> <p>na, dann hab ich mir <a href="https://jsfiddle.net/jwx4qwpk/" rel="noopener noreferrer">die Mühe</a> ja umsonst gemacht </p> <p>Der Dialog im Fiddle enthält ein input Feld, dem ich zur Zeit type="xhidden" gegeben habe. Das ist natürlich zur, damit man was sieht - im Betrieb ist das type="hidden" und sendet beim Submit des Forms die Zeile und Spalte zum Server.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706472#m1706472 Pit 2017-10-18T18:46:44Z 2017-10-18T18:46:44Z Komme mit Jquery UI Dialog nicht recht klar <p>Hallo Rolf,</p> <p>autsch... das tut mir leid, dennoch danke an Dich.</p> <p>Aber ganz ehrlich, meine Lösung ist viel simpler:</p> <pre><code class="block language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#tw'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'img, a, button'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><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">'#myId'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token string">'Laufende ID: '</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">'#dialog-message'</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">dialog</span><span class="token punctuation">(</span> <span class="token string">'open'</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> </code></pre> <p>Das wars schon </p> <p>Pit</p> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706475#m1706475 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-10-18T18:54:34Z 2017-10-18T18:54:34Z Komme mit Jquery UI Dialog nicht recht klar <p>@@Pit</p> <blockquote> <pre><code class="block language-javascript"> <span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'img, a, button'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> </code></pre> </blockquote> <p>Was soll das denn? Das sollte wohl</p> <pre><code class="block language-javascript"> <span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'button'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> </code></pre> <p>sein. Buttons sind die <em lang="en">event targets</em>, nichts anderes.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706478#m1706478 Pit 2017-10-18T19:09:57Z 2017-10-18T19:09:57Z Komme mit Jquery UI Dialog nicht recht klar <p>Hi Gunar,</p> <p>dann muß ich wohl <a href="https://www.sitepoint.com/event-delegation-with-jquery/" rel="nofollow noopener noreferrer">den Artikel</a>, den mir ein wohlverdientes <a href="https://forum.selfhtml.org/users/20" rel="noopener noreferrer">Forenmitglied</a> hier geschrieben hat, missverstanden haben ;)</p> <p>Pit</p> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706479#m1706479 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-10-18T19:18:41Z 2017-10-18T19:18:41Z Komme mit Jquery UI Dialog nicht recht klar <p>@@Pit</p> <blockquote> <p>dann muß ich wohl <a href="https://www.sitepoint.com/event-delegation-with-jquery/" rel="nofollow noopener noreferrer">den Artikel</a>, den mir ein wohlverdientes <a href="https://forum.selfhtml.org/users/20" rel="noopener noreferrer">Forenmitglied</a> hier geschrieben hat, missverstanden haben ;)</p> </blockquote> <p>Oder den <code>selector</code>-Parameter der <a href="http://api.jquery.com/on/" rel="nofollow noopener noreferrer"><code>on()</code>-Methode</a>.</p> <p>Wenn du auf Events ausschließlich von <code>button</code>-Elementen lauschen willst, macht es keinen Sinn, da auch noch <code>a</code> und <code>img</code> anzugeben.</p> <p>Dass <code>img</code> i.d.R. sowieso keinen Sinn macht, weil man (im Sinne von: jeder) auf Bilder nicht clicken kann, sagte ich ja schon.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706481#m1706481 Pit 2017-10-18T19:28:27Z 2017-10-18T19:28:27Z Komme mit Jquery UI Dialog nicht recht klar <p>Hi Gunnar,</p> <blockquote> <p>Wenn du auf Events ausschließlich von <code>button</code>-Elementen lauschen willst, macht es keinen Sinn, da auch noch <code>a</code> und <code>img</code> anzugeben.</p> </blockquote> <p>Wer hat denn behauptet, dass ich nur Button-Elementen lauschen wil? Ich sicher nicnht, ich lausche auch anderen Elementen.</p> <blockquote> <p>Dass <code>img</code> i.d.R. sowieso keinen Sinn macht, weil man (im Sinne von: jeder) auf Bilder nicht clicken kann, sagte ich ja schon.</p> </blockquote> <p>Warum kann man das nicht? Entsprechend formatiert sollte das doch gehen, oder?</p> <p>Pit</p> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706482#m1706482 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-10-18T19:31:06Z 2017-10-18T19:31:06Z Komme mit Jquery UI Dialog nicht recht klar <p>@@Pit</p> <blockquote> <blockquote> <p>Dass <code>img</code> i.d.R. sowieso keinen Sinn macht, weil man (im Sinne von: jeder) auf Bilder nicht clicken kann, sagte ich ja schon.</p> </blockquote> <p>Warum kann man das nicht? Entsprechend formatiert sollte das doch gehen, oder?</p> </blockquote> <p><a href="https://forum.selfhtml.org/self/2016/dec/14/per-css-oder-javascript-automatisch-code-an-div-anhaengen/1682538#m1682538" rel="noopener noreferrer">Nein.</a></p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706483#m1706483 Pit 2017-10-18T19:57:58Z 2017-10-18T19:57:58Z Komme mit Jquery UI Dialog nicht recht klar <blockquote> <p><a href="https://forum.selfhtml.org/self/2016/dec/14/per-css-oder-javascript-automatisch-code-an-div-anhaengen/1682538#m1682538" rel="noopener noreferrer">Nein.</a></p> </blockquote> <p>Na ok, überzeugt, dann werde ich das ändern. Gibt es denn irgendwo eine Auflistiung, welche Elemente in diesem Kontext nutzbar sind und welche nicht? Meine letzte Erinnerung hieran war, dass das img-Element nutzbar wäre. Wenns nun aber nicht "durchbedienbar" ist, macht es tatsächlich keinen Sinn.</p> <p>Pit</p> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706484#m1706484 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-10-18T20:02:40Z 2017-10-18T20:02:40Z Komme mit Jquery UI Dialog nicht recht klar <p>@@Pit</p> <blockquote> <p>Gibt es denn irgendwo eine Auflistiung, welche Elemente in diesem Kontext nutzbar sind und welche nicht?</p> </blockquote> <p>Was genau meinst du denn mit „diesem Kontext“?</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706486#m1706486 Pit 2017-10-18T20:18:05Z 2017-10-18T20:18:05Z Komme mit Jquery UI Dialog nicht recht klar <p>Na, an welche Elemente kann ich denn bedenkenlos ein onclick-event binden, damit es durchgämgig bedienbar bleibt, unabhängig vom Endgerät?</p> <p>Pit</p> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706487#m1706487 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-10-18T20:40:55Z 2017-10-18T20:40:55Z Komme mit Jquery UI Dialog nicht recht klar <p>@@Pit</p> <blockquote> <p>Na, an welche Elemente kann ich denn bedenkenlos ein onclick-event binden, damit es durchgämgig bedienbar bleibt, unabhängig vom Endgerät?</p> </blockquote> <p>☞ <a href="https://w3c.github.io/html/dom.html#interactive-content" rel="nofollow noopener noreferrer">interactive content</a></p> <p>Was nicht heißt, dass man diese wahllos einsetzen sollte. Auf den Unterschied zwischen <code>button</code> und <code>a</code> hatte ich ja schon hingewiesen.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/oct/18/komme-mit-jquery-ui-dialog-nicht-recht-klar/1706497#m1706497 Rolf B 2017-10-19T10:05:40Z 2017-10-19T10:05:40Z Komme mit Jquery UI Dialog nicht recht klar <p>Hallo Pit,</p> <p>hast Du mein Fiddle genauer angeschaut? Da war jede Tabellenzelle ein Button…</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div>