.innerHTML und Seite wird neu geladen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • .innerHTML und Seite wird neu geladen

    Hi,

    mein Problem ist jetzt folgendes.

    Ich lade in einer index.php mittels ajax externe Seiten (wo es keine fehler gibt).

    Ich hatte zuerst in einer dieser externen Seiten folgenden javascript-code (das wird durch php generiert) gehabt:

    Quellcode

    1. <script type="text/javascript">
    2. jmolMenu([["","Hintergrundfarbe","true"],
    3. ["background black;","schwarz"],
    4. ["background white;","weiss"],
    5. ["background gray;","grau"],
    6. ["background blue;","blau"],
    7. ["background red;","rot"],
    8. ["background yellow;","gelb"]],1);
    9. </script>
    diese js wird natürlich nicht ausgeführt wenn es in der index.php durch ajax in ein div geladen wird.

    Ich hab darauf hin den Inhalt der externen Datei wie folgt umgeändert:

    Quellcode

    1. jmolMenu([["","Hintergrundfarbe","true"],
    2. ["background black;","schwarz"],
    3. ["background white;","weiss"],
    4. ["background gray;","grau"],
    5. ["background blue;","blau"],
    6. ["background red;","rot"],
    7. ["background yellow;","gelb"]],1);
    Die index.php hab ich wie folgt angepasst:


    Quellcode

    1. a = document.createElement('script');
    2. a.setAttribute('type','text/javascript');
    3. a.innerHTML=das_von_oben
    4. getElement("id",das_div).appendChild(a);
    das Problem ist jetzt das der Browser die seite neu lädt, wo sich aber nur noch der code von oben drinne befindet.

    was muss ich machen, damit das js an der entsprechenden stelle in der index.php steht und auch funktioniert?

    MfG exit

  • Hi,
    hast du ein Online Beispiel? Da ist nichts falsches dran...
    Hier mal meine leicht umgeschriebene Variante:

    Quellcode

    1. var feedback = document.createTextNode(req.responseText);
    2. var script = document.createElement('script');
    3. script.setAttribute('type','text/javascript');
    4. script.appendChild(feedback);
    5. document.getElementById("message").appendChild(script);

  • ich hab hier mal 2 beispiel seiten, die js-variante im 2ten beispiel wurde mir in einem anderem forum als tipp gegeben, es passiert aber das selbe wie in dem von mir beschriebene.

    also die erste Datei sieht wie folgt aus:

    Quellcode

    1. <html>
    2. <head>
    3. <title>Test</title>
    4. <script type="text/javascript">
    5. <!--
    7. //-->
    8. </script>
    9. <script src="./dateien/jmol/Jmol.js" type="text/javascript"> </script>
    10. <style type="text/css">
    11. <!--
    12. -->
    13. </style>
    14. </head>
    15. <body>
    16. <div id="test">
    17. <script type="text/javascript">
    18. jmolMenu([["","Hintergrundfarbe","true"],
    19. ["background black;","schwarz"],
    20. ["background white;","weiss"],
    21. ["background gray;","grau"],
    22. ["background blue;","blau"],
    23. ["background red;","rot"],
    24. ["background yellow;","gelb"]],1);
    25. </script>
    26. </div>
    27. <div id="test2">hallo</div>
    28. </body>
    29. </html>
    Alles anzeigen


    anzuschauen unter test2.html

    man beachte das unter dem drop-down-menü das div mit "hallo" steht bzw. auch angezeigt wird.


    Jetzt die 2te Datei mit dem was mir vorgeschlagen wurde (was aber den selben effekt hat wie das von oben):

    Quellcode

    1. <html>
    2. <head>
    3. <title>Test</title>
    4. <script type="text/javascript">
    5. <!--
    6. function jmolMenu()
    7. {
    8. alert('geht');
    9. }
    11. window.onload=function()
    12. {
    13. eval(document.getElementsByTagName('div')[0].innerHTML);
    14. }
    15. //-->
    16. </script>
    17. <script src="./dateien/jmol/Jmol.js" type="text/javascript"> </script>
    18. <style type="text/css">
    19. <!--
    20. -->
    21. </style>
    22. </head>
    23. <body>
    24. <div id="test">
    26. jmolMenu([["","Hintergrundfarbe","true"],
    27. ["background black;","schwarz"],
    28. ["background white;","weiss"],
    29. ["background gray;","grau"],
    30. ["background blue;","blau"],
    31. ["background red;","rot"],
    32. ["background yellow;","gelb"]],1);
    34. </div>
    35. <div id="test2">hallo</div>
    36. </body>
    37. </html>
    Alles anzeigen


    anzuschauen unter test.html

    man beachte das das div mit dem inhalt "hallo" nicht mehr angezeigt wird. Da durch den eval Aufruf scheinbar die ganze Seite neu geladen wird, aber nur noch mit den js-zeug

    das selbe passiert auch bei dem:

    Quellcode

    1. a = document.createElement('script');
    2. a.setAttribute('type','text/javascript');
    3. a.innerHTML=das_von_oben
    4. getElement("id",das_div).appendChild(a);



    es soll aber wie bei test2.html aussehen!

  • Vielleicht liegts ja an dem jmolMenu Menü.

    Hier mein funktionierendes Beispiel. In der status.php steht einfach nur ein alert.

    Quellcode

    1. <html><head><title>Server zu Client Kommunikation</title>
    2. <script type="text/javascript">
    3. <!--
    4. function ajax() {
    5. req = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
    6. req.onreadystatechange = function() {
    7. if ((req.readyState == 4) && (req.status == 200)) {
    8. var feedback = document.createTextNode(req.responseText);
    9. var script = document.createElement('script');
    10. script.setAttribute('type','text/javascript');
    11. script.appendChild(feedback);
    12. document.getElementById("message").appendChild(script);
    13. }
    14. }
    15. req.open('get', 'status.php');
    16. req.send(null);
    17. }
    18. //-->
    19. </script>
    20. </head>
    21. <body onload="ajax()">
    22. <div id="message" style="background-color:#bfbfbf"></div>
    23. </body>
    24. </html>
    Alles anzeigen


    Was für einen Sinn hat es eigentlich das Script via AJAX nachzuladen? Gehts dir vielleicht um eine Individualisierung für Benutzer?
    Man kann nämlich auch einfach php-Dateien als JavaScript einbinden

    Quellcode

    1. <script type="text/javascript" src="script.php"></script>