Spontifixus: getElementById im InternetExplorer 7

Moin zusammen,

ich entwickle im Rahmen meiner Diplomarbeit gerade eine Web-Anwendung, die in bestimmten Teilbereichen AJAX einsetzt, ich möchte daher den Inhalt verschiedener <span> Elemente ersetzen, die betreffenden Elemente möchte ich mit getElementById identifizieren.

Folgender Code (in einer callBack-Funktion) funktioniert im Feuerfuchs, aber im InternetExplorer 7 nicht:

function refreshImageData() {  
    if (httpRequest.readyState == 4) {  
        if (httpRequest.status == 200) {  
            try {  
                jsonData = eval("(" + httpRequest.responseText + ")");  
                // [...]  
                imagedataHeader = document.getElementById('imagedataHeader');  
                // [...]  
                replaceText(imagedataHeader, 'View');  
                // [...]  
            }  
            catch (e) {  
                alert (e.message);  
            }  
        }  
        else {  
            alert ("The requested data could not be retrieved. There is no record with this Id.");  
        }  
    }  
}

In der HTML-Datei sieht das folgendermaßen aus:

<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
    <base href="http://mevis.marvin.lan" />  
    <script src="javascripts/application/ajax.js" type="text/javascript"></script>  
  
    <!-- [...] -->  
  
</head>  
<body>  
  
    <!-- [...] -->  
  
    <script src="javascripts/application/imagedata.js" type="text/javascript"></script>  
  
    <!-- [...] -->  
  
    <div id="imagedata" style="display:none;">  
        <table id="popup_table" cellspacing="0" cellpadding="0">  
            <tr>  
                <td id="popup_top_left"><img src="images/layout/pixel.gif" height="24" width="6"></td>  
                <td id="popup_top_middle"><span id="imagedataHeader">Create</span> Image data</td>  
                <td id="popup_top_right"><img src="images/layout/pixel.gif" height="24" width="6"></td>  
            </tr>  
  
            <!-- [...] -->  
  
        </table>  
    </div>  
  
    <!-- [...] -->  
  
</body>  
</html>

in den im JavaScript mit // [...] gekennzeichneten Bereichen werden andere Elemente angesprochen, bzw. mit neuem Inhalt versehen.

Die JavaScript-Zeile imagedataHeader = ... verursacht im InternetExplorer folgende Fehlermeldung: "Das Objekt unterstützt diese Eigenschaft oder Methode nicht.", im Feuerfuchs funktioniert das ganz hervorragend.

Habe ich irgendetwas übersehen? Irgendwas grundsätzlich falsch gemacht? Schonmal vielen Dank für eure Hilfe!

Viele Grüße,
Markus :)

  1. Hi Markus!

    Für mich stellen sich noch zwei Fragen:

    1. Wo (an welcher Stelle) im Quelltext wird refreshImageData() aufgerufen?
    Wenn dies vor Erstellung von <span id="imagedataHeader">Create</span> geschiet, findet DOM das Objekt nicht.

    2. Wie sieht die function replaceText(imagedataHeader, 'View'); aus?
    Ein Irrtum um eine Zeile ist möglich...

    Grüsse,
    Richard

    1. Hi Markus!

      Hallo Richard

      Für mich stellen sich noch zwei Fragen:

      1. Wo (an welcher Stelle) im Quelltext wird refreshImageData() aufgerufen?
        Wenn dies vor Erstellung von <span id="imagedataHeader">Create</span> geschiet, findet DOM das Objekt nicht.

      refreshImageData() ist die callBack-Funktion des httpRequests, mit dem ich neue Daten anfordere, sie wird erst aufgerufen, nachdem die Seite komplett geladen ist.

      1. Wie sieht die function replaceText(imagedataHeader, 'View'); aus?
        Ein Irrtum um eine Zeile ist möglich...

      Prinzipiell hast du recht, ja, diese Funktion versieht allerdings in allen anderen Fällen treu ihren Dienst, und wurde von mir unverändert aus dem Buch "Ajax von Kopf bis Fuß" aus dem O'Reilly Verlag übernommen.

      Abschlussbemerkung: Der von wahsaga vorgeschlagene Lösungsweg führte letztendlich zum Erfolg.

      Grüsse,
      Richard

      Grüße zurück,
      Markus :)

  2. hi,

    Die JavaScript-Zeile imagedataHeader = ... verursacht im InternetExplorer folgende Fehlermeldung: "Das Objekt unterstützt diese Eigenschaft oder Methode nicht."

    Der IE ist leider so ungeduldig, es gar nicht abwarten zu können, ob du auf ein Element per getElementById zugreifen magst - nein, für das Element

    <span id="imagedataHeader">Create</span>

    erzeugt er dir _automatisch_ eine Javascript-Variable namens imagedataHeader im globalen Scope.

    Dummerweise ist dieses Ding auch noch readonly, so dass die Zuweisung

    imagedataHeader = document.getElementById('imagedataHeader');

    dann diese Fehlermeldung hervorruft.

    Es empfiehlt sich daher, im globalen Scope von Javascript keine Bezeichner zu verwenden, die auch als IDs im Dokument verwendet werden.
    Ich beginne IDs in aller Regel mit einem Kleinbuchstaben, und nutze dann für eine Javascript-Variable, die die Referenz darauf zugewiesen bekommen soll, den "gleichen" Bezeichner, aber mit einem Großbuchstaben beginnend.

    gruß,
    wahsaga

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

      deine Antwort hat mir sehr geholfen - hätte ich man eher gefragt, dann hätte ich gestern nicht stundenlang rumprobiert...

      Es funktioniert auf jeden Fall jetzt wie erwartet.

      Vielen Dank!

      Gruß,
      Markus :)