Benutzer-Auswahl-Dialog erstellen

A

antimon

Mitglied
Hallo zusammen,

ich code eine Webanwendung mit jQuery und Bootstrap und stehe nun vor einem Problem, bei dem ich einfach keinen vernünftigen Lösungsansatz komme. Vielleicht habt Ihr einen Wink mit dem Zaunpfahl für mich... ;)

Ich möchte ein Input-Feld mit einem Wert aus einem Auswahldialog befüllen, dazu soll neben dem Input ein typischer "..." Button angezeigt werden, bei dem ein Dialogfenster aufgeht. In diesem gibt es dann eine Tabelle mit allen Werten, ich kann einen anklicken und dann wird das Dialogfenster geschlossen und der Wert wird in das Inputfeld eingefügt.

Mein erstes Problem ist: Wie legt man so einen Dialog idealerweise an? Durch meinen Hintergrund in der Java- und PHP-Entwicklung denke ich gerne klassenbasiert. Ich würde also eine UI-Klasse erstellen, die sich um das allgemeine Handling des Dialoges kümmert (OK / Abbrechen-Buttons, Öffnen/Schliessen, etc.). Dann gibt es eine abgeleitete Klasse, z.B. UsersUI oder GroupsUI, die dann die spezifischen Inhalte laden und bereitstellen. Ist die Denkweise auch bei JavaScript sinnvoll, oder gibt es da bessere Ansätze?

Angenommen, das mit den Klassen würde so passen - ich instanziere also eine UsersUI, wenn ich einen Benutzerdialog haben möchte. Wie bekomme ich dann den "..."-Button dazu, das Dialogfenster zu öffnen? Gebe ich beim Instanzieren der UI-Klasse die ID des Buttons mit? Oder das per $('#id') ausgewählte Objekt? Und die Klasse legt dann selbstständig den Click-Listener auf den Button? Oder wäre da eine andere Vorgehensweise besser?

Und wie sorge ich dafür, dass der im Dialog ausgewählte Wert in das Input-Feld kommt? Indem ich das Input-Feld wie eben beschrieben per ID oder als Objekt beim Instanzieren übergebe? Oder sollte ich lieber eine Callback-Funktion übergeben, die dann den selektierten Wert bekommt und dann das Input-Feld befüllt?

Ich glaube, ich komme mit dem Event-basierten System noch nicht so ganz zurecht, deswegen würde ich mich sehr über eure Tips und Anregungen freuen!
 
Meine Meinung zu jQuery und Bootstrap:
Should I learn Bootstrap?
Should I learn jQuery?

Ich möchte ein Input-Feld mit einem Wert aus einem Auswahldialog befüllen, dazu soll neben dem Input ein typischer "..." Button angezeigt werden, bei dem ein Dialogfenster aufgeht. In diesem gibt es dann eine Tabelle mit allen Werten, ich kann einen anklicken und dann wird das Dialogfenster geschlossen und der Wert wird in das Inputfeld eingefügt.
...
Und wie sorge ich dafür, dass der im Dialog ausgewählte Wert in das Input-Feld kommt? Indem ich das Input-Feld wie eben beschrieben per ID oder als Objekt beim Instanzieren übergebe? Oder sollte ich lieber eine Callback-Funktion übergeben, die dann den selektierten Wert bekommt und dann das Input-Feld befüllt?
Zum Vergrößern anklicken....
Ich denke, dies kannst Du viel einfacher mit einem Select-Element erreichen: Es stellt eine Auswahlliste zur Verfügung und der ausgewählte Wert steht als value zur Verfügung, sowohl für Javascript als auch für PHP, falls Du das in einem Formular verwendest.
 
Prinzipiell hast du Recht - das wäre einfacher. Aber da ich noch filtern können muss, eine Mehrfach-Selektion dazukommen soll usw. ist eine Selectbox leider "zu wenig".

Vermutlich klingt meine Frage danach, als wäre ich ein blutiger JavaScript-Anfänger. Dem ist nicht ganz so, die Tabellen, die dann die Benutzer anzeigen, filtern, dynamisch nachladen etc. existieren und funktionieren einwandfrei.

Ich glaube auch nur, dass meine Herangehensweise suboptimal ist. In einer "linearen" PHP-Welt funktioniert halt alles ein wenig anders... ;)

Als Vorbild finde ich übrigens die Auswahldialoge von Zabbix optimal. Dort kann man z.B. auch ein oder mehrere Templates per Dialog auswählen, diese werden dann in das entsprechende Feld eingefügt.
Leider ist es mir ein "Reverse Enigneering" bislang nicht gelungen - da spielen wohl ziemlich viele Klassen mit, die das Ganze unübersichtlich machen...
 
Achso und zu den Fragen, ob man Bootstrap/jQuery lernen soll... ich nutze beides bereits seit Jahren und kann teilweise zustimmen - aber eben nur teilweise.
Bootstrap ist in meiner Applikation nicht nur für das Layouting einzelner Elemente zuständig, ich nutze auch intensiv die Design-Elemente. Und das macht (mir) mit Vanilla CSS einfach keinen Spaß. Ich will mich auf die Applikations-Logik konzentrieren, ich bin kein Designer. Wer selbst Hand anlegen möchte, gerne... ;)
Und jQuery: Auch da kann Vanilla JS mittlerweile mehr - aber allein die ganzen Plugins sind top. Dass Elemente wie "closest()" mittlerweile nativ verfügbar sind ist für mich nur ein kleines Argument gegen das Framework...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück