Abfangen falls Ajax-Formular noch nicht gespeichert wurde

[michael]

Hallo,

ich habe mal eine eher konzeptionelle Frage:

Ich habe mehrere kleinere Formulare auf einer Seite welche ich mittels Ajax (prototype) verwalte. Jedes Formular hat seinen eigenen Speicher-Button.

Meine Frage:
Wie kann ich den User darauf hinweisen das er ein geändertes Formular speichern soll wenn er die Seite verlassen will?

Mein Ansatz bisher ist ein notSavedFlag auf true zu setzen sofern der User in einem Formular eine Änderung gemacht hat und dann bei jedem Link  zu überprüfen ob dieses Flag gesetzt ist. Problem hierbei ist natürlich das ich jeden Link der irgendwann in die Seite eingebaut werden soll um diese Überprüfroutine erweitern muss.

Wie kann ich das am geschicktesten machen?

Grüße&Danke
Michael

[Vinzenz Mai]

Hallo

Ich habe mehrere kleinere Formulare auf einer Seite welche ich mittels Ajax (prototype) verwalte. Jedes Formular hat seinen eigenen Speicher-Button.

Wie kann ich den User darauf hinweisen das er ein geändertes Formular speichern soll wenn er die Seite verlassen will?

Du könntest mit dem onbeforeunload-Event arbeiten, siehe z.B. dieses Archivposting von molily.

Freundliche Grüße

Vinzenz

[michael]

Klingt vielversprechend! Ich werde das mal ausprobieren...

Vielen Dank schonmal!

Grüße
Michael

[noscript]

jeden Link der irgendwann in die Seite eingebaut werden soll um diese Überprüfroutine erweitern muss.

Wie kann ich das am geschicktesten machen?

du könntest einfach ein JavaScript diese Erweiterungen vornehmen lassen:

function allesausgefuellt() {  
 if (notSavedFlag) {tue irgendwas};  
 return (entsprechend true oder false)  
}  
  
function linkergaenzen() {  
 var allelinks=document.getElementsByTagName("a");  
 for (var i=0; i<allelinks.length; i++) {  
  var ziel=allelinks[i].href;  
  if (ziel!="" && ziel.charAt(0)!="#") allelinks[i].onclick=allesausgefuellt;  
 }  
}  
  
window.onload=linkergaenzen;

[michael]

das wäre sozusagen ein eigenes Event für alle Links basteln. Geht das den auch wenn die Links schon selber onClick="xyz" haben oder wird das dann überschrieben? Kann ich evtl. auch

allelinks[i].onclick += allesausgefuellt;

machen? Oder klappt das nicht in manchen Browsern?

[Cheatah]

Hi,

das wäre sozusagen ein eigenes Event für alle Links basteln. Geht das den auch wenn die Links schon selber onClick="xyz" haben oder wird das dann überschrieben?

ein HTML-Attribut onclick="xyz" wird sinngemäß zu einer onclick-Eigenschaft des Wertes function() { xyz } umgewandelt. Diese Eigenschaft kann überschrieben werden, nicht jedoch in dem Sinne ergänzt.

Kann ich evtl. auch
allelinks[i].onclick += allesausgefuellt;
machen?

Für function-Werte ist der Plus-Operator nicht definiert. Du kannst der onclick-Eigenschaft jedoch eine Funktion zuweisen, die u.a. den vorherigen Wert dieser Eigenschaft ausführt.

Oder klappt das nicht in manchen Browsern?

Ich würde 100% nicht "manche" nennen ... :-)

Cheatah

[michael]

Hallo Cheatah,

Für function-Werte ist der Plus-Operator nicht definiert. Du kannst der onclick-Eigenschaft jedoch eine Funktion zuweisen, die u.a. den vorherigen Wert dieser Eigenschaft ausführt.

und wie geht sowas dann? Ich meine allgemeingültig, ohne dass ich für jeden Link weiss welches onClick-Event sie schon haben?

By the way: worin liegt eigentlich der Unterschied bei einem Aufruf via:

<a href="#" onClick="javascript:meineFunc();">link</a>

und

<a href="javascript:meineFunc();">link</a>

oder ist das Wurst?

Grüße
Michael

[Cheatah]

Hi,

und wie geht sowas dann? Ich meine allgemeingültig, ohne dass ich für jeden Link weiss welches onClick-Event sie schon haben?

wenn der Link ein onclick-Attribut hatte (btw: gewöhn Dir bitte die Kleinschreibung an - spätestens in XHTML gibt es kein "onClick", sondern nur "onclick", und in JavaScript sowieso), so hat das JavaScript-Objekt des Links eine onclick-Eigenschaft, die eine Funktion enthält. Speichere diese, und überschreibe die onclick-Eigenschaft mit einer Funktion, die (neben ihrer eigentlichen Tätigkeit) die gespeicherte Funktion ausführt.

By the way: worin liegt eigentlich der Unterschied bei einem Aufruf via:
<a href="#" onClick="javascript:meineFunc();">link</a>
und
<a href="javascript:meineFunc();">link</a>

Im ersten Fall wird erst der JavaScript-Code "javascript:meineFunc();" ausgeführt und anschließend auf die URI "#" gesprungen.
Im zweiten Fall wird der JavaScript-Code "meineFunc();" ausgeführt.

Beachte auch die Unterschiede im JavaScript-Code.

oder ist das Wurst?

