Formular mit sehr vielen Daten

[Anita]

Hallo!

Ich hab im Rahmen eines Projektes eine Seite mit einer Art Onlinetabelle.

Ich lese den Inhalt der Tabelle aus einer Datenbank aus und gebe sie als Tabelle mit je 1 Textbox pro Zelle aus. Somit kann man die Tabelle im Browser verändern.

Wenn der User auf Speichern klickt, werden die Inhalte der Textboxen via Post verschickt und neu in der Datenbank gespeichert.

Da eine Tabelle ziemlich groß werden kann (so 50 Zeilen/20 Spalten aufwärts) dauert das Absenden des Formulars ziemlich lange. Das macht sich bemerkbar, das das Browserfenster einfriert und nicht mehr reagiert.

Ich bin am Rätseln wie ich es anders hinbekommen kann.
Fällt Euch auf die Schnelle etwas ein?

Viele Grüße
Anita

[xpfreund]

Hallo,

Da eine Tabelle ziemlich groß werden kann (so 50 Zeilen/20 Spalten aufwärts) dauert das Absenden des Formulars ziemlich lange. Das macht sich bemerkbar, das das Browserfenster einfriert und nicht mehr reagiert.

Ich bin am Rätseln wie ich es anders hinbekommen kann.
Fällt Euch auf die Schnelle etwas ein?

Eine Idee wäre zwei Frames zu benutzen. Eins in dem alles angezeigt wird und ein zweites, welches zumindest auf dem Bildschirm existiert. Dann könntest du die Form mit target in diesen Hintergrundframe laden und dort die Einfügeprozedur laufen lassen.

gruß aus Senftenberg am See

[Anita]

Eine Idee wäre zwei Frames zu benutzen. Eins in dem alles
angezeigt wird und ein zweites, welches zumindest auf dem
Bildschirm existiert. Dann könntest du die Form mit target in
diesen Hintergrundframe laden und dort die Einfügeprozedur laufen

»»lassen.

Danke, an so was hab ich jetzt noch nicht gedacht. Die Seite ist allerdings im Moment komplett mit CSS formatiert. Ich weiß nicht genau, inwiefern sich das mit Frames jetzt vertragen würde. Ich behalts mal im Hinterkopf, aber irgendwie glaub ich muss ich es anders lösen.

Gruß Anita

[xpfreund]

Hallo,

Danke, an so was hab ich jetzt noch nicht gedacht. Die Seite ist allerdings im Moment komplett mit CSS formatiert. Ich weiß nicht genau, inwiefern sich das mit Frames jetzt vertragen würde. Ich behalts mal im Hinterkopf, aber irgendwie glaub ich muss ich es anders lösen.

Da die Seite ja nur in einem einzigen Frame durchlaufen wird, gibt es da keine Probleme.
Du setzt praktisch ein Frame mit src="deine Datei" und ein zweites Frame, welches nie Ausgaben bringt und 0% des Fensters einnimmt. Alles was nicht angezeigt werden soll, wird per target ins zweite verschoben und alles andere läuft im ersten. Damit könntest du entweder per Javascript einen Fortschrittsbalken im Anzeigebereich anzeigen, oder den User einfach weitersurfen lassen.

gruß aus Senftenberg am See

[Anita]

Du setzt praktisch ein Frame mit src="deine Datei" und ein zweites Frame, welches nie Ausgaben bringt und 0% des Fensters einnimmt. Alles was nicht angezeigt werden soll, wird per target ins zweite verschoben und alles andere läuft im ersten. Damit könntest du entweder per Javascript einen Fortschrittsbalken im Anzeigebereich anzeigen, oder den User einfach weitersurfen lassen.

Ahh.. jetzt fällt der Groschen. Hört sich interessant an. Muss ich mal ausprobieren, ob das so Sinn macht oder ob ich doch eher nur einzelne veränderte Daten über das Formular übergebe. Danke!

[lightfly]

Du setzt praktisch ein Frame mit src="deine Datei" und ein zweites Frame, welches nie Ausgaben bringt und 0% des Fensters einnimmt. Alles was nicht angezeigt werden soll, wird per target ins zweite verschoben und alles andere läuft im ersten. Damit könntest du entweder per Javascript einen Fortschrittsbalken im Anzeigebereich anzeigen, oder den User einfach weitersurfen lassen.

Ahh.. jetzt fällt der Groschen. Hört sich interessant an. Muss ich mal ausprobieren, ob das so Sinn macht oder ob ich doch eher nur einzelne veränderte Daten über das Formular übergebe. Danke!

Hi!

Anstatt irgendwas zu basteln um das Problem zu vertuschen, würde ich mal nach der ursache forschen. Dauert das senden der Daten solange oder hat eventuell der Server zu lange um die Felder nach dem senden zu speichern? Oder möglicherweise Clientseitig, z.b. ein Validierungs Javascript das zu den verzögerungen führt?

