Knusperklumpen: Problem mit innerHTML und IE - suche Lösungsalternativen

Hi,
ich arbeite derzeit mit Ajax was auch ansich locker und flockig von der Hand geht. Im konkreten Fall möchte ich die Eingabe eines Formulars speichern, das Formular danach wieder wegblenden und die gespeicherten Daten auf der Seite anzeigen. Dazu generiere ich serverseitig HTML-Code, der über Ajax zurückgegeben wird und dann per innerHTML ein eine TR geschrieben werden soll. Im Firefox funktioniert das problemlos aber der IE bringt einen "unbekannten Laufzeitfehler".
Ich hab schon im Archiv gelesen, dass der IE wohl nicht in jedes Element mit innerHTML reinschreiben kann. Mein Versuch den generierten Code zu verändern und das Ganze in eine TD zu schreiben bringt im IE zumindest keinen Fehler mehr, schreiben tut er aber trotzdem nicht.
Da es anscheinend nicht so ohne weiteres möglich ist den IE dazu zu bewegen möchte ich nach alternativen Lösungen fragen.

createElement klingt ja gut aber da mein serverseitig erzeugter Code recht komplex ist und auch lang möchte ich es mir ersparen jedes einzelne Element anzulegen und zu befüllen. Gibts es eine Möglichkeit mit createElement (oder was ähnlichem) den erzeugten Code in ein Dom-Element umzuwandeln und dann nur noch mit appendChild an der entsprechenden Stelle einzuhängen?
Das empfände ich als "optimale" Lösung.

Auf andere Vorschläge bin ich auch gespannt.