Im Prinzip ja - beides ist Unsinn. Wenn Du keine Ressource verlinken willst, existiert kein Grund, einen Link zu verwenden. Das onclick-Attribut ist für praktisch alle Elemente einsetzbar. Zudem existiert kein Grund, einem JavaScript-Code das Label "javascript:" hinzuzufügen.

Cheatah

[michael]

Hallo,

wenn der Link ein onclick-Attribut hatte (btw: gewöhn Dir bitte die Kleinschreibung an - spätestens in XHTML gibt es kein "onClick", sondern nur "onclick", und in JavaScript sowieso), so hat das JavaScript-Objekt des Links eine onclick-Eigenschaft, die eine Funktion enthält. Speichere diese, und überschreibe die onclick-Eigenschaft mit einer Funktion, die (neben ihrer eigentlichen Tätigkeit) die gespeicherte Funktion ausführt.

Ok da habe ich aber 'ne Frage zur JS Syntax:

mache ich das dann z.B. so:

oldOnClick = myObj.onclick;

myObj.onclick = myFunc(oldOnClick);

und in myFunc() dann ein

eval(oldOnClick);

oder geht das eleganter?

oder ist das Wurst?

Im Prinzip ja - beides ist Unsinn. Wenn Du keine Ressource verlinken willst, existiert kein Grund, einen Link zu verwenden. Das onclick-Attribut ist für praktisch alle Elemente einsetzbar.

Ja stimmt, das mache ich nur weil <a> CSS-mäßig anders behandelt wird.

Eine andere Frage habe ich aber jetzt doch noch:

Gibt es eine onunload Methode oder Vergleichbares für einzelne <div>s? Also sowas wie $('meinDiv').onunload = meineFunc()?

Das Problem ist nämlich, sofern ich es nach Vinzenz Methode mit onbeforeunload mache, dass ich das savedFlag wieder zurücksetzen muss sofern nicht gespeichert werden soll. Das kann ich aber definitiv erst in dem onunload Event abfangen. Das aber funktioniert wiederum nur für window.onunload = meineFunc(), also wenn ich wirklich eine komplett neue Seite lade, nicht aber wenn ich nur <div>s neu lade!

Vielen Dank
Michael

[Cheatah]

Hi,

mache ich das dann z.B. so:
oldOnClick = myObj.onclick;

ja, wobei Du globale Variablen vermeiden solltest.

myObj.onclick = myFunc(oldOnClick);

Hiermit führst Du myFunc(oldOnClick) umgehend(!) aus und speicherst dessen Rückgabe in den onclick-Handler. Arbeite mit anonymen Funktionen, ggf. Closures (s. z.B. diesen oder andere Artikel zu dem Thema von molily), oder - wenn sichergestellt ist, dass es pro Objekt nur einmal zu so einem Verfahren kommt - speichere das vorherige onclick in eine von Dir erzeugte Eigenschaft im selben Objekt.

eval(oldOnClick);

In der Realität kannst Du Dir bei einem sicher sein: Entweder weißt Du extrem exakt, was Du tust, oder ein eval() ist garantiert fehl am Platz. In diesem Fall wird es nicht einmal funktionieren: oldOnClick ist ein Objekt vom Typ "function", d.h. es wird durch Anfügen einer öffnenden und einer schließenden runden Klammer ausgeführt, ggf. mit dazwischen angesiedelten Funktionsargumenten. Stell Dir einfach vor, Du hättest klassisch irgendwo "function oldOnClick() { ... }" hingeschrieben.

Im Prinzip ja - beides ist Unsinn. Wenn Du keine Ressource verlinken willst, existiert kein Grund, einen Link zu verwenden. Das onclick-Attribut ist für praktisch alle Elemente einsetzbar.
Ja stimmt, das mache ich nur weil <a> CSS-mäßig anders behandelt wird.

Schlechter Grund. CSS-mäßig kannst Du auch alle anderen Elemente wie einen Link behandeln; die einzige Schwierigkeit wird sein, ältere IEs nur per CSS mit Hover-Effekten o.ä. zu versorgen.

Gibt es eine onunload Methode oder Vergleichbares für einzelne <div>s? Also sowas wie $('meinDiv').onunload = meineFunc()?

Nein, leider nicht. Entsprechende Aktionen, die Dein <div> vernichten, musst Du selbst überwachen (lassen).

Das Problem ist nämlich, sofern ich es nach Vinzenz Methode mit onbeforeunload mache, dass ich das savedFlag wieder zurücksetzen muss sofern nicht gespeichert werden soll. Das kann ich aber definitiv erst in dem onunload Event abfangen. Das aber funktioniert wiederum nur für window.onunload = meineFunc(), also wenn ich wirklich eine komplett neue Seite lade, nicht aber wenn ich nur <div>s neu lade!

onbeforeunload wurde vermutlich in der Annahme genannt, dass die Seite verlassen würde. Wenn dies bei Dir nicht zutrifft, gibt es sicher andere Ereignisse, die in Frage kommen, z.B. die Ausführung einer bestimmten Funktion, welche dann einfach entsprechend erweitert werden muss.

Cheatah

[Jeena Paradies]

Hallo,

das wäre sozusagen ein eigenes Event für alle Links basteln. Geht das den auch wenn die Links schon selber onClick="xyz" haben oder wird das dann überschrieben? Kann ich evtl. auch
allelinks[i].onclick += allesausgefuellt;

Dazu gibt es funktionen wie addEvent()

Jeena