Donnerstag, 27. Juli 2006

HTML CSS

Option Bug im Internet Explorer bei Nutzung von innerHTML und Javascript

Der Internet Explorer kann manchmal schon ein wenig anstrengend sein. Das trifft vor allem die Webentwickler. Also mich... :-)

Für eines meiner Projekte benötige ich ein wenig Ajax. Sicher es wird gerade gehypt ohne Ende und ist ein neues Wort für das Bullshit Bingo. Nichtsdestotrotz ist Ajax es eine feine Sache. Deshalb setzte ich mich momentan verstärkt mit Javascript auseinander. Javascript ist zwar ein wenig komisch, was den Klassenaufbau betrifft, aber dazu vielleicht später mehr.

Gefordert ist aufjedenfall ein Javascript, welches bei Änderungen im Formular, den Inhalt verschiedener Select-Boxen, also der Option-Tags, ändert. Aber irgendwie hat der Internet Explorer Probleme, wenn man mit innerHTML versucht in der Select-Box verschiedene Option-Tags einzufügen.

Den Beispielcode könnt ihr in Listing 1 sehen. Aus irgend einem Grund schneidet der Internet Explorer einfach den Öffnungstag weg. Wenn man also auf den Link Action klickt wird die Funktion doIt() aufgerufen. Diese Javascript Funktion greift dann mit innerHTML auf den Inhalt des Elements mit der ID "foo" zu und fügt den Inhalt der Variblen "foo" ein.

Doch wenn man sich das mit alert(...) ausgeben lässt, bleibt da nur noch 123</OPTION> anstatt <option>123</option> übrig. Warum weiss ich nicht – aber so ist er halt der Internet Explorer.



Listing 1

Download Code!

  1.  
  4. <title>Javascript Internet Explorer Bug - innerHTML</title>
  5. </head>
  7. <script type="text/javascript">
  8. function doIt() {
  9.     var foo = "<option>123</option>";
  10.     document.getElementById("foo").innerHTML = foo;
  11.     alert(document.getElementById("foo").innerHTML);
  12. }
  13. </script>
  14. <a href="#" onclick="doIt()">Action</a>
  16. <select id="foo">
  17.  
  18. </select>
  19. </form>
  20.  
  21. </body>
  22. </html>
  23.  

Die Lösung für das Problem mit dem Option-Tag, gestaltet sich folgendermaßen. Man fügt ein value Attribut in den Option-Tag ein. Das Beispiel hierzu ist Listing 2.

Dirk hat Recht (siehe Kommentare). Diese Lösung ist die Richtige.



Listing 2 - Lösung (Korrigierte Fassung von Dirk)

Download Code!

  1.  
  4. <title>Javascript Internet Explorer Bug - innerHTML - Lösung</title>
  5. </head>
  7. <script type="text/javascript">
  8. function doIt() {
  9.  
  10.     el=document.getElementById('foo');
  11.     el.innerHTML='';
  12.     var foo2 = document.createElement("option");
  13.     foo2.appendChild(document.createTextNode("123"));
  14.     foo2.value="123";
  15.     el.appendChild(foo2);
  16.     alert(el.innerHTML);
  17.  
  18. }
  19. </script>
  20. <a href="#" onclick="doIt()">Action</a>
  22. <select id="foo">
  23.  
  24. </select>
  25. </form>
  26.  
  27. </body>
  28. </html>
  29.  

Weiterführende Erklärungen zu dem Problem gibt es auch von Microsoft selbst.

Geschrieben von Mr.Foo in HTML CSS um 12:06
Kommentare (24) | Trackback (1)
Tags für diesen Artikel: , , ,
  2. Nicht gut
  3. Uninteressant
  4. Neutral
  5. Gut
  6. Sehr gut
Bewertung: 2.33 von 5, 3 Stimme(n) 92 Klicks

Trackbacks
Trackback für spezifische URI dieses Eintrags

innerHTML und die Select-Box
Wenn man im dynamischen Teil einer Webseite eine Select-Box mittels Javascript mit neuen Werten füllen möchte, so kann man das mehr oder weniger umständlich über das DOM mittels document.createElement(), node.removeChild() und node.appendChild
Weblog: Falk Prüfer
Aufgenommen: Aug 05, 12:18

