Klasse Phänomen mal wieder: Ich habe ein DIV gebaut, dass ein Formular mit einer SELECT-Box enthält. Bei Auswahl einer Option in der SELECT-Box wird per jQuery.ajax(); das DIV neu geladen und dynamisch im Inhalt ersetzt. Klappt bei allen Browsern super – nur der IE8 hat mich den Vormittag gekostet, bis ich mir den Response mal genau angeschaut hatte.
Das Formular bestand – vereinfacht dargestellt – aus folgendem Code:
Der jQuery-AJAX-Code sah ungefähr so aus:
var formular = $('.mein_formular form');
formular.find('select').change( function () {
$.ajax( { url: formular.attr('action')+'?'+formular.serialize(),
success: function ( data ) {
$('.mein_formular').html( $('.mein_formular', data).html() );
}
});
Im Internet Explorer 8 konnte ich den Ajax-Befehl genau ein Mal aufrufen, danach kam ich nicht mehr an die Daten von formular.serialize() heran. Erst ein genauer Blick in den Response brachte es heraus:
Der Befehl $(‚.mein_formular‘, data).html(); bringt in allen Browsern – außer IE8 – dieses richtige Ergebnis:
...
...
Also: Alles korrekt. Im IE8 aber entfernt jQuery.html(); aus irgendeinem irrsinnigen Grund die Anführungszeichen der Tag-Attribute und macht daraus:
...
...
Und das wiederum interpretiert IE8 durch den Slash am Ende von ziel/ als Schliessen des Tags! Also so:
...
...
Konsequenz: Keine Chance, an die Daten eines leeren Formulars zu kommen. Vielen Dank, Microsoft!
Und die Lösung dazu? jQuery.html() nicht verwenden, sondern .contents() – mal wieder ein paar Buchstaben, die einem den halben Tag Nerven geraubt haben:
$('.mein_formular').html( $('.mein_formular', data).contents() );
Oder – alternativ – einfach das .html() weglassen – allerdings wird dann evtl. das umschliessende DIV gedoppelt.
$('.mein_formular').html( $('.mein_formular', data) );