dude: Ajax & getelementbyId - Problem

Hi,

habe ein Problem mit einem HTML- Element das
per Ajax in ein DIV geladen wird und kann die
Eigenschaften dieses Elements irgendwie nicht ausgeben!

Beispiel:
document.getElementById('data_preview_ajax').innerHTML=xmlhttp.responseText;

in dieses DIV element werden folgende daten geladen

von einer separaten Datei < und korrekt dargestellt:

<div style="width:20px; height:95px; float:left; padding:5px 0 0 7px; margin:0 10px 0 0px; background-color:#c5d5fc"><b>01</b></div> <a href="#" onclick="JavaScript:func_img_prev(1)"><img id="img_prev_1" src="123.jpg" height="100" border="0" name="1"></a><p>

auf der eigentlichen Seite möchte ich dann die Eigenschaften des Elements:
img_prev_1 auslesen:

alert(document.getElementById('img_prev_1').src);

bekomme jedoch immer Fehlermeldung:

document.getElementById('img_prev_1') is null

was mache ich falsch?

Gruß
Siggi

  1. Beispiel:
    document.getElementById('data_preview_ajax').innerHTML=xmlhttp.responseText;

    in dieses DIV element werden folgende daten geladen

    von einer separaten Datei < und korrekt dargestellt:

    Oder etwas genauer, die innerHTML Eigenschaft bekommt den Wert, der in responseText steht.

    <div style="width:20px; height:95px; float:left; padding:5px 0 0 7px; margin:0 10px 0 0px; background-color:#c5d5fc"><b>01</b></div> <a href="#" onclick="JavaScript:func_img_prev(1)"><img id="img_prev_1" src="123.jpg" height="100" border="0" name="1"></a><p>

    Wozu ist hier der Link href="#" nötig, muss man mit diesen Link an den Anfang der seite springen können? Wozu soll das Label im onclick Eventhandler dienen? Wo hast du das her?  Warum nimmst du nicht den onclick Handler des Bildes? Das würde neben der Code ersparnis auch den Code vereinfachen, da du dann dirtekt mittels this die Referenz auf das Bild übergeben könntest.

    alert(document.getElementById('img_prev_1').src);

    bekomme jedoch immer Fehlermeldung:

    document.getElementById('img_prev_1') is null

    was mache ich falsch?

    Keine Ahnung, bei dem Code den du uns gezeigt hast, tritt diese Fehlermeldung nicht auf.

    Struppi.

    1. die code vereinfachung ist genehmgigt ;-)

      das ist aber nicht das Problem, denn im Firefox 3.5.7 erhalte ich:

      document.getElementById('img_prev_1') is null

      die inhalte von: xmlhttp.responseText
      werden jedoch korrekt in 'data_preview_ajax' dargestellt!

      ich verstehe es leider auch nicht!
      woran könnte es dennoch liegen?

      1. Hi dude!

        woran könnte es dennoch liegen?

        Reine Spekulation: Du fragst nach einem Element, was noch nicht existiert.

        MfG H☼psel

        --
        "It's amazing I won. I was running against peace, prosperity, and incumbency."
        George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
        Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
        1. das habe ich auch schon gedacht, jedoch wird dieses und andere
          elemente werden wie schon gesagt korrekte dargestellt in:

          <div id="data_preview_ajax"></div>

          später rufe ich dann z.B. in einer funktion:

          alert(document.getElementById("img_prev_1"));

          auf!

          habe auch schon diverses getestet, aber es wird mir gesagt
          das das element nicht existiert!

          1. ich habe das Gefühl das die dargestellten & benötigten Elemente innerhalb von:

            data_preview_ajax

            von außerhalb nicht erkannt werden!
            kann dies evtl. auch mit einer verschachtelung zusammenhängen?

            wenn man die elemente anklickt wird die funktion innerhalb von
            onclick korrekt ausgeführt!

            kann man denn die elemente denn auch direkt aus ajax funktionalität
            auslesen, per:

            xmlhttp.XMLresponse oder so ähnlich?

            1. ich habe das Gefühl das die dargestellten & benötigten Elemente innerhalb von:

              data_preview_ajax

              von außerhalb nicht erkannt werden!
              kann dies evtl. auch mit einer verschachtelung zusammenhängen?

              Nein.

              Aber ich habe dir in meinem ersten Posting schon einen Tipp gegeben. wenn du den onclick Handler auf dem Bild verwendest, kannst du this übergeben und brauchst keine ID mehr.

              Struppi.

              1. ich benötige aber die ID weil ich aus der Datenbank eine ID lade, um dann das entsprechende element in > img_preview_src < einzubinden
                bzw. darzustellen !!!

                vielleicht können auch noch andere fehlerquellen genannt werden!

                in Datei 1 (siehe Posting) passiert übrigends noch folgendes:

                <html>
                <head>
                <script>
                function js_onload() {
                display_data(1,'preview','gal_1');
                }
                </script>
                </head>
                <body onload="javascript:js_onload();">

                --- Inhalt ---

                </body>
                </html>

                1. ich benötige aber die ID weil ich aus der Datenbank eine ID lade, um dann das entsprechende element in > img_preview_src < einzubinden
                  bzw. darzustellen !!!

                  Das hatte ich sogar in meinem Code eingebaut.

                  vielleicht können auch noch andere fehlerquellen genannt werden!

                  Benutzt du die ID mehrfach?

                  <body onload="javascript:js_onload();">

                  wie kommst du auf dei Idee, dass ein JS Handler ein Sprunglabel 'javascript:' braucht? Du verwechselst es mit dem Pseudoprotokoll in einem Link, hier ist es unnötig.

                  Struppi.

                  1. danke für die js-tipps ;-)
                    bin eher php programmierer :-o

                    ids werden nicht doppelt vergeben.
                    nun bin ich trotzdem etwas ratlos und
                    habe keine ahnung was ich noch machen kann !!!!

                    1. Hi dude!

                      nun bin ich trotzdem etwas ratlos und
                      habe keine ahnung was ich noch machen kann !!!!

                      Eine Beispielseite würde Struppi sicher zu konkreter Hilfe verleiten! =)

                      MfG H☼psel

                      --
                      "It's amazing I won. I was running against peace, prosperity, and incumbency."
                      George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
                      Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
                      1. so dann schaut mal und versucht euer glück:

                        http://test.dbf.de1.cc/ajax1.html

                        bitte keine angaben zu inhaltlichen fehlern etc. bzw. sekundär,
                        mir geht es vorrangig um das genannte problem!

                        1. so dann schaut mal und versucht euer glück:

                          http://test.dbf.de1.cc/ajax1.html

                          Es tritt genau das ein, was Hopsel hier schon sagte. Du rufst die Funktion auif, bevor da überhaupt ein Inhalt ist.

                          Struppi.

                          1. das mag sein, aber

                            wie vielleicht sehen kannst ruf ich die funktion auch nochmal
                            am ende der datei auf und es funktioniert trotzdem nicht!

                            nenn mir doch bitte kurz & bündig die korrekte ablauffolge !

                            1. das mag sein, aber

                              Irhendwie hast du ein Talent entweder an anderen vorbei zu reden oder du verstehst es nicht.

                              wie vielleicht sehen kannst ruf ich die funktion auch nochmal
                              am ende der datei auf und es funktioniert trotzdem nicht!

                              Das ist der grund dafür dass es nicht funktioniert.

                              nenn mir doch bitte kurz & bündig die korrekte ablauffolge !

                              Request -> Response -> Verarbeitung -> Zugriff

                              Struppi.

                              1. vielleicht von beiden etwas :-/
                                sorry dann bin ich wohl zu blöd:

                                1.) ich rufe die funktion im <head> auf

                                es funktioniert nicht

                                2.)  ich rufe die funktion am ende der datei auf

                                es funktioniert nicht

                                wo soll ich sie bitte dann aufrufen?

                                Request -> Response -> Verarbeitung -> Zugriff

                                damit kann ich leider nicht soviel anfangen

                                erklär es mir doch bitte anhand der reihenfolge beim
                                aufruf/ablauf der vorgänge/funktionen meiner datei!

                                1. 1.) ich rufe die funktion im <head> auf

                                  es funktioniert nicht

                                  2.)  ich rufe die funktion am ende der datei auf

                                  es funktioniert nicht

                                  wo soll ich sie bitte dann aufrufen?

                                  Dann wenn das Element da ist, da du es mit AJAX holt, also erst nachdem der AJAX Request verarbeitet wurde.

                                  Request -> Response -> Verarbeitung -> Zugriff
                                  damit kann ich leider nicht soviel anfangen

                                  Dann verstehe ich nicht, warum du mit AJAX arbeitest, wenn du das Grundprinzip nicht verstanden hast.

                                  erklär es mir doch bitte anhand der reihenfolge beim
                                  aufruf/ablauf der vorgänge/funktionen meiner datei!

                                  Datei lädt -> JS Aufruf -> Fehlermeldung

                                  Struppi.

                                  1. @struppi

                                    ich weiß warum ich mit ajax arbeite:

                                    da es verschiedene möglichkeiten der besseren usabilty bietet
                                    das heißt aber noch lange nicht das man auf anhieb verstehen
                                    muß wie es genau funktioniert, sonst würde ich mich auch nicht
                                    an das forum wenden!

                                    leider kann ich mit deinen letzten erklärungen nicht viel
                                    anfangen sie sind einfach zu allgemein.

                                    du sagst bei dir funktioniert es, dann sag mir doch bitte genau
                                    wo nun bei mir der fehler liegt und lass mich nicht rumrätseln!

                                    ich verstehe einfach nicht warum ein objekt zwar angezeigt wird
                                    aber nicht in einer funktion verfügbar ist!

                                    wenn die antworten bitte quellcode bezogen wären, ist mir
                                    das deutlich lieber und würde mir wäre das ganze auch
                                    vesrtändlicher machen für mich machen!

                                    1. ich weiß warum ich mit ajax arbeite:

                                      da es verschiedene möglichkeiten der besseren usabilty bietet
                                      das heißt aber noch lange nicht das man auf anhieb verstehen
                                      muß wie es genau funktioniert,

                                      Nein, aber das grundprinzip solltest du schon verstanden haben, wenn du es einsetzt.

                                      leider kann ich mit deinen letzten erklärungen nicht viel
                                      anfangen sie sind einfach zu allgemein.

                                      Das verstehe ich nicht, sie sind speziell auf deine Frage bezogen.

                                      du sagst bei dir funktioniert es, dann sag mir doch bitte genau
                                      wo nun bei mir der fehler liegt und lass mich nicht rumrätseln!

                                      Das habe ich und Hopsel dir schon mehrmals hier gesagt.

                                      ich verstehe einfach nicht warum ein objekt zwar angezeigt wird
                                      aber nicht in einer funktion verfügbar ist!

                                      Wo wird es angezeigt?

                                      Struppi.

                                      1. ich habe doch bereits schon am anfang gesagt das die betroffenen objekte/bilder z.B. 'img_prev_1' etc. korrekt

                                        in 'data_preview_ajax' dargestellt werden!

                                        wenn ich auf diese klicke erscheinen diese auch in: 'img_preview_src'

                                        nur wenn ich die funktion: func_img_prev(val) beim laden der seite
                                        verwende ist document.getelementbyid('img_rev_1') = null

                                        Fakt & Fazit:

                                        • ich kann den Quellcode der genannten Beispieldatei z.Zt. nicht bereinigen
                                        • bitte nennt mir den Fehler der Platzierung von Funktionen oder Objekten sofern dies der Fall ist & wo und wie man diesen beheben kann!!!

                                        1. ich habe doch bereits schon am anfang gesagt das die betroffenen objekte/bilder z.B. 'img_prev_1' etc. korrekt

                                          in 'data_preview_ajax' dargestellt werden!

                                          Nicht in deinem Beispielcode.

                                          nur wenn ich die funktion: func_img_prev(val) beim laden der seite
                                          verwende ist document.getelementbyid('img_rev_1') = null

                                          Logisch, weil dann das Element nicht existiert. Was soll das rumreiten auf immer den gleichen Aussagen?

                                          Struppi.

                                    2. Hi dude!

                                      ich verstehe einfach nicht warum ein objekt zwar angezeigt wird
                                      aber nicht in einer funktion verfügbar ist!

                                      Struppi hat´s zwar schon geschrieben, trotzdem nochmal: Die URL, die du auf der Beispielseite verwendest, ist falsch.
                                      Das Div wird nicht mit Inhalt gefüllt.
                                      Dazu kommt noch ein unterirdisch schlechter HTML-Code, der gespickt mit Fehlern ist.
                                      Sobald du ein Beispiel hast, das minimal und - soweit dir möglich - von allen Fehlern befreit ist, kann dir geholfen werden.

                                      Aber eine Beispielseite zu zeigen und dann vorzugeben, dass da etwas funktionieren soll, obwohl das überhaupt nicht der Fall ist, ist _extrem_ kontraproduktiv.

                                      MfG H☼psel

                                      --
                                      "It's amazing I won. I was running against peace, prosperity, and incumbency."
                                      George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
                                      Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
                                    3. Hi,

                                      ich weiß warum ich mit ajax arbeite:

                                      da es verschiedene möglichkeiten der besseren usabilty bietet

                                      Es bietet vor allem zahlreiche Möglichkeiten zur *Verschlechterung* der Usability, wenn es von jemandem eingesetzt wird, dem noch Grundkenntnisse über die Technik an sich fehlen.

                                      MfG ChrisB

                                      --
                                      “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
                        2. @struppi:

                          ich habe deinen hinweis befolgt jedoch erhalte
                          ich nun bei alert: undefined

                          und wie gesagt ich nutze den firefox !

                          aber vielleicht kannst du mir noch etwas zu: XMLHttpRequest
                          erzählen!

                          1. ich habe deinen hinweis befolgt jedoch erhalte
                            ich nun bei alert: undefined

                            Dann machst du etwas falsch.

                            und wie gesagt ich nutze den firefox !

                            das ist eune gute Wahl

                            aber vielleicht kannst du mir noch etwas zu: XMLHttpRequest
                            erzählen!

                            Du erwartest doch nicht, dass ich so eine Anfrage ernst nehme? Es gibt über AJAX Bücher und du erwartest, dass ich mal so nebenbei locker in einem Forum dir "irgendwas zu" erzähle????

                            Struppi.

                        3. Hi,

                          so dann schaut mal und versucht euer glück:

                          http://test.dbf.de1.cc/ajax1.html

                          Mit was?

                          Beschreibe bitte, *wie* dieses Dokument zu bedienen ist, um den Fehler zu reproduzieren.
                          Ich habe keine Lust, irgendwo herumzuklicken und darauf zu warten, dass er irgendwann mal Auftritt.

                          Und dass schon vor dem ersten getElementById-Fehler eine handvoll weitere Fehlermeldungen in der JS-Console auftauchen, sollte dir auch zu denken geben. Vielleicht beseitigst du deren Ursachen erst mal.

                          MfG ChrisB

                          --
                          “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
                    2. ids werden nicht doppelt vergeben.

                      Dann macht deine Fehlermledung keinen Sinn, zumindest nicht mit dem Code, den du uns gezeigt hast, aber das sagte ich bereits. Es wäre einfacher, wenn du ein Beispiel zeigen könntest, das den Fehelr erzeugt, von dem du sprichst.

                      nun bin ich trotzdem etwas ratlos und
                      habe keine ahnung was ich noch machen kann !!!!

                      Ich habe dir doch schon einen funktionierenden Beispielcode gezeigt, wie wäre es, wenn du denn einfach benutzt?

                      Struppi.

            2. ok hier nun der CODE:
              1.) view.php
              ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
              <div>
              <script type="text/javascript">

              function display_data(id,type,gal) {

              xmlhttp=GetXmlHttpObject();

              if (xmlhttp==null) {
                  
                      alert ("Your browser does not support AJAX!");
                      return;
                  }

              var url= "http://domain/data.php";
                  url=url+"?type="+type+"&id="+id+"&gal="+gal;

              xmlhttp.onreadystatechange=function() {
                  
                      if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
                     
                          document.getElementById('data_preview_ajax').innerHTML = xmlhttp.responseText;
                      }
                  }

              xmlhttp.open("GET",url,true);
                  xmlhttp.send(null);
              }

              function GetXmlHttpObject() {

              var xmlhttp=null;
                  try {
                      // Firefox, Opera 8.0+, Safari
                      xmlhttp=new XMLHttpRequest();
                  }
                  catch (e) {
                      // Internet Explorer
                      try {
                          xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
                      }
                      catch (e) {
                          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                      }
                  }

              return xmlhttp;
              }

              							function func\_img\_prev(val) {  
              

              document.getElementById('img_preview_src').src=document.getElementById('img_prev_' + val).src;
              document.getElementById('data_preview').innerHTML='<input type="hidden" name="pic_preview" value="' + val+ '">';

              alert(document.getElementById("img_prev_" + val).src);

              							};  
              							  
              							func\_img\_prev(1);  
              

              </script>
              <div id="data_preview_ajax" style="height:110px; width:260px; overflow: auto; float: left"></div>
              <div id="img_preview" style="margin-left:280px; height:100px; width:150px;"><img id="img_preview_src" src="../img/leistungen_no_prev_small.jpg" height="100"></div>
              div id="data_preview"></div>
              </div>

              ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
              2.) data.php
              ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
              <div style="width:20px; height:95px; float:left; padding:5px 0 0 7px; margin:0 10px 0 0px; background-color:#c5d5fc"><b>01</b></div> <img id="img_prev_1" src="../images/galerie/gal_1/dat_46deefcb3ba260ea267ed404e0ec4d22.jpg" height="100" border="0" name="1" onclick="JavaScript:func_img_prev(1)"><p>

              1. Wenn dein Code keinen syntaxfehler (Fehlerkosnole) enthält, funktioniert er problemlos (ausser ein kleineres Problemen im IE: da du nicht abwartest ob der Request schon fertig ist, führt ein überschreiben des HTTPRequest Objektes zu einer Fehlermeldung).

                Aber ich frage mich warum du meinen Hinweis nicht umsetzt?

                onclick="func_img_prev(this)"

                function func_img_prev(obj) {  
                  
                document.getElementById('img_preview_src').src= obj.src;  
                document.getElementById('data_preview').innerHTML='<input type="hidden" name="pic_preview" value="' + obj.id + '">';  
                  
                alert(obj.src);  
                };
                

                Struppi.

      2. die code vereinfachung ist genehmgigt ;-)

        Dann brauchst du getElementById auch nicht mehr.

        das ist aber nicht das Problem, denn im Firefox 3.5.7 erhalte ich:

        document.getElementById('img_prev_1') is null

        wie schon einmal gesagt, nicht mit dem Code, den du uns gezeigt hast, dort wird das Element problemlos gefunden.

        ich verstehe es leider auch nicht!
        woran könnte es dennoch liegen?

        Das Wissen wir nicht, weil du uns nicht den code zeigst, der zu der Fehlermeldung führt.

        Struppi.