JavaScript Problem mit Internet Explorer

[Riker]

Hallo zusammen,

ich habe ein großartiges Problem mit Javascript und Internet Explorer (surprise! ).
Im Mozilla läuft alles wunderbar...
Als Framework nutze ich des Weiteren Prototype.

Folgendes Szenario:
es sollen Datum und Uhrzeit angegeben werden (Start- und Endzeitpunkt). Ist es nun so, dass zu diesem Zeitpunkt bereits ein Termin gegeben ist, soll eine Fehlermeldung ausgegeben werden. Zu diesem Zweck prüfe ich zum einen den Datepicker auf ein Update, sowie auch die Uhrzeitfelder auf ein 'blur' (User hat was angegeben und klickt etwas anderes an und somit auf ein Feld) - jedoch entsteht dieser Fehler auch bei einem 'change' oder anderen Events.
Der Fehler, den mir der IE ausspuckt lautet folgendermaßen:
"Fehler: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.".

Und nun hier der Code:

checkMeetingCollisions: function() {
			
	var fieldsToObserve = new Array (
			startTime=	$('startTime'),
			endTime=	$('endTime')
	);
			
	var defaultErrorWindow = $('errorMsgMeeting').innerHTML; 
	fieldsToObserve.each(function(fun) {
		fun.observe('blur', function() {
					if (startTime.value != 'hh:mm' && endTime.value != 'hh:mm' && $('MEETING_START_DATE').value != '' && $('MEETING_END_DATE').value != '') {

........

Der Fehler wird an folgender Stelle geworfen:

fun.observe('blur', function() {

Hier sollten nun die HTMLObject Elemente durchlaufen und jedem dieser Observer zugeteilt werden - aber wie gesagt: der IE strekt :/

Hat diesbzgl. jemand eine Idee parat für mich?

Vielen Dank schonmal für Antworten...!

Grüße
Riker!

P.S.: Es handelt sich hierbei um die Version 8 des IE im Kompatibilitätsmodus (ja, den muss ich so nutzen :/ ) - also im Endeffekt um die 7er Version... schalte ich den Kompaitibilitätsmodus ab, funktioniert auch alles einwandfrei.
Ich habe auch mal nachgesehen und mir per alert() das Objekt, welches sich in "fun" zur Laufzeit befindet, ausgeben lassen.
Mit Komp.-Modus: [object]
Ohne Komp.-Modus: [object HTMLInputElement] (so, wie ich es auch vom FF kenne...)

Ergänzung (22. Mai 2012)

SOLVED:

Aus dem obigen Beispiel mache:

var defaultErrorWindow = $('errorMsgMeeting').innerHTML; 
			fieldsToObserve.each(function(fun) {
				Element.observe(fun,'blur', function() {
					if (startTime.value != 'hh:mm' && endTime.value != 'hh:mm' && $('MEETING_START_DATE').value != '' && $('MEETING_END_DATE').value != '') {
.......

(Man achte auf die Element.observe(fun,....))

Und der Internet Explorer spielt auch mit

 

[character]

Was soll denn diese komische Array-Syntax bei "fieldsToObserve"? Das Mozilla Developer Network kennt diese Syntax nicht einmal.

Fuer sowas nimmt man aber so oder so kein Array (was man ohnehin heutzutage mit [] erstellen sollte), sondern ein Objekt ({}).

Assoc. Arrays in JS machen noch ganz andere Probleme. JavaScript Associative Arrays Considered Harmful

 

[mercsen]

ist zwar gelöst aber, character, das sieht mir stark nach prototype aus! Da liefert dir nämlich endlich eine foreach methode für JS nach!
(wie jQuery auch etc.)

 

[Riker]

Japp - ist ne Prototype Syntax.

Als Framework nutze ich des Weiteren Prototype.

 

[character]

Es geht um die Zeilen 3 bis 6.

Edit:
Habe das eben durch den Lint gejagt und nun auch verstanden, was du da machst. Das ist vermutlich das haesslichste, was ich je in JS gesehen habe.

In den Zeilen 4 und 5 machst du ein Assignment innerhalb (!!!!) der Initialisierung des Arrays. Dadurch entstehen dann unbeabsichtigt die globalen (!) Variablen 'startTime' und 'endTime'. Das Array ist ueberhaupt nur deshalb gefuellt, weil Assignments den Wert eben noch zurueckgeben. Unfassbar.

Da sind Bugs vorprogrammiert.

Hier mal die reparierte, verstaendliche und fehlerfreie Version der Zeilen 3 bis 6. Man koennte aber auch eine Map nehmen oder die Variablen weglassen.

var startTime = $('startTime');
var endTime = $('endTime');
var fieldsToObserve = [startTime, endTime];

Vielleicht solltest du generell deinen Code durch einen Lint laufen lassen. http://jslint.com

 

[Riker]

Ouh - da ist aber jemand in Rage

Abgesehen davon, dass JavaScript & Ajax im Allgemeinen das wohlan hässlichste ist, was die Codewelt je gesehen hat, bin ich hier in der Intranetprogrammierung unterwegs. Dort soll es sogar noch Menschen geben, die mit dem IE 6 auf die Seiten gehen und daher ist in dem Code so einiges zusammengehacked, damit es überhaupt zum laufen kommt Oo

Kannst mir aber nen Tipp dazu geben, warum folgendes in der Prototype Syntax beim IE mal wieder nicht geht:

var form1 = $('topForm').serialize();

Fehler mal wieder:
Fehler: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.

Ich gebe Dir sogar noch den Link zur Prototype API - das wahrscheinlich schönste Framework der Welt

http://www.prototypejs.org/api/form/serialize

Wenn Du mir diese Nuss knackst, darfst Du gerne weiter über mich fluchen... ;P

 

[mercsen]

Sorry aber JavaScript ist eine absolut geile Sprache, besonders weil sie wirklich genau auf das zugeschnitten ist was sie machen soll, DOM manipulation. Klar ist es keine Höhere Programmiersprache aber selbst mit JS kann man (mit einigen einschränkungen) OOP betreiben.

Klar ist kapselung so gut wie nicht vorhanden aber teilweise kann das ganz nützlich sein und wennn man sich nen sauben style angewöhnt ist auch quellcode leicht zu lesen und zu verstehen.

Ajax ist doch super geil und wenn es dir nicht passt kannst du ja mit websockts arbeiten oder ne komplette stand alone anwendung schrieben.

aber zu deinem konkreten problem:

Ich denke es liegt daran das $('topForm') nichts findet da er so nach dem TAG <topForm> sucht. Probiers doch mal mit $('#topForm')

ansonsten mal gucken was in $('topForm') drinne ist, im debugger oder mal $('topForm').length. Chrome debugger ist nur zu empfehlen, damit findet man jeden fehler (besser als in diesem schrott FireBug *würg*).

 

[Riker]

Wahrscheinlich lerne ich bei dem Kunden im Moment einfach ne "doofe" Frameworkkonstellation kennen.
Prototype ist nicht wirklich schön und ein Freund von PHP in Verbindung mit Smarty bin ich auch nicht. Komme eigentlich aus der Java Backend Programmierung her und habe auch schon nen paar Sachen in C und .net gemacht - das macht mir persönlich viel mehr Spaß, als das JS "gefrickel" hier - aber evtl. bin ich auch noch zu unerfahren (sitze hier seit ca. 1 Woche Oo).
Ich persönlich würde Websites eher mit einem Framework wie dem GWT hochziehen. Da geht alles schön in Java

$('#topForm') --> NULL

alert($('topForm').length) --> 10
alert($('#topForm').length) --> Fehler: Objekt erforderlich

Wie gesagt: im FF funzt es ja. Der IE ist hier nur am streiken... grml...

 

[character]

Ich bin ueberhaupt nicht in Rage. Ich weise dich nur darauf hin, dass dein Code da oben nicht nur unschoen, sondern extrem fehleranfaellig ist und dann auch noch gegen das Principle Of Least Surprise verstoesst. Laut Lint ist der Code sogar "falsch".

Dazu habe ich dir dann eine saubere (und sogar kuerzere) Loesung angeboten.

Ich habe auch mit Prototype rumgespielt (das war 2006 oder 2007), musste aber schnell erkennen, dass es ein riesiger Haufen Mist ist. Es ist einfach Unsinn, die ganzen nativen Objekte per prototyping zu erweitern. Abgesehen davon wird Prototype nicht mehr wirklich aktiv entwickelt.

Diese IE-Fehler kommen oft daher, dass irgendwo anders irgendein Fehler ist. Da reicht es, wenn ein Komma in einem Array zu viel ist. Mit dem Debugger vom IE 9 muesstest du das aber finden koennen.

Und ansonsten gilt nochmal: Benutze einen Lint. Der findet so viele Fehler. Warum also nicht?

Achso und zu JS: Das hat zwar ein paar Macken, aber es ist extrem maechtig und wenn man keinen Unsinn baut auch sehr elegant. Java hat immer noch keine Closures.

 

[Riker]

Das ist nun eben das Problem:
ab dem IE8 funzt der geschriebene Code auch wunderbar - daher spuckt mir der Debugger des IE (ab V8) keinen Fehler aus...
In V7 (bzw. V8 im Kompatibilitätsmodus, wie ich ihn nutzen MUSS, was mit V7 gleichzusetzen wäre) geht das alles nicht. Ich habe auch schon einen Anhaltspunkt:

var form1 = $('topForm').serialize(); --> GEHT NICHT

Denn ein Element des DOM kann anscheinend nicht geparst werden... wie mir scheint, ist es ein Select Feld mit mehreren Options drin.
In anderen Demos funzt es jedoch wunderbar... Siehe z.B. hier:
http://prototypejs.org/api/form/serialize

Dort ist am Ende der Seite auch ein Formular mit einem Select-Option Feld und trotz IE7 funzt der kack... Ich werd noch bedeppert. Rechne also mit irgendeinem Fehler im DOM - und bis ich den gefunden habe: prost-Mahlzeit Oo

Und leider kann ich den Lint nicht nutzen, denn der Kollege versteht Prototype nicht (und ja: auch dies MUSS ich nutzen, genauso wie den IE7 - damit in auch noch in 2 Jahren die Inder verstehen, was ich so wildes getrieben habe - denn ginge es nach meiner Nase, würde das ganze sch... Projekt anders aussehen hier Oo).

 

[character]

Letztendlich geht es VERMUTLICH darum, einen winzigen Syntax-Fehler zu finden. Immer wenn ich solche Fehler im IE < 8 hatte, lag es naemlich an sowas. Der kann irgendwo sein, ggf. nicht mal in der Naehe der eigentlichen Fehlermeldung. Evtl. ist es aber auch was anderes. Die alten IEs sind halt wirklich... schlecht.

Du kannst im Lint am Anfang $ deklarieren, dann sollte er nicht mehr wegen Prototype meckern. Ansonsten kannst du diese Fehler auch ignorieren. Das Ding ist in erster Linie ein Hilfs- und kein Wundermittel.

Alternativ kannst du ohne Lint im Browser mit "use strict" versuchen, den Fehler zu finden.

Ansonsten wird dir ohne Quelltext vermutlich niemand weiterhelfen koennen.

Trotzdem viel Erfolg.

 

[Riker]

Letztendlich geht es VERMUTLICH darum, einen winzigen Syntax-Fehler zu finden.

Genau den Kollegen suche ich nun mal. Mal sehen, was mir der W3C Validator so ausspucken wird...

Ich danke dir dennoch schonmal für ein wenig aufschlauung


SOLVED:

Nachdem ich nun den zweiten Tag an dem Problem saß und nicht weiter kam, sind mir dabei folgende Sachen aufgefallen:

1. $(form).serialize(); --> geht nicht, denn:
2. $F('select-option_feld_in_form') --> geht nicht (hasAttribute funzt auf diesem Objekt nicht Oo) (Erklärung: $F('bla') holt eigentlich das Value des angegeben Elements der id).

Also war ich am probieren und tun und machen - nichts hat geklappt.

Folglich habe ich einfach mal Prototype von V 1.6.2 auf 1.7 hochgezogen und siehe da: alles funzt! Jetzt darf ich damit nur noch zum Architekturboard und muss das den BWL Menschen irgendwie deutlich machen...