Und wenn schon vertuschen, würde ich eher vorschlagen per xmlhttprequest zu speichern, mit einer Fortschrittsanzeige oder mindestens einem Sandührchen.

greetz

[Anita]

Und wenn schon vertuschen, würde ich eher vorschlagen per xmlhttprequest zu speichern, mit einer Fortschrittsanzeige oder mindestens einem Sandührchen.

So wirds jetzt auch gemacht. Die Felder werden einzeln (nicht mehr die gesamte Tabelle) per xmlhttprequest abgespeichert. Ist recht flott und erspart dem Nutzer den Speichern-Knopf am Schluss.

Danke für alle Anregungen!
Gruß Anita

[zipdrive]

Hallo Anita,

warum gruppierst du nicht einfach. Es scheint mir logisch, dass der Browser einfriert, wenn er den Wert jedes Formularelementes auslesen muss. Es ist vielleicht auch möglich das Absenden nicht auf dem HTML - gewohnten Wege zu vollziehen, es vielmehr über ein XMLHttpRequest - Objekt zu machen. Dort kannste dann evt. dem User anzeigen, dass sein Browser nicht eingeschlafen ist, sondern "arbeitet" ...

Andere Selfer haben da bestimmt mehr Erfahrung! Ich kann nur den Wink mit dem Zaunpfahl machen ....

Grüße aus Leipzig

[Anita]

Es ist vielleicht auch möglich das Absenden nicht auf dem HTML -
gewohnten Wege zu vollziehen, es vielmehr über ein XMLHttpRequest »» - Objekt zu machen. Dort kannste dann evt. dem User anzeigen,
dass sein Browser nicht eingeschlafen ist, sondern "arbeitet" ...

Hmm.. darüber hab ich auch schon nachgegrübelt. Vielleicht speicher ich auch via Ajax nur einzelne Zellen ab, sofort nachdem sie verändert wurden. Das dürfte dann auf jeden Fall schneller gehen. Nur wollte ich gerne vor jedem Speichern eine Sicherungskopie der alten Tabelle machen, damit man sie notfalls wieder herstellen kann. Wenn ich das nun nach jedem Verändern der Zelle mach, dann wirds auch wieder sehr viel Datenmüll. *weiter nachdenk*

[Daniel]

Ahoi Anita,

Wie wäre es mit einem Bearbeiten-Button? also vor jeder zeile.

Oder werden aufjedenfall alle bzw. viele der Datensätze editiert?

MfG

[Anita]

Ahoi Anita,

Wie wäre es mit einem Bearbeiten-Button? also vor jeder zeile.

Oder werden aufjedenfall alle bzw. viele der Datensätze editiert?

MfG

Hallo!

Nein, wahrscheinlich werden nicht mehr als 5 bis 10 Zeilen auf einmal editiert. Aber so richtig vorraussagen kann man das natürlich nicht.

Gruß Anita

[Daniel]

Ahoi Anita,

Nein, wahrscheinlich werden nicht mehr als 5 bis 10 Zeilen auf einmal editiert. Aber so richtig vorraussagen kann man das natürlich nicht.

Klar kann man das nicht so genau vorraussagen, aber dies bedeutet das vorraussichtlich über 50% der DAten die gesendet werden unnötiger weise gesendet werden.

Um dies zu umgehen fallen mir momenten folgende möglichkeiten ein:

• die Datensätze können nur einzeln auf einer Seperaten Seite editiert werden.
• Eine JS lösung ist auch denkbar, allerdings ist klar das bei Deaktivirtem JS dies nicht funktioniert. Lege eine zusätzliche spalte Bearbeitet an, in diese machst du für jeden Datensatz eine Checkbox. ( Tipp: Diese Spalte könntest du bei aktiviertem JS ausblenden) dem form-Element gibst du ein onSubmit="" und rufst dort eine JS funktion auf welche nur die relevanten Daten (erkennbar an Checkbox) übermittelt.

MfG

[Anita]

Ahoi Anita,

Huhu Daniel,

Nein, wahrscheinlich werden nicht mehr als 5 bis 10 Zeilen auf einmal editiert. Aber so richtig vorraussagen kann man das natürlich nicht.

Klar kann man das nicht so genau vorraussagen, aber dies bedeutet das vorraussichtlich über 50% der DAten die gesendet werden unnötiger weise gesendet werden.

Bingo!

Um dies zu umgehen fallen mir momenten folgende möglichkeiten ein:

• die Datensätze können nur einzeln auf einer Seperaten Seite editiert werden.

Nochmal einen Klick mehr. Ich glaub, dass wird meinen Chefs nicht gefallen. ;)