Kommentare
Ansicht der Kommentare: (Linear | Verschachtelt)

Tobias - #1 - 07.01.2007 11:37 - (Antwort)

Ich bin auf gleiches Problem gestoßen. Es verging eine ganze Zeit bis ich den Fehler erst bemerkt habe.
Was ist nun die Lösung hierfür?

Ich habe um den gesamten select ... /select noch ein span mit der eindeutigen ID gesetzt. Dann ersetze ich mittels AJAX nicht nur die einzelnen options sondern den gesamten select . Somit funktioniert die Lösung auch im Internet Explorer - mehr oder weniger elegant.

Mr. Foo - #1.1 - 12.01.2007 00:43 - (Antwort)

Hi Tobias,

ich hab das damals einfacher gelößt - steht jetzt oben :-)

Dirk Niemeier - #2 - 17.01.2007 19:16 - (Antwort)

Sicher, dass diese Lösung funktioniert? Ich habe dasselbe Problem, egal ob das Value-Attribut explizit benannt wurde oder nicht.

Mr. Foo - #2.1 - 18.01.2007 00:58 - (Antwort)

Ne funktioniert doch nicht(meins) - hab es gerade ausprobiert. Ich glaube ich habe die Lösung mit einem anderen Bug im Internet Explorer verwechselt.

Deine Lösung ist die Richtige :-D

(Ich war mal so frei die Lösung von dir oben hinzuposten.)

Dirk Niemeier - #3 - 17.01.2007 19:35 - (Antwort)

Ich nutze jetzt die folgende Funktion, das löst mein Problem:

function doIt(){
el=document.getElementById('foo');
el.innerHTML='';
var foo2 = document.createElement("option");
foo2.text="123";
foo2.value="123";
el.add(foo2);
alert(el.innerHTML);
}


Ich finde es zwar etwas unschön mich durch den Baum zu hangeln und mit Kind- und Elternelementen zu arbeiten, aber da das hier sehr überschaubar bleibt, kann ich damit leben.
Die Lösung steht übrigens auch in der Knowledgebase von Microsoft unter http://support.microsoft.com/kb/276228/de

Dirk - #3.1 - 17.01.2007 19:56 - (Antwort)

el.add(foo2); läuft im Firefox/Seamonkey irgendwie nicht, dafür aber el.appendChild(foo2);

Wieder ein Fall für eine Browserweiche.

Dirk - #3.1.1 - 17.01.2007 20:02 - (Antwort)

So, nun für IE und Firefox

function doIt(){
el=document.getElementById('foo');
el.innerHTML='';
var foo2 = document.createElement("option");
foo2.appendChild(document.createTextNode("123"));
foo2.value="123";
el.appendChild(foo2);
alert(el.innerHTML);
}


Genug gespammt für heute. Schönen Abend noch.

smily - #3.1.1.1 - 27.06.2008 13:46 - (Antwort)

Super, hatte das Problem auch und es funktioniert, jetzt.
Smily :-)

Steffen - #4 - 19.03.2007 09:47 - (Antwort)

Naja ob das ein bug ist möchte ich bezweifeln. innerHTML ist für solche zwecke auch nicht vorgesehen sondern wie du in deiner "Lösung" schon schreibst appendChild... Also eine Lösung für ein Problem das es nicht wirklich gibt sondern nur der Lösungsweg der zeigt wie es gemacht werden sollte.

Gruß

Abdalla - #5 - 24.03.2007 23:48 - (Antwort)

Die Alternative zu innerHTML macht sinn, jedoch bringt sie den Iexplorer6 bei 2x Ausführung zum Absturz.

Offtopic: Iexplorer hat immo 2 als "sehr kritisch" eingestufte sicherheitslecks - also schnellstens umsteigen wer noch nicht hat.

Abdalla

Anonym - #5.1 - 24.03.2007 23:50 - (Antwort)

war doch nur ein einzelfall - ie6 läuft stabil, zumindest bei der operation :-)

Thomas - #6 - 02.08.2007 15:50 - (Antwort)

