jquery ajax und ie

[venty]

Hallo, ich habe gerade ein problem mit ajax jquery und dem ie (wie der titel schon sagt).

Wenn man bei mir den inhalt eines select feldes wechselt wird eine ajax abfrage mit jquery gestartet welche mir den neuen inhalt für ein anderes select feld liefern soll. Leider krieg ich nur leere felder zurück. Da das Feld nach der abfrage leer ist heißt das, dass der request geschickt wurde aber die daten nicht richtig empfangen.

Hier der code
JS:

$("#reedereien_select").change(function() {  
            $.ajax({  
                type: 'GET',  
                url: "index.php?task=getSchiffe",  
                dataType: 'html',  
                contentType: "text/html; charset=\"utf-8\"",  
                data: {  
                    reed: encodeURIComponent(this.value)  
                },  
                success: function(data) {  
                    $("#ship_select").attr('disabled',false);  
                    document.getElementById('ship_select').innerHTML = '<option value="">Alle anzeigen</option>'+data;  
                },  
                error: function (XMLHttpRequest, textStatus, errorThrown) {  
                    alertErrorMsg();  
                }  
            });  
        });

PHP:

header('Content-Type: text/html; charset=utf-8');  
header('Cache-Control: must-revalidate, pre-check=0, no-store, no-cache, max-age=0, post-check=0');  
  
...  
  
for ($i=0; $i<count($list);$i++) {  
            echo '<option value="'.$list[$i]->title.'">'.$list[$i]->title.'</option>';  
        }

Kann mir jemand sagen was ich falsch mache oder einen Anstoß geben woran es liegen könnte?

MfG Venty

[venty]

kann es sein dass es am innerHTML liegt?

document.getElementById('ship_select').innerHTML = '<option value="">Alle anzeigen</option>'+data;

laut firebug lite im ie kommt die Antwort nämlich an.

[molily]

Hallo,

$("#ship_select").attr('disabled',false);

Dafür solltest du (in neueren jQuery-Versionen) besser prop() verwenden.

document.getElementById('ship_select').innerHTML = '<option value="">Alle anzeigen</option>'+data;

Das ist ein altbekannter Fehler: Ältere IE-Versionen erlauben das Schreiben von innerHTML bem select-Element nicht. Es gibt verschiedene Workarounds:

• Mit http://de.selfhtml.org/javascript/objekte/all.htm#outer_html@title=outerHTML arbeiten und damit auch das select-Element neu erzeugen
• option-Elemente per http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=createElement erzeugen und per http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=appendChild anhängen
• Optionen mit <http://de.selfhtml.org/javascript/objekte/options.htm#neue_elemente@title=new Option> erzeugen und anhängen

for ($i=0; $i<count($list);$i++) {
            echo '<option value="'.$list[$i]->title.'">'.$list[$i]->title.'</option>';
        }

Dein Script könnte in dem Fall JSON anstatt HTML zurückgeben - damit kannst du im JavaScript einfacher arbeiten, wenn du dich für die zweite oder dritte  Variante entscheidest.

Mathias

[venty]

danke, genau das wars. mit outerhtml hab ich Schwierigkeiten aber es geht auch ein innerHTML auf das Vaterelement.

Jetzt hab ich aber ein anderes Problem. Ich überschreibe ja jetzt die selects. Nachdem ich sie umgeschrieben habe, gehen aber die jQuery Anweisungen nicht mehr die ich auf die selects habe.

Hoffentlich kann mir auch dabei jemand helfen.

MfG Venty

[ChrisB]

Hi,

Jetzt hab ich aber ein anderes Problem. Ich überschreibe ja jetzt die selects. Nachdem ich sie umgeschrieben habe, gehen aber die jQuery Anweisungen nicht mehr die ich auf die selects habe.

Sämtliches JavaScript, das du irgendwie an die Elemente "gebunden" hast, ist natürlich weg - weil inner-/outerHTML *neue* Elemente erzeugt, und die vorhandenen damit ersetzt.

MfG ChrisB

[suit]

Sämtliches JavaScript, das du irgendwie an die Elemente "gebunden" hast, ist natürlich weg - weil inner-/outerHTML *neue* Elemente erzeugt, und die vorhandenen damit ersetzt.

Aber dafür gibt es in jQuery live() anstatt bind().

[suit]

• Mit http://de.selfhtml.org/javascript/objekte/all.htm#outer_html@title=outerHTML arbeiten und damit auch das select-Element neu erzeugen
• option-Elemente per http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=createElement erzeugen und per http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=appendChild anhängen
• Optionen mit <http://de.selfhtml.org/javascript/objekte/options.htm#neue_elemente@title=new Option> erzeugen und anhängen

Oder das Framework, welches man ohnehin schon verwendet, auch weiterhin verwenden: .html() oder ganz einfach .append() bzw. replaceWith() wenn der alte Inhalt auch raus muss.

Das Framework sollte die IE-Eigenheiten hier beachten.

btw: .prop() ist praktisch, ging spurlos an mir vorbei - danke für den Hinweis.