Seitenwechsel verhindern - Events & Co..

[jan]

hallo zusammen,

ich möchte 'verhindern', dass der User nachdem er daten auf einer form eingetragen/verändert hat die seite wechseln kann.

Ich bin auf den window event onbeforeunload aufmerksam geworden - der nachteil ist jedoch dass man die standardmäßige meldung zwar erweitern jedoch nicht komplett ändern kann - d.h. der standardtext ist immer der gleiche.

also bin ich nun soweit gegangen dass ein js script prüft ob änderungen an der form gemacht wurden, falls ja wird für jeden Link ein Event erstellt was feuert wenn der link geklickt wird.

In der funktion die dann aufgerufen wird erstelle ich meinen eigenen Dialog.

Soweit so gut klappt auch alles.

Jedoch muss ich ja bevor meine Dialog box aufgerufen wird ein Event.stop(evt) machen. Nun möchte ich das gestoppte event aber wieder aufnehmen wenn der User in meinem Dialog "änderungen nicht speichern" anklickt.

wie funktioniert das ?

[Beat]

Ich analysiere deine Usabilty
Wenn ich Daten eines Formulars verändere, soll mir bewusst sein:

a) Dass die Daten nur gespeichert werden, wenn ich den Submit Button betätige.
b) Falls ich Daten verändere, aber einen Link betätige, die Formular-Änderungen nicht gespeichert werden.

Lösung:
Wenn ich Daten verändere, dann setze zu jedem Link ein CSS Popup.
Den Link schreibe um, dass es einen Popup Inhalt erzeugt.
Im Popup aber soll mein gewünschter Link erscheinen mit der Frage:
"Möchten Sie die Formularänderungen Verwerfen und diese Url aufrufen?"
Ich kann den Link im Popup aktivieren = Ja, Ich verwerfe
oder ich verlasse den Popup Bereich, welches damit verschwindet.

Das Umschreiben der Links kannst du machen, sobald bei onblur auf ein Feld ein Vergleich der aktuellen Daten mit den Default-Felddaten eine Änderung festgestellt wird.

mfg Beat

[LX]

Ich halte mich nicht lange damit auf, die Usability von etwas Unbenutzbarem zu analysieren.

Wenn der Aufruf von Links das Formular unbeinträchtigt lassen soll, benutze target="_blank" bzw. onclick="window.open(...); return false;".

Ansonsten verwende einfach keine Links auf externe Seiten im Formular - alle notwendigen Informationen für ein Formular kann man durchaus auf eine Seite packen (notfalls mit Fußnoten oder JavaScript-Overlays o.ä.).

Gruß, LX

[jan]

nein ihr versteht mich falsch.

der user füllt ändert zum beispiel etwas in dem formular "persönliche daten"

nun hat er änderungen gemacht aber das formular nicht abgeschickt und will einen anderen link aus der navigation anklicken.

es soll ein dialog kommen "Es wurden Änderungen gemacht, die bisher nicht gepsichert wurden."
2  - Buttons: "Änderungen speichern"  -> Formular submit
   - "Änderungen nicht speichern" -> zu dem Link gehen den der user angeklickt hat

Der Dialog kommt über meine Dialog funktionen (lightwindow) - klappt alles auch hervorragend in dem ich bis jetzt wie folgt vorgeangen bin

1. Bei Änderungen in einem Formularfeld changedData = true setzen und alle links aus document.links über Event 'click' per observe an die funktion confirmUpdate() binden.

2. bei aufruf eines links wird entsprechend erst die funktion confirmUpdate() aufgerufen die den dialog o.g. anzeigt. um nun den browser davon abzuhalten, die url zu wechseln, bis der User Änderungen speichern oder Änderungen nicht speichern angeklickt hat , wird Event.stop(evt) gemacht.

Funktioniert auch gut. Der Button Änderungen speichern hat ein Callback was dann das Formular abschickt

ABER JETZT ZUM PROBLEM : Da Event.stop(evt) gemacht wurde -  wie bekomme ich es hin, dass, wenn der user auf änderungen nicht speichern anklickt, der browser dann die ursprünglich angeklickte url aufruft. Ich brauche also eine Möglichkeit, den gestoppten Event DOCH AUSZUFÜHREN

ich hoffe ich habs jetzt besser erklärt

gruß
jan

[molily]

Hallo,

ABER JETZT ZUM PROBLEM : Da Event.stop(evt) gemacht wurde -  wie bekomme ich es hin, dass, wenn der user auf änderungen nicht speichern anklickt, der browser dann die ursprünglich angeklickte url aufruft. Ich brauche also eine Möglichkeit, den gestoppten Event DOCH AUSZUFÜHREN

Gestoppt ist gestoppt. Prototype führt preventDefault() und stopPropagation() aus, damit wird die Standard-Ereignisbehandlung unterdrückt und der Event steigt nicht weiter im DOM-Elementenbaum auf.

Und nach der Ausführung des Event-Handlers steht das Event-Objekt ohnehin nicht mehr zur Verfügung. (Naja, man kann es natürlich irgendwo speichern - aber man kann damit nichts mehr anfangen. Höchstens auf das Element zugreifen, bei dem der Event passierte. Das kann man aber auch direkt auslesen und speichern. Das sagte ich ja schon.)

Mathias

[suit]

wie funktioniert das ?

egal was du vor hast oder aus welchem grund du es vorhast; du kannst unmöglich verhindern, dass ein benutzer die seite wechselt, verlässt oder sonstetwas tut

[molily]

Hallo,

Ich bin auf den window event onbeforeunload aufmerksam geworden - der nachteil ist jedoch dass man die standardmäßige meldung zwar erweitern jedoch nicht komplett ändern kann - d.h. der standardtext ist immer der gleiche.

Wo ist dabei das Problem?

also bin ich nun soweit gegangen dass ein js script prüft ob änderungen an der form gemacht wurden, falls ja wird für jeden Link ein Event erstellt was feuert wenn der link geklickt wird.

Am einfachsten wäre es, wenn man den click-Event zentral in der Capturing-Phase behandeln und gegebenenfalls stoppen könnte, aber das funktioniert nicht browserübergreifend.

In der funktion die dann aufgerufen wird erstelle ich meinen eigenen Dialog.

Was meinst du mit eigenem Dialog? Du blendest ein Element mit Buttons ein oder nutzt du window.prompt()?

Nun möchte ich das gestoppte event aber wieder aufnehmen wenn der User in meinem Dialog "änderungen nicht speichern" anklickt.

Na das geht nicht, wenn du nicht mit window.prompt, sondern mit einem eigenen Dialog arbeitest. Aber du kannst selbstverständlich die URI des Links, der angeklickt wurde, auslesen (in Prototype: eventobjekt.element()), zwischenspeichern und beim Klicken des entsprechenden Buttons location.href mit dieser URI füttern.

Mathias