Why isn't this JavaScript executed?

Question

I was actually not going to, and am afraid of asking such a silly question, but i have completely no clue what is going wrong here.

My JavaScript

function ahah(url, target) {
  document.getElementById(container).innerHTML = ' Fetching data...';
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {ahahDone(url, target);};
    req.open("GET", url, true);
    req.send("");
  }
}  

function ahahDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(container).innerHTML = req.responseText;
    } else {
      document.getElementById(container).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

function load(name, div) {
    ahah(name,div);
    return false;
}

My HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

    <title>Container</title> 


<!-- GET YOURSELF SOME JAVASCRIPT -- >
    <script type="text/javascript" src="mootools.svn.js"></script>
    <!--script type="text/javascript" src="js/jQuery.js"></script-->    
    <script type="text/javascript" src="js/reflection.js"></script> 
    <script type="text/javascript" src="js/jquery.js"></script>
    <!--script type="text/javascript" src="js/javas.js"></script-->
    <script type="text/javascript" src="js/getstuff.js"></script>
    <script type="text/javascript" src="js/ahah.js"></script>
    <script type="text/javascript">
        window.addEvent('domready', function(){
        var mySlide = new Fx.Slide('top-panel');
        mySlide.hide(); $('toggle').addEvent('click', function(e){
        e = new Event(e);
        mySlide.toggle();
        e.stop();
        });
        });
    </script>

    <!--script type="text/javascript" src="js/request.js"></script-->
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body onload="getlogo()">
<div id="top-panel">
    <!-- Top Panel content here -->
    <table class="panel" border="0" width="100%" align="center">
    <tr>
        <td></td>
        <td align="left" width="15%">
            <ul>
                <li>    <a href="index.html" class="panel">Home (F5)</a></li>
                <li>    <a href="#" class="panel" onclick="gettermine()">Termine</a></li>
                <li>    <a href="#" class="panel" onclick="getsomethingelse()">Material</a></li>

            </ul>
        </td>
        <td align="left" width="30%">
            <ul>
                <li>    <a href="#" class="panel" onclick="getsomethingelse()">Flechten mit frischen Weiden</a></li>
                <li>    <a href="#" class="panel" onclick="getsomethingelse()">Flechten mit getrockneten Weiden</a></li>
                <li>    <a href="#" class="panel" onclick="getanfahrt()">Anfahrt</a>    </li>
            </ul>
        </td>
        <td align="left" width="15%">
            <ul>
                <li>    <a href="#" onclick="getsomethingelse()" class="panel">Hauswurz</a> </li>
                <li>    <a onclick="getsomethingelse()" href="#" class="panel">Kontakt</a>  </li>
                <li>    <a onclick="getsomethingelse()" href="#" class="panel">Impressum</a>    </li>
            </ul>
        </td>
        <td align="left" width="15%">
            <ul>
                <li>    <a href="#" onclick="getsomethingelse()" class="panel">Support</a>  </li>
                <li>    <a href="about.html" onclick="load('about.html','container');return false;" class="panel">Profil</a>    </li>
            </ul>
        </td>
    </tr>
    </table>
</div>

<div id="sub-panel">
    <a href="#" id="toggle"><span>Mehr</span></a>
</div>
<!--div id="container"-->
<div id="container">
    <div id="logo">
        <!--img src="img/logo.png"-->
    </div>
    <div align="center" id="tagline">   
        <a onclick="getanfahrt()" class="navlink" href="#">Fricker 1, 88285 Bodnegg</a> | <a href="#" class="navlink" onclick="getkontakt()">07520/914249</a> | <a class="navlink" href=mailto:weidennest@web.de>weidennest@web.de</a>
    </div>
</div>
</body>
</html>

The JavaScript should be executed by the link:

<a href="about.html" onclick="load('about.html','container');return false;" class="panel">

But when the link is clicked, nothing happens. Firebug says that everything is loaded fine.

It would be really great if someone would leave the answer with a short explanation!

Thanks a lot in advance!

Benny: i've copied in the code you were linking to, as having to follow the indirect links to it on pastebay isn't very friendly. For future reference: if you can't pare your code down to just a small example of the problem, you might want to try http://doctype.com/ — Shog9, Sep 08 '09 at 19:33

score 3 · Accepted Answer · answered Sep 08 '09 at 19:31

3

In your 'ahah' function, should

document.getElementById(container).innerHTML = ' Fetching data...';

Be

document.getElementById(target).innerHTML = ' Fetching data...';

?

answered Sep 08 '09 at 19:31

Mark

106,305
20
172
230

well, this script works, but now another one (the sliding top panel) does not work. this is my html: http://pastebay.com/52801 . the javascript i am talking about is the one directly written in the HTML (i am 99% sure that the javascript is valid - and i linked the full code here because it would not make much sense to shorten things) – ngmir Sep 09 '09 at 12:48
hm, looks like the imported jquery caused this problem. commented it out as i dont need jquery. thanks. – ngmir Sep 09 '09 at 14:30

score 1 · Answer 2 · edited May 23 '17 at 10:32

When using innerHTML to re-define some part of the page, the <script> tags that are contained in the HTML portion you are inserting into the page are not executed -- that's just the way it is.

You'll have to use some other way to add you data to the page ; like DOM manipulation, for instance, I suppose.

There are some elements that might help under this question : Can scripts be inserted with innerHTML?

score 0 · Answer 3 · answered Sep 08 '09 at 19:44

Changed the function ahah() slightly:

function ahah(url, target) {
  document.getElementById(target).innerHTML = ' Fetching data...'; // change container to target
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
    req.onreadystatechange = function() {ahahDone(url, target);};
    req.open("GET", url, true);
    req.send(null); // sending a GET request - do not send any data.
  }
}

Check if the variable "req" is properly assigned and the AJAX request is indeed sent.

Why isn't this JavaScript executed?

My JavaScript

My HTML

3 Answers3

Linked