Nach AJAX-Response mit jQuery können Formular-Daten nicht mehr gelesen werden

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) );

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.