• Eine JS lösung ist auch denkbar, allerdings ist klar das bei Deaktivirtem JS dies nicht funktioniert. Lege eine zusätzliche spalte Bearbeitet an, in diese machst du für jeden Datensatz eine Checkbox. ( Tipp: Diese Spalte könntest du bei aktiviertem JS ausblenden) dem form-Element gibst du ein onSubmit="" und rufst dort eine JS funktion auf welche nur die relevanten Daten (erkennbar an Checkbox) übermittelt.

Deaktiviertes JS ist kein Thema. Läuft nur im Intranet der Firma. Ohne JS kann man sich erst gar nicht einloggen.

Drum ist das gar keine so blöde Idee. :) Danke Dir!
Ich lass mir das alles mal durch den Kopf gehen und setz dann hoffentlich die sinnvollste Lösung um.

MfG

Gruß Anita

[wahsaga]

hi,

Deaktiviertes JS ist kein Thema. Läuft nur im Intranet der Firma. Ohne JS kann man sich erst gar nicht einloggen.

Na dann würde ich bei den Datensätzen, die der Nutzer ändert, dies in einem eigenen Attribut per Javascript hinterlegen, und onsubmit alle die Eingabefelder, bei denen nichts geändert wurde, auf disabled setzen - damit sind sie keine successful controls mehr, werden also auch nicht mit übermittelt.

gruß,
wahsaga

[Anita]

hi,

Deaktiviertes JS ist kein Thema. Läuft nur im Intranet der Firma. Ohne JS kann man sich erst gar nicht einloggen.

Na dann würde ich bei den Datensätzen, die der Nutzer ändert, dies in einem eigenen Attribut per Javascript hinterlegen, und onsubmit alle die Eingabefelder, bei denen nichts geändert wurde, auf disabled setzen - damit sind sie keine successful controls mehr, werden also auch nicht mit übermittelt.

gruß,
wahsaga

Hallo wahsaga!

An sich war ich gerade von Deiner Idee ziemlich begeistert und hab sie gleich mal umgesetzt. Nur leider bringt das kaum einen Geschwindigkeitsvorteil.

Das Javascript, das bei onsubmit die Eingabefelder auf disabled setzt, läuft beinahe genauso lange, wie das Versenden aller Daten. Nur dass der User sieht, dass beim Versenden der Seite alle Textfelder langsam nach und nach disabled (grau) werden.

Vielleicht hab ich jetzt auch einen Denkfehler drin.

Bei onchange auf ein Textfeld setze ich mein eigenes Attribut "info2send" auf true. Standardmäßig ist es auf false gesetzt. Beim Abschicken des Formulars setze ich wie folgt auf disabled:

function prepare2send(){
   var inputs = document.getElementsByTagName("input");
   for (i=0;i<inputs.length;i++) {
      if (document.getElementsByTagName("input")[i].getAttribute("info2send") == "false") {
         document.getElementsByTagName("input")[i].disabled = "true";
      }
   }
}

Grüße Anita
PS: Und vielen Dank für die Hilfe

[wahsaga]

hi,

bitte zitiere vernünftig.

Das Javascript, das bei onsubmit die Eingabefelder auf disabled setzt, läuft beinahe genauso lange, wie das Versenden aller Daten. Nur dass der User sieht, dass beim Versenden der Seite alle Textfelder langsam nach und nach disabled (grau) werden.

Nun ja, wenn's ziemlich viele Felder sind, ist daran wohl wenig zu ändern.

Man könnte dann höchstens noch die Felder gleich serverseitig auf disabled ausliefern, und dann clientseitig nur die "freischalten", die der Nutzer aktiviert o.ä.

gruß,
wahsaga

[Anita]

Hi,

bitte zitiere vernünftig.

Sorry, nicht aufgepasst.

Werds weiter versuchen. Danke trotzdem!

Gruß Anita

[plan_B]

Hallo,

Bei onchange auf ein Textfeld setze ich mein eigenes Attribut "info2send" auf true. Standardmäßig ist es auf false gesetzt. Beim Abschicken des Formulars setze ich wie folgt auf disabled:

function prepare2send(){
   var inputs = document.getElementsByTagName("input");
   for (i=0;i<inputs.length;i++) {
      if (document.getElementsByTagName("input")[i].getAttribute("info2send") == "false") {
         document.getElementsByTagName("input")[i].disabled = "true";
      }
   }
}

vielleicht hilft es, deine Funktion zu optimieren. Die Aufrufe document.getElement... kosten nun mal viel Zeit, besonders wenn die Collection gross wird.

  
<form action="..." onsubmit="prepare2send(this)">  
<input type="text" name="xy" onchange="this.info2send=true">  
...  
</form>  

  
function prepare2send(frm){  
   var inputs = frm.getElementsByTagName("input");  
   for (var i=0,iend=inputs.length; i<iend; i++) {  
      if ( ! inputs[i].info2send ) inputs[i].disabled = true;  
   }  
}  

Gruß plan_B