IE: Change Event und Autocompletion

Haf — Sat, 17 Jan 2009 12:07:06 +0000

Im IE (7) gibt es Probleme mit dem Change-Event bei einem Input-Feld, wenn dies auch Autocompletion von script.aculo.us[1] beinhaltet.

Wird ein Input-Feld bezüglich den Veränderungen beobachtet ($('field').observe('change', ...')) wird beim IE dieser Event dann gefeuert, wenn der Focus das Feld verlässt.

Hat das Input-Feld nun auch Autocompletion, wird dieser Event nicht mehr gefeuert, wenn, der Nutzer mit Tab oder Enter ein Eintrag aus der Autocompletion-Liste auswählt.

Hier muss man den Event selbst feuern, wenn der Eintrag aus der Autocompletion-Liste ausgewählt wurde. Da man bei Prototype keine native Events abfeuern kann, nutzt man die eigenen Events [2] nutzen.

script.aculo.us Autocompletion ruft die Funktion selectEntry wenn ein Eintrag ausgewählt wurde. Nun kann man diese Funktion überschreiben und nach der Auswahl das nötige Event feuern. Natürlich nur beim IE ansonsten hat man das Event doppel. In dem folgenden Listing wird dies beispielhaft für Autocompleter.Local gemacht

var al = new Autocompleter.Local('field', 'auto_box', localResults, { });
    // overwrite the selecEntry() function to fires the change event in IE
    al.selectEntry = function() {
       // the next two lines are the same from the original function!
       this.active = false;
       this.updateElement(this.getCurrentEntry());

       // the additional functionality
       // fire the event only for IE, cause IE does not fire this existing change event
       if(Prototype.Browser.IE) {
          var elem = $('field');
          elem.fire('clazz:event', ...);
       }
};

Links:
[1] script.aculo.us
[2] Prototype Element.fire

Prototype each(), IE und null

Haf — Wed, 26 Nov 2008 11:52:28 +0000

Bei der Arbeit mit JavaScript kommt man irgendwann in die Situation durch ein Array zu iterieren. Dabei nutzt man nicht immer einfach indizierte Arrays, sondern oft auch Arrays mit Lücken in den Indizes oder sogar assoziative Arrays.
Diese letzten Varianten kann man eigentlich genauso durchlaufen, wie die erste, wenn da nicht der IE wäre. Der IE hat Probleme mit Lücken in Arrays.

Wie man im folgenden Listing sehen kann, gibt es beim Firefox fast die erwartbaren Ergebnisse.
Nur fast. Denn beim ersten Output stimmen die Indizes nicht. Das gleiche Problem hat man jedoch auch beim IE.

var ar1 = new Array();
ar1[2] = 'A';
ar1[13] = 'B';
ar1[23] = 'C';

var out = '';
ar1 = ar1.compact();
ar1.each(function(item, index) {
  out += index + ': ' + item + ', ';
});
// => out = 0: A, 1: B, 2: C, 

out = '';
for(i in ar1) {
  if( (typeof ar1[i]) != 'function' )
    out += i + ': ' + ar1[i] + ', ';
}
// => out = 2: A, 13: B, 23: C, 

var ar2 = {
 a: 'Part_1',
 b: 'Part_2',
 sum: 'Part_1_2'
};

out = '';
for(a in ar2) {
 out += a + ': ' + ar2[a] + ', ';
}
// => out = a: Part_1, b: Part_2, sum: Part_1_2,

Der IE gibt folgendes aus:

// 1.output: 0: undefined, 1: undefined, 2: A, 3: undefined, 4: undefined, 5: undefined, 6: undefined, 7: undefined, 8: undefined, 9: undefined, 10: undefined, 11: undefined, 12: undefined, 13: B, 14: undefined, 15: undefined, 16: undefined, 17: undefined, 18: undefined, 19: undefined, 20: undefined, 21: undefined, 22: undefined, 23: C, 

// 2.output: 2: A, 13: B, 23: C,
// 3.output: a: Part_1, b: Part_2, sum: Part_1_2,

Wie man beim 1. Output sehen kann, werden die Lücken mit angezeigt.
Dies kann man verhindern, in dem man das Array zusammenfasst und das geht z.B. mit der Prototype Funktion Array.compact().
Also ein

 ar1 = ar1.compact();

hilft hier.

Bei der zweiten Variante werden die korrekten Indizes beibehalten. Hier muss man jedoch bedenken, dass man durch das ganze JavaScript Object iteriert und einem meistens die Funktionen nicht interessieren.

Und das letzte Beispiel zeigt, dass dies auch bei einem eigenen Objekt funktioniert. Auch dort sollte man Funktions-Filter einbauen, wenn erwünscht.

Links:
[1] http://www.prototypejs.org/api/array/compact

Information Centre » prototype

IE: Change Event und Autocompletion

Prototype each(), IE und null