es geht noch einfacher ;-)
var selectObj=document.forms["formName"].elements["selectName"];
selectObj.options[selectObj.length]=new Option("text","value");

arni - #6.1 - 25.10.2007 14:08 - (Antwort)

@thomas:
das geht bei mir weder im IE 7 noch im Firefox. :-(

arni - #7 - 25.10.2007 14:39 - (Antwort)

Wozu eigentlich die Zeile:
foo2.value="123";

Die hier reicht doch völlig aus:
foo2.appendChild(document.createTextNode("123"));

Wolf - #7.1 - 07.11.2007 14:39 - (Antwort)

Das reicht nicht, wenn Du mit dem ausgewählten Wert noch was anfangen willst.

Im Request wird nämlich nur das value-Attribut gesendet.

Wolf - #7.1.1 - 07.11.2007 15:43 - (Antwort)

Ups, hehe, stimmt ja gar ned...
Wenn das value-Attribut nicht angegeben ist, wird die TextNode gesendet.
Man kann aber mit dem value-Attribut aber bestimmen, dass statt der Textnode eben der Wer des Attributs gesendet wird. Damit kann man dann zum Beispiel Ländernamen anzeigen, intern aber mit anderen IDs arbeiten, etwa um Bezug auf bestimmte DB-Einträge zu nehmen.

Sushimeister - #8 - 13.03.2008 13:14 - (Antwort)

Sehr geil! Danke für den Workaround.

Ich seh das aber richtig, dass es ein BUG von M$ ist, oder?

Mr. Foo - #8.1 - 13.03.2008 16:52 - (Antwort)

Hmm,

ist jetzt eine ganze Zeit her - aber ich denke es ist ein Feature von MS :-)

Klaus - #8.2 - 03.06.2008 18:17 - (Antwort)

Leider ein Bug, siehe: support.microsoft.com/kb/276228/de . Ich habe auch sehr viel Zeit investiert...

Angelos - #9 - 08.09.2008 20:10 - (Antwort)

der bug raubt mir langsam den letzten nerv

kurz mein problem:
innerHMTL macht probleme, in meinem fall immer dann wenn ein "..." tag auftaucht
ich möchte aber dynamisch in einem DIV ein paar links erzeugen.

jetzt das eigentliche problem:
mit

for(i = 0; i < 5; i++)
{
divelement.innerHTML += "";
}

kann ich die links erzeugen, aber ie hat ja was gegen..., wenn ich mit

var tLink = document.createElement("a");
und divelement.appendChild den link erzeuge, dann muss ich aber bei tLink.onClick = machwas(i); angeben und jetzt kommt's, da ich in einer schleife bin haben am schluss alle links für i den wert 4 :/

gibt's da ne möglichkeit oder ist das einfach nicht möglich den momentanen wert in einen string zu wandeln der auch nach der schleife für die links noch die werte 0..4 hat ? ich weiss scope und so, aber wie solls denn sonst gehen, "dynamisch" lol

Mr. Foo - #9.1 - 09.09.2008 15:03 - (Antwort)

Kannst du mal den kompletten Code zeigen, welchen du verwendest? Von deiner Beschreibung her, sollte es eigentlich passen.

Angelos - #9.1.1 - 12.09.2008 10:50 - (Antwort)

hmm, meinen tag im ersten beitrag wollte er wohl nicht darstellen,
also immer wenn ich einen link erzeuge kracht es, so nun die codeschnipsel
ich will mehrere Listen von bildern darstellen (nur zur Info)

tLinkList - assoziatives array, im Prinzip Id => Images

[geshi lang=javascript]
this.tDiv = document.getElementById("irgendeindiv");
for(tListId in tLinkList)
{
var tPic = tLinkList[tListId].mItems[0].mPic;

var tLink = document.createElement("a");
tLink.innerHTML = "

Floix - #10 - 15.06.2009 11:34 - (Antwort)

siehe: http://support.microsoft.com/kb/276228/de

Mr. Foo - #10.1 - 16.06.2009 15:08 - (Antwort)

Vielen Dank - hab den Link oben aufgenommen.


Kommentar schreiben

Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Sie können [geshi lang=LANG][/lang] Tags verwenden um Quellcode abhängig von der gewählten Programmiersprache einzubinden