Prototype Event Handling

[nufan]

Hallo zusammen

hab da ein kleines Problem mit Eventhandling. In einer Webapplikation verwende ich prototype. Beim Laden der Webseite wird ein grösserer Control mit DOM erstellt, welcher am Schluss einem Div hinzugefügt wird.

Der Control wird zu 100% client side generiert (also javascript unter Verwendung von prototype und DOM2).

Nun hat der Control gewisse aktive Felder (td), welchen ich einenen click EventHandler hinzufüge. Auf einen solchen Klick wird der Control neu dargestellt (remove alter control, generieren neuer control, hinzufügen neuer control).

Ich habe nun auf den click event 3 eventhandler hinzugefügt. Der erste auf den div mit Event capture, den zweiten auf die td's mit event capture und den dritten auf den div mit event bubble. Der Aufruf der Eventhandler erfolgt in der richtigen Reihenfolge (1 capture auf dem div, 2 capture auf dem td, 3 bubble auf dem div).

Der erste Event auf dem Div soll mir ein Wait Label einblenden, und der Bubble auf dem Div das Label wieder ausblenden. Im capture Event auf dem td soll der Event neu erstellt werden.

Nun wird mir beim durchlaufen des ersten Eventhandlers das wait label einfach nie eingeblendet. Wenn ich da einen Alert einbinde wird es angezeigt (da hier Zeit drauf geht, bis der alert quitiert wird).

Gibt es eine Möglichkeit, wie ich den zweiten Event (control neu erstellen) erst durchlaufe, wenn das Wait Label auch wirklich eingeblendet wird?

Habe es versucht mit $('waitLabel').visible() und erst weiterzumachen, wenn der true ist, hat aber auch nichts gebracht, da dieser true zurück gibt bevor das label im Browser angezeigt wird.

Habe 1000 Inputs zu onComplete methoden unter der Verwendung von AJAX response gelesen, diese bringen mich aber nicht weiter, da ich keine URL aufrufe um results auszulesen.

besten dank für jede hilfe.

Gruss

Nufan

[Thomas J.S.]

Hallo,

hab da ein kleines Problem mit Eventhandling. In einer Webapplikation verwende ich prototype. Beim Laden der Webseite wird ein grösserer Control mit DOM erstellt, welcher am Schluss einem Div hinzugefügt wird.

Der Control wird zu 100% client side generiert (also javascript unter Verwendung von prototype und DOM2).

Nun hat der Control gewisse aktive Felder (td), welchen ich einenen click EventHandler hinzufüge. Auf einen solchen Klick wird der Control neu dargestellt (remove alter control, generieren neuer control, hinzufügen neuer control).

Event.observe(index,'click',function(evt) {
    var trigger = this;
    /* was auch immer du noch beim event machen willst */
    Event.stop(evt);
   }.bindAsEventListener(index));

index stammt bei mir aus einer "$A(...   .each(function(index) {" wobei du hier alles mögliche statt index angeben kannst (x, y, z, foo, bla ...was auch immer).

Worauf du aber achten musst ist, dass wenn du den Controll neu generiert, die neue generierten Sachen haben keinen blassen Schimmer von den Eventhandlern, die für die alten Sachen geneiert wurden!
Ich packte daher das Ganze in einer Funktion: "function initEvents(elem)" die ich beim neugenerieren meiner Elemente dann aufrufe:
ArrayMeinerElemente.each(function(elem) {
...
initEvents(elem);
});

Das ganze schaut dann bei mir so aus:

function NameMeinerFunktion(ArrayMeinerElemente, ..., ...) {
   ...

var machDochIrgendwas = function() {
     ...
     initEvents(ID-des-Element-in-dem-ich-neue-elemente-erzeugt-habe);
   };

...

function initEvents(elem) {
      var el = $(elem);
      $A(el. ... .each(function(index) {
         Event.observe(index,'click',function(evt) {
          ...
          el.machDochIrgendwas (); //methode zuweisen
         }
   }

//erste initialisierung der elemente und die events dazu
   ArrayMeinerElemente.each(function(elem) {
      ...
      initEvents(elem);
   });
}

Hoffe das Hilft.

Grüße
Thomas