Komme mit Jquery UI Dialog nicht recht klar

[Pit]

Hallo Forum,

ich habe ein Jquery UI Dialog Problem. (Kurz vorab gesagt, ich habe noch nie mit UI-Dialog gearbeitet)

Und zwar möchte ich innerhalb einer Tabelle beim Klick auf eine Tabellenzelle (bzw. ein Backgroundimage innerhalb der Zelle) einen Dialog öffnen.

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?

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.

Pit

[Matthias Apsel]

Hallo Pit,

Lies mal dies. Einige der Antworten könnten für dich hilfreich sein.

Bis demnächst
Matthias

[Pit]

Hallo Mathias,

da gehts aber um ein anderes Problem. Meine Tabelle ist rein php-dynamisch, d.h. die IDs der Tabellenzellen ist auch php-Sache.

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.

Pit

[Gunnar Bittersmann]

@@Matthias Apsel

Lies mal dies. Einige der Antworten könnten für dich hilfreich sein.

In jenem Thread finde ich beim Überfliegen weder den Hinweis, dass man keine click-Handler für nicht-interaktive Elemente registrieren soll, noch den Hinweis auf event delegation.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

In jenem Thread finde ich beim Überfliegen weder den Hinweis, dass man keine click-Handler für nicht-interaktive Elemente registrieren soll, noch den Hinweis auf event delegation.

Unterhalb der sich um die Waden wickelnden Fallstricke.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Pit

Und zwar möchte ich innerhalb einer Tabelle beim Klick auf eine Tabellenzelle (bzw. ein Backgroundimage innerhalb der Zelle) einen Dialog öffnen.

Auf Tabellenzellen kann man (im Sinne von: jeder) nicht clicken. Auf Buttons schon.

Problem Nr1: Wo hänge ich den onclick-Eventhamndler an?

An das button-Element in der jeweiligen Tabellenzelle.

Oder besser mit event delegation: An das table-Element. Innerhalb des Eventhandlers fragst du ab, welcher Button das Event ausgelöst hat.

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?

Event Delegation with jQuery | Understanding Event Delegation

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.

Bei event delegation hast du ja den Button und damit auch dessen Tabellenzelle.

LLAP 🖖

[Pit]

Hi Gunnar,

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.

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?

Pit

[Gunnar Bittersmann]

@@Pit

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.

Warum eigentlich?

Wenn du in jeder Zelle ein Formular hast, brauchst du kein JavaScript. ☞ Beispiel

LLAP 🖖

[Pit]

Nein, Gunnar,

ich habe nur 1 Formular. Aber in diesem benötige ich die ID des Buttons der Zelle, die das Formular aufgerufen hat.

Ich schau grad in die API von dialog, aber bin n och nicht fündig geworden…

Das Aufrufen mittels Event Delegation klappt indes bereits wunderbar.

Pit

[Pit]

Ich schau grad in die API von dialog, aber bin n och nicht fündig geworden…

Was auch gar nicht nötig war. Ich kann die ID schlicht beim Ausführen des event delegierten Onclicks bereits anhängen, das passt.

Danke für die Hilfe, Pit

[Rolf B]

Hallo Pit,

na, dann hab ich mir die Mühe ja umsonst gemacht 😉

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.

Rolf

[Pit]

Hallo Rolf,

autsch... das tut mir leid, dennoch danke an Dich.

Aber ganz ehrlich, meine Lösung ist viel simpler:

$('#tw')
    .on('click', 'img, a, button', function(event) {
      event.preventDefault();
	  $('#myId').html('Laufende ID: ' + this.id);
	  $( '#dialog-message' ).dialog( 'open' );
});

Das wars schon 😉

Pit

[Gunnar Bittersmann]

@@Pit

    .on('click', 'img, a, button', function(event) {

Was soll das denn? Das sollte wohl

    .on('click', 'button', function(event) {

sein. Buttons sind die event targets, nichts anderes.

LLAP 🖖

[Pit]

Hi Gunar,

dann muß ich wohl den Artikel, den mir ein wohlverdientes Forenmitglied hier geschrieben hat, missverstanden haben ;)

Pit

[Gunnar Bittersmann]

@@Pit

dann muß ich wohl den Artikel, den mir ein wohlverdientes Forenmitglied hier geschrieben hat, missverstanden haben ;)

Oder den selector-Parameter der on()-Methode.

Wenn du auf Events ausschließlich von button-Elementen lauschen willst, macht es keinen Sinn, da auch noch a und img anzugeben.

Dass img i.d.R. sowieso keinen Sinn macht, weil man (im Sinne von: jeder) auf Bilder nicht clicken kann, sagte ich ja schon.

LLAP 🖖

[Pit]

Hi Gunnar,

Wenn du auf Events ausschließlich von button-Elementen lauschen willst, macht es keinen Sinn, da auch noch a und img anzugeben.

Wer hat denn behauptet, dass ich nur Button-Elementen lauschen wil? Ich sicher nicnht, ich lausche auch anderen Elementen.

Dass img i.d.R. sowieso keinen Sinn macht, weil man (im Sinne von: jeder) auf Bilder nicht clicken kann, sagte ich ja schon.

Warum kann man das nicht? Entsprechend formatiert sollte das doch gehen, oder?

Pit

[Gunnar Bittersmann]

@@Pit

Dass img i.d.R. sowieso keinen Sinn macht, weil man (im Sinne von: jeder) auf Bilder nicht clicken kann, sagte ich ja schon.

Warum kann man das nicht? Entsprechend formatiert sollte das doch gehen, oder?

Nein.

LLAP 🖖

[Pit]

Nein.

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.

Pit

[Gunnar Bittersmann]

@@Pit

Gibt es denn irgendwo eine Auflistiung, welche Elemente in diesem Kontext nutzbar sind und welche nicht?

Was genau meinst du denn mit „diesem Kontext“?

LLAP 🖖

[Pit]

Na, an welche Elemente kann ich denn bedenkenlos ein onclick-event binden, damit es durchgämgig bedienbar bleibt, unabhängig vom Endgerät?

Pit

[Gunnar Bittersmann]

@@Pit

Na, an welche Elemente kann ich denn bedenkenlos ein onclick-event binden, damit es durchgämgig bedienbar bleibt, unabhängig vom Endgerät?

☞ interactive content

Was nicht heißt, dass man diese wahllos einsetzen sollte. Auf den Unterschied zwischen button und a hatte ich ja schon hingewiesen.

LLAP 🖖

[Rolf B]

Hallo Pit,

hast Du mein Fiddle genauer angeschaut? Da war jede Tabellenzelle ein Button…

Rolf