Tips zu Programmiertechnik gesucht

[Harald]

Hallo,

Ich möchte in ein HTML-Formular Daten nicht nur eintragen können, sondern auch per Klick aus einer Datenbanktabelle übernehmen können.

D.h., ich möchte sowohl das Formular als auch die Inhalte der Datenbaktabelle  bzw. der Ergebnissmenge einer Abfrage aus selbiger gleichzeitig darstellen.

Es sollen nach wie vor Inhalte auch manuell in das Formular eintragbar sein, aber es sollen auch Inhalte per Klick in das Formular aus dem "Tabellenteil" einfügbar sein. Sinnvollerweise sollte der Tabellenteil scrollbar sein, ohne das Formular jedes mal mitzuscrollen. Da das Formular zeilenweise immer wiederkehrende Einträge aufnimmt, bzw. nehmen können sollte, müssten auch mehrere hintereinander "angeklickte" Einträge aus dem Tabellenteil entsprechend in die Zeilen eingetragen werden.

Was ist hiefür eine für das Auge angenehme Darstellung, die technisch performant und up to date ist?

Früher hätte ich ganz spontan gesagt, 2 Frames, einer mit Tabelle, einer mit Formular und dazu ein Javascript, dass per Klick die Einträge in den Formularframe entsprechend einfügt.

Wäre sowas heute auch noch "des Weisheits letzter Schluss" oder gibt es da inzwischen schönere, sinnvollere oder modernere Lösungsansätze?

Bin für alle Tips dankbar.

Harald

[LX]

Hallo, Harald!

Frames zu nehmen, nur um Inhalte scrollbar zu machen, ist in Zeiten von CSS reichlich veraltet. Versuche stattdessen die CSS-Eigenschaft overflow: auto zusammen mit einer festen Höhe, die Du einem div mitgibst, welches um die Tabelle liegt.

Falls Du nicht sicher bist, wie Du die Tabelleninhalte in das Formular übernehmen sollst, suche nach .innerHTML zum Auslesen von Node-Inhalten und .value zum Einfügen in Formularelemente.

Gruß, LX

[Harald]

Hi LX,

Frames zu nehmen, nur um Inhalte scrollbar zu machen, ist in Zeiten von CSS reichlich veraltet.

Dacht ich mir schon.

Versuche stattdessen die CSS-Eigenschaft overflow: auto zusammen mit einer festen Höhe, die Du einem div mitgibst, welches um die Tabelle liegt.

Kann man diese feste Höhe auch an den Restinhalt der Gesamtseite anpassen? Also Höhe=100% oder so?

Falls Du nicht sicher bist, wie Du die Tabelleninhalte in das Formular übernehmen sollst, suche nach .innerHTML zum Auslesen von Node-Inhalten und .value zum Einfügen in Formularelemente.

Ich schau gleich mal rein. Danke bis hierhin schonmal.

Gruß, Harald

Gruß, LX

[LX]

Nochmal hallo, Harald.

Kann man diese feste Höhe auch an den Restinhalt der Gesamtseite anpassen? Also Höhe=100% oder so?

Ja, wobei der MSIE dabei mal wieder Probleme hat, denn der body skaliert sich automatisch auf die Höhe des gesamten Inhalts, nicht auf den des Viewports - damit sind die 100% genauso groß wie der Inhalt.

Eine scriptseitige Lösung setzt hier eine Funktion ein, die beim onresize-Event die Höhe des Elements über das .style.height-Attribut anpaßt. Tatsächlich habe ich erst vor kurzem für ein Adressbuch die Adressenliste auf diese Weise höhenmäßig eingeschränkt.

Gruß, LX

[Harald]

Ja, wobei der MSIE dabei mal wieder Probleme hat

Natürlich ;-)

Tatsächlich habe ich erst vor kurzem für ein Adressbuch die Adressenliste auf diese Weise höhenmäßig eingeschränkt.

_Das_ habe ich mir gerade mal ins Notizbüchlein notiert. *g*

Gruß, Harald

[Harald]

Hallo,

ist es zu verwegen gedacht, ein Iframe innerhalb eines DIV (wegen ein-und ausblenden) zu positionieren und die Werte aus diesem ins DIV eingebettete Iframe an das Formular im Hauptfenster zu übergeben?