Danke und mfg
Knusperklumpen

  1. Hallo,

    Dazu generiere ich serverseitig HTML-Code, der über Ajax zurückgegeben wird und dann per innerHTML ein eine TR geschrieben werden soll. Im Firefox funktioniert das problemlos aber der IE bringt einen "unbekannten Laufzeitfehler".
    Ich hab schon im Archiv gelesen, dass der IE wohl nicht in jedes Element mit innerHTML reinschreiben kann. Mein Versuch den generierten Code zu verändern und das Ganze in eine TD zu schreiben bringt im IE zumindest keinen Fehler mehr, schreiben tut er aber trotzdem nicht.

    Hm, hast du dazu mal eine Beispielseite?

    createElement klingt ja gut aber da mein serverseitig erzeugter Code recht komplex ist und auch lang möchte ich es mir ersparen jedes einzelne Element anzulegen und zu befüllen. Gibts es eine Möglichkeit mit createElement (oder was ähnlichem) den erzeugten Code in ein Dom-Element umzuwandeln und dann nur noch mit appendChild an der entsprechenden Stelle einzuhängen?
    Das empfände ich als "optimale" Lösung.

    Du kannst HTML-Schnipsel als text/html ausliefern, sie werden dann geparst und stehen dann in XMLHttpRequest.resonseXML zur Verfügung. Der erzeugte Code liegt also schon als DOM-Element vor (bzw. wohl als DOM-Document). (Gegebenenfalls musst du eine XHTML-Namespace-Angabe in das oberste Element einfügen.)
    Diesen Elementenbaum kannst du gemäß DOM einfach importNode in das HTML-Dokument herüberkopieren. Das Problem ist, MSIE kann das nicht. Somit scheidet diese Möglichkeit aus und du müsstest wohl weiter mit innerHTML forschen.

    Mathias

    1. So, vom Mittag zurück ;-)

      Hm, hast du dazu mal eine Beispielseite?

      Zwar nicht was den vollen Umfang angeht (also ohne dynamisch nachgeladenen Code usw.) aber mal schnell was wo das Problem zu sehen ist.

      http://www.knusperklumpen.de/test2.html

      Dort wird einfach nur beim klicken auf den Testlink folgendes Javascript ausgeführt:
      new_id = 'neue_zeile';
      new_tr = document.createElement("TR");
      new_tr.setAttribute('id', new_id);
      document.getElementById('test_table').appendChild(new_tr);
      document.getElementById(new_id).innerHTML = "<td>huhu</td>";

      Im Firefox funktioniert es prima aber der IE bringt halt seinen Laufzeitfehler weil er wohl nich mit innerHTML in TR schreiben kann.
      Wie schon gesagt ist der von Server geschickte Code etwas länger und komplexer, daher ist ein einzelnes createElement für alle Elemente ausgeschlossen ... sowas wie das von dir angesprochene inportNode klingt ja aber nicht schlecht ... wenn es eine Lösung für _alle_ Browser gäbe.

      mfg
      Knusperklumpen

    2. hi,

      Dazu generiere ich serverseitig HTML-Code, der über Ajax zurückgegeben wird und dann per innerHTML ein eine TR geschrieben werden soll. Im Firefox funktioniert das problemlos aber der IE bringt einen "unbekannten Laufzeitfehler".

      MSDN zur innerHTML Property:
      "The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR."

      Mein Versuch den generierten Code zu verändern und das Ganze in eine TD zu schreiben bringt im IE zumindest keinen Fehler mehr, schreiben tut er aber trotzdem nicht.

      Hm, hast du dazu mal eine Beispielseite?

      Das mit TR und innerHTML sollte ja damit klar sein.

      Hast du zu dem Versuch mit TD.innerHTML auch ein Beispiel?

      gruß,
      wahsaga

      --
      /voodoo.css:
      #GeorgeWBush { position:absolute; bottom:-6ft; }
      1. Hi

        Hast du zu dem Versuch mit TD.innerHTML auch ein Beispiel?

        Jap ... grad eben mal gemacht:
        http://www.knusperklumpen.de/test3.html

        mfg
        Knusperklumpen

        1. hi,

          Hast du zu dem Versuch mit TD.innerHTML auch ein Beispiel?

          Jap ... grad eben mal gemacht:
          http://www.knusperklumpen.de/test3.html

          Hm, das Verhalten des IE ist wirklich nicht nachvollziehbar.
          Erst hatte ich vermutet, es liegt daran, dass du im TD über innerHTML eine weitere TABLE unterbringen willst - ist ja bekannt, dass der IE beim erzeugen von Tabellen pingelig ist, was den TBODY angeht. Aber mit, auch keine Änderung.
          TABLE komplett gegen "<i>test</i>" ausgetauscht - auch keine Änderung.
          Fehlermeldungen - trotzdem keine.

          Problem mit setAttribute in Kombination mit id vermutet - aber ohne bzw. mit Änderung der Zuweisung in [object].id = ... auch kein Fortschritt.

          Und alert(new_td.outerHTML); vor dem Versuch, innerHTML zuzuweisen, gibt auch "<TD id=neue_spalte></TD>" aus, wie zu erwarten.

          Sorry, hier weiß ich erst mal auch nicht weiter, was dem IE da nicht passt.

          gruß,
          wahsaga

          --
          /voodoo.css:
          #GeorgeWBush { position:absolute; bottom:-6ft; }
        2. Hallo Knusperklumpen,

          im FF kann man Teile einer Seite oder auch alles markieren und sich dann über die rechte Maustaste den Auswahlquelltext ansehen. In deinem Beispiel erschien die dynamisch erzeugte Zeile zwischen </tbody> und </table>. Das appendChild darf nicht unter der Tabelle, sondern nur unter dem immer vorhandenem tbody stehen.
          Also: TD ist Kind von TR, TR ist Kind von TBODY und TBODY ist Kind von TABLE.

          Gruß, Jürgen

          1. hi,

            In deinem Beispiel erschien die dynamisch erzeugte Zeile zwischen </tbody> und </table>. Das appendChild darf nicht unter der Tabelle, sondern nur unter dem immer vorhandenem tbody stehen.
            Also: TD ist Kind von TR, TR ist Kind von TBODY und TBODY ist Kind von TABLE.

            D'oh!
            Du hast natürlich Recht - und ich mit meiner Vermutung bzgl. TBODY hab nur an der falschen Stelle gesucht ...

            Ja, wenn man das Script dahingehend verändert, dass das neue TR nicht direkt an TABLE, sondern an deren ersten TBODY angehängt wird, funktioniert es.

            Gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
          2. Hi

            Also: TD ist Kind von TR, TR ist Kind von TBODY und TBODY ist Kind von TABLE.

            Grandios ... es funktioniert ... und dabei bin ich beim IE letztens schon über das tbody gestolpert ... arrg ... was man sich nicht gleich merkt. Danke ... jetzt klappt es wunderbar wie hier zu sehen:

            http://www.knusperklumpen.de/test3.html

            Danke!!
            Knusperklumpen