Grüße, Harald

[LX]

Du machst es Dir damit nur unnötig schwerer, aber gehen würde es schon.

Gruß, LX

[Harald]

Du machst es Dir damit nur unnötig schwerer, aber gehen würde es schon.

Gruß, LX

Hallo LX,

ich dachte, ich machs mir damit leichter.

Meine Ziele:

• Formular nicht neu mitladen, auch wenn ich den Iframeinhalt ändere
• Iframe ein- und ausblenden können
• eigentlich alle schönen Dinge mit dem Iframe machen können, die auch mit jedem anderen DIV gehen
• aber nicht die Nachteile, dass der DIV-Inhalt einen Reload des hauptfensters benötigt und das ich jedesmal alle anderen Scriptparameter nochmal neu mit übergteben muss, nur weil sich der DIV-Inhalt ändert.

Ich glaube fast, ein Frame wäre mir genauso recht. Weil es dem User sogar (wenn ich will) ermöglichen würde, im Hauptfenster horizontal zu scrollen und die Hauptfensterbreite und Framebreite so einzustellen, wie es ihm grad wichtig ist.

Ist z.B. für mich ein Grund, heute noch mit phpmyadmin version 2.tobak zu arbeiten. Manchmal ist mehr einfach weniger.

Trotzdem bin ich offen für jeden Tip und jede Kritik. Also erkläre mir gerne, warum ich es mir zu schwer mache. Egal, ob Du Recht damit hast oder Unrecht. Ich kann nur davon profitieren, dass Du es mir erklärst.

Und bedanke mich im Vorraus

Grüße, Harald

[Der Martin]

Hallo,

Kann man diese feste Höhe auch an den Restinhalt der Gesamtseite anpassen? Also Höhe=100% oder so?
Ja, wobei der MSIE dabei mal wieder Probleme hat, denn der body skaliert sich automatisch auf die Höhe des gesamten Inhalts, nicht auf den des Viewports - damit sind die 100% genauso groß wie der Inhalt.

das ist aber kein IE-Problem. Das body-Element hat von Haus aus height:auto, so dass sich seine Höhe nach dem Inhalt richtet - und falls nötig, scrollt das body-Element dann innerhalb seines Elternelements html. Möchte man das ausdrücklich nicht, gibt man body und seinem Elternelement html explizit eine Höhe von 100%. Das funktioniert im IE ebensogut wie in anderen Browsern.

Eine scriptseitige Lösung setzt hier eine Funktion ein, die beim onresize-Event die Höhe des Elements über das .style.height-Attribut anpaßt.

Das ist aber nur nötig, wenn man so etwas wie "Gesamthöhe minus 60px" haben will. Um ein Element stur auf 100% der Höhe seines Elternelements zu zwingen, ist das nicht erforderlich. Auch nicht im IE.

So long,
 Martin

[Gunther]

Hallo Harald,

Ich möchte in ein HTML-Formular Daten nicht nur eintragen können, sondern auch per Klick aus einer Datenbanktabelle übernehmen können.

also das, wozu Listenauswahlfelder klassisch existieren?

D.h., ich möchte sowohl das Formular als auch die Inhalte der Datenbaktabelle  bzw. der Ergebnissmenge einer Abfrage aus selbiger gleichzeitig darstellen.

Da das Formular zeilenweise immer wiederkehrende Einträge aufnimmt, bzw. nehmen können sollte, müssten auch mehrere hintereinander "angeklickte" Einträge aus dem Tabellenteil entsprechend in die Zeilen eingetragen werden.

Wie sieht denn das Formular aus?
Besteht dieses aus einzeiligen Input-Feldern? Und die Anzahl möglicher Einträge soll variable sein?
Dann müsstest du ja eh dynamisch weitere Input-Felder einfügen.

Früher hätte ich ganz spontan gesagt, 2 Frames, einer mit Tabelle, einer mit Formular und dazu ein Javascript, dass per Klick die Einträge in den Formularframe entsprechend einfügt.

Oder eine Seite plus Iframe ...

Wäre sowas heute auch noch "der Weisheit letzter Schluss"

Keine Ahnung.

oder gibt es da inzwischen schönere, sinnvollere oder modernere Lösungsansätze?

Wahrscheinlich ...,
das Einzige was mir jetzt so auf Anhieb dazu noch einfallen würde, wäre das Stichwort 'AJAX', da du ja anscheinend eh Javascript zwingend voraussetzt.

Da ich mir aber nicht ganz sicher bin, ob ich dein Vorhaben richtig verstanden habe, wäre ggf. eine weitere Option, die Ergebnisse aus der DB in eine Tabelle zu packen, wo der User jede Zeile per Checkbox auswählen kann, und zusätzlich noch eine Anzahl x an Eingabefeldern bereitzustellen, für neue Einträge.
Je nach gewünschter Browser-Unterstützung könnte man das Problem des Scrollens per CSS (bspw. durch position:fixed) lösen.
Das wäre dann u.U. eine Variante, die auch noch ohne JS funktionieren würde. Ich bin mir halt nur nicht sicher, ob sie deinen Anforderungen genügt.

Gruß Gunther

[Harald]

Hallo Gunther,

also das, wozu Listenauswahlfelder klassisch existieren?

Genau.

Besteht dieses aus einzeiligen Input-Feldern? Und die Anzahl möglicher Einträge soll variable sein?
Dann müsstest du ja eh dynamisch weitere Input-Felder einfügen.

Stimmt beides ziemlich genau. Eventuell kommt zu den Inputfields eine Textarea dazu, aber prinzipiell ist das Formular genau so aufgebaut und ich sehe vor, weitere Felder dynamisch zu generieren.

Wahrscheinlich ...,
das Einzige was mir jetzt so auf Anhieb dazu noch einfallen würde, wäre das Stichwort 'AJAX', da du ja anscheinend eh Javascript zwingend voraussetzt.

Setze ich zwingend voraus, auch das ist richtig. Ich habe genau das in diesem Thread angesprochene Problem an 2 weiteren Stellen schonmal in Angriff genommen und auch gelöst. Beide Lösungen finde ich persönlich suboptimal. Die Ajaxlösung überfordert z.B. imm er weider die Schnelltipper im Verhältniss zu den Schlafmützen, die am selben Programm arbeiten sollen. Den Langsamen gehts noch zu schnell und die Schnellen kommen nicht weiter, weil sie entweder von den Ajaxeinblendungen irritiert werden oder gar der zeitliche Versatz des Ajax-Ausblenden sie tatsächlich am schreiben im nächsten oder unterhalb stehenden Input-Field hindert.

Da ich mir aber nicht ganz sicher bin, ob ich dein Vorhaben richtig verstanden habe, wäre ggf. eine weitere Option, die Ergebnisse aus der DB in eine Tabelle zu packen, wo der User jede Zeile per Checkbox auswählen kann, und zusätzlich noch eine Anzahl x an Eingabefeldern bereitzustellen, für neue Einträge.

Damit skizzierst Du genau die 2. Lösung, die ich schon umgesetzt habe. Hierbei ärgert mich jedesmal, das gesamte Formular neu laden zu müssen, sobald entweder die dargestellte Ergenissmenge der Tabelle eine andere sein soll. Vergrößere ich die Ergebnissmenge, kommt noch ein unschönes Bild dabei raus und der User muss ewig scrollen, bis er die Eingabemaske erreicht, falls der gewünschte Eintrag _nicht_ in der Ergebnissmenge enthalten ist und er manuell eintragen will.

Je nach gewünschter Browser-Unterstützung

IE6

könnte man das Problem des Scrollens per CSS (bspw. durch position:fixed) lösen.
Das wäre dann u.U. eine Variante, die auch noch ohne JS funktionieren würde. Ich bin mir halt nur nicht sicher, ob sie deinen Anforderungen genügt.

Wäre derzeit meine favorisierte Lösung. Ein DIV, was quasi wie ein Frame funktioniert. Am liebsten Datenübernahme ins Formular direkt am Client ohne Serveranfrage. Erneute Serveranfrage nur bei Absenden des Formulares bzw. bei Änderungen der darzustellenden Ergebnissmenge im DIV.

Erstmal Grüße, Harald

[Beat]

Wenn ich dich richtig verstehe, geht es dir darum, nicht einfach nur einen blankenneuen Datensatz zu ertsllen, sondern einen solchen als Klon aus einem bestehenden Datensatz zu erzeugen.
Das sind aus meiner Sicht zwei Schritte:
Erst Klonen, dann editieren.

Zum Klonen brauchst du dir nur die relevanten Informationen, nicht die gesamten Daten anzuschauen.

mfg Beat

[Harald]

Wenn ich dich richtig verstehe, geht es dir darum, nicht einfach nur einen blankenneuen Datensatz zu ertsllen, sondern einen solchen als Klon aus einem bestehenden Datensatz zu erzeugen.

Zum Klonen brauchst du dir nur die relevanten Informationen, nicht die gesamten Daten anzuschauen.

Hallo Beat,

das ist sicherlich richtig. Aber entweder verstehe ich nicht recht, was Du mir  sagen willst oder aber Du sagst mir nichts Neues damit.

Kannst Du bitte noch 1-2 Sätze mehr dazu sagen, damit ich verstehe, was Du mir sagen willst?

Grüße, Harald

[Beat]

Wenn ich dich richtig verstehe, geht es dir darum, nicht einfach nur einen blankenneuen Datensatz zu ertsllen, sondern einen solchen als Klon aus einem bestehenden Datensatz zu erzeugen.

Zum Klonen brauchst du dir nur die relevanten Informationen, nicht die gesamten Daten anzuschauen.

das ist sicherlich richtig. Aber entweder verstehe ich nicht recht, was Du mir  sagen willst oder aber Du sagst mir nichts Neues damit.

Ich bin davon ausgegangen, dass du dir quasi die ganze Datenbank auf den Browser holen willst, um eben beliebig Datensätze einfügen zu können und daraus neue zu bilden.
Dieses Unterfangen ist meiner Ansicht nicht skalierbar.
Indem man nur die relevanten Labels zu Daten holt, die man eventuell klonen möchte, reduziert sich die Datenmenge.

Aus diesem Grund sehe sehe ich auch das Unterfangen problematisch an, sich die Datenbankinhalte in einen iframe oder eine JS-Struktur zu ziehen.

Von diesen Bedenken nehme ich nur garantiert begrenzte Datenbestände aus.

Falls aber letzteres zutrifft, würde ich die Daten in einer JS-Datenstruktur speichern, und ein Formular als Maske für einzelne Datensätze verwenden.
Du musst dir dann einfach Methoden schreiben, um durch die bestehenden Datensätze zu navigieren oder neue Datensätze anzuhängen.

mfg Beat

[Harald]

Ich bin davon ausgegangen, dass du dir quasi die ganze Datenbank auf den Browser holen willst, um eben beliebig Datensätze einfügen zu können und daraus neue zu bilden.

Hallo Beat,

owei. Dann habe ich mich sicher missverständlich ausgedrückt. Der Frame (ich nenne ihn jetzt einfach mal Frame, auch wenns dann ein DIV oder was auch immer wird), der die Ergebnissmenge der Daten aus der DB beinhaltet, die relevant sind, enthält ebenfalls alle Utensiliene, die ihn in seiner Qualität und Quantität begrenzen.

Damit ist sicher gewährleistet, dass dieser "Frame" nicht mit unnötigen Informationen überlastet wird.

Von diesen Bedenken nehme ich nur garantiert begrenzte Datenbestände aus.

Genau diese werde ich aber zur Verfügung haben.

Falls aber letzteres zutrifft, würde ich die Daten in einer JS-Datenstruktur speichern, und ein Formular als Maske für einzelne Datensätze verwenden.

Wenn das tatsächlich die bester Lösung ist, habe ich defact die wenigste Arbeit damit. Denn genau das verwende ich bereits in einem anderen Modul des Gesamtkonzeptes. Und es hätte den Vorteil der "gleichen Vorgehensweise" über das Gesamtkonstrukt gesehen.

Du musst dir dann einfach Methoden schreiben, um durch die bestehenden Datensätze zu navigieren oder neue Datensätze anzuhängen.

Die wären hal _dann_ schon vorhanden. Ich dachte nur, es gäbe da inzwischen schon modernere Geschichten. Vielleicht wird es Dich aber freuen, zu lesen, dass ich nach langen überlegen tatsächlich in die Richtung tendiere, es genau so zu realisieren, wie Du (für den letzteren und auch zutreffenden Fall) vorschlägst.

Grüße, Harald

mfg Beat