Javascript won't execute

Question

I'm working on a new website. I have coded many before but not as advanced as this one. I have one html file which is the main page. Now, I am changing the content of the page via ajax. Everything works fine. So when I click on, lets say, the "Home" menu, it calls the function, and gets ANOTHER HTML file which has content in it.

In my main html I have this:

<html>
    <head>
    <title>
        Estancia
    </title>
    <link rel="stylesheet" href="css/stylesheet.css"/>
    <link rel="stylesheet" href="webfont/webFontStylesheet.css" type="text/css" charset="utf-8"/>
    <script type="text/javascript" src="js/ajax.js"></script>
</head>
<body onLoad = "javascript:home()">
    <div id = "bodyLeft">
        <!-- This is just a sideskirt -->
    </div>
    <div id = "bodyRight">
        <!-- This is just a sideskirt -->
    </div>

    <div id = "header">
        <h1>
            Estancia
        </h1>

    </div>
    <div id = "footer">
        <h5>
            Copyright&copy; 2013
        </h5>
    </div>
    <div id = "background">
        <!-- This is just the background color -->
    </div>
    <div id = "scrollCover">
        <!-- Used to cover the scrolled content -->
    </div>
    <div id = "body">

    </div>
    <div id = "content">
        If you see this then the page did not load correctly. Try reloading the page. If problem persists, try reinstalling the Mozilla Firefox Browser. <br/><br/> Error: Javascript may not be working. <br/> Fix: Enable Javascript in your browser.
    </div>
    <div id = "menu">
        <div id = "home" onClick="javascript:home()">
            <a href = "#"> Home </a>
        </div>
        <div id = "information">
            <a href = "#"> Information </a>
            <span id = "aboutDrop">
                <a class = "about" href="#" onClick = "javascript:about()"> About </a>
                <br/>
                <a class = "map" href="#" onClick = "javascript:map()"> Map </a>
            </span>
        </div>
        <div id = "history" onClick = "javascript:history()">
            <a href = "#"> History </a>
        </div>
        <div id = "pictureGallary">
            <a href = "#"> Picture Gallary </a>
            <span id = "pictureGalleryDrop">
                <a class = "ef" href = "#" onClick = "javascript:estanciaFarm()"> Estancia Farm </a>
                <br/>
                <a class = "ca" href = "#" onClick = "javascript:cattle()"> Cattle </a>
                <br/>
                <a class = "ga"href = "#" onClick = "javascript:game()"> Game </a>
                <br/>
                <a class = "go" href = "#" onClick = "javascript:goats()"> Goats </a>
                <br/>
                <a class = "sh" href = "#" onClick = "javascript:sheep()"> Sheep </a>
            </span>
        </div>
    </div>
</body>

No problems here... when I click it loads correctly. So, when Home is clicked, it changes the content via ajax like this:

var xmlhttp = new XMLHttpRequest();
    var path;
    var div;

function home()
{
    path = "html/home.html";
    div = "content";
    AJAX(path, div);
}

    function AJAX(path, div)
{
    xmlhttp.open("GET", path, false);
    xmlhttp.send();
    if (xmlhttp.readyState == 4)
    {
        document.getElementById(div).innerHTML = xmlhttp.responseText;
    }
}

As you can see it loads another html file onto the content. So, here is that html file's code:

<html>
<head>
    <link rel="stylesheet" href="css/homeMenu.css"/>
    <script type="text/javascript" src="js/javascript.js"></script>
</head>
<body>
    <div id = "slideshow">
        <div id = "first">
            <img id = "a1" src = "images/home/img1_e.jpg"/>
            <img id = "a2" src = "images/home/img2_e.jpg"/>
            <img id = "a3" src = "images/home/img3_e.jpg"/>
            <img id = "a4" src = "images/home/img4_e.jpg"/>
        </div>
        <div id = "second">
            <img id = "b4" src = "images/home/img4_e.jpg"/>
            <img id = "b1" src = "images/home/img1_e.jpg"/>
            <img id = "b2" src = "images/home/img2_e.jpg"/>
            <img id = "b3" src = "images/home/img3_e.jpg"/>
        </div>
        <div id = "third">
            <img id = "c3" src = "images/home/img3_e.jpg"/>
            <img id = "c4" src = "images/home/img4_e.jpg"/>
            <img id = "c1" src = "images/home/img1_e.jpg"/>
            <img id = "c2" src = "images/home/img2_e.jpg"/>

        </div>
        <div id = "fourth">
            <img id = "d2" src = "images/home/img2_e.jpg"/>
            <img id = "d3" src = "images/home/img3_e.jpg"/>
            <img id = "d4" src = "images/home/img4_e.jpg"/>
            <img id = "d1" src = "images/home/img1_e.jpg"/>
        </div>
    </div>
    </body>

When I load this html file on its own, it works fine. All I need to change is to add "../" to every image path's beginning. I'm sure you would know why. Fast description is that if its on its own, it if in another file, so it needs to go back once. when it loads via ajax into the other html which is the main one, its outside every file and just goes into it. OK, So that is clear.

The problem... the ONLY problem I'm facing is that when I load the home.html file on its own, it executes its javascript like a piece of cake.

BUT, when it loads into the main html, it soes not work. THERE is NO way its executing. I've tried internal javascript but its not working, still.

Here's the javascript:

var useBSNns;

        if (useBSNns)
        {
            if (typeof(bsn) == "undefined")
                bsn = {}
            var _bsn = bsn;
        }
        else
        {
            var _bsn = this;
        }

        _bsn.Crossfader = function (divs, fadetime, delay )
        {   
            this.nAct = -1;
            this.aDivs = divs;

            for (var i=0;i<divs.length;i++)
            {
                document.getElementById(divs[i]).style.opacity = 0;
                document.getElementById(divs[i]).style.position = "absolute";
                document.getElementById(divs[i]).style.filter = "alpha(opacity=0)";
                document.getElementById(divs[i]).style.visibility = "hidden";
            }

            this.nDur = fadetime;
            this.nDelay = delay;

            this._newfade();
        }

        _bsn.Crossfader.prototype._newfade = function()
        {
            if (this.nID1)
                clearInterval(this.nID1);

            this.nOldAct = this.nAct;
            this.nAct++;
            if (!this.aDivs[this.nAct]) this.nAct = 0;

            if (this.nAct == this.nOldAct)
                return false;

            document.getElementById( this.aDivs[this.nAct] ).style.visibility = "visible";

            this.nInt = 50;
            this.nTime = 0;

            var p=this;
            this.nID2 = setInterval(function() { p._fade() }, this.nInt);
        }

        _bsn.Crossfader.prototype._fade = function()
        {
            this.nTime += this.nInt;

            var ieop = Math.round( this._easeInOut(this.nTime, 0, 1, this.nDur) * 100 );
            var op = ieop / 100;
            document.getElementById( this.aDivs[this.nAct] ).style.opacity = op;
            document.getElementById( this.aDivs[this.nAct] ).style.filter = "alpha(opacity="+ieop+")";

            if (this.nOldAct > -1)
            {
                document.getElementById( this.aDivs[this.nOldAct] ).style.opacity = 1 - op;
                document.getElementById( this.aDivs[this.nOldAct] ).style.filter = "alpha(opacity="+(100 - ieop)+")";
            }

            if (this.nTime == this.nDur)
            {
                clearInterval( this.nID2 );

                if (this.nOldAct > -1)
                    document.getElementById( this.aDivs[this.nOldAct] ).style.visibility = "hidden";    

                var p=this;
                this.nID1 = setInterval(function() { p._newfade() }, this.nDelay);
            }
        }

        _bsn.Crossfader.prototype._easeInOut = function(t,b,c,d)
        {
            return c/2 * (1 - Math.cos(Math.PI*t/d)) + b;
        }

Please, what is going wrong that it does not want to execute when home.html its being loaded into the main html but when home.html is executed on its own it works?

It sounds to me like you're losing your event handlers as you're reloading part of the page with ajax. Does your ajax request overwrite everything? — TommyBs, Jan 06 '13 at 17:03
Yes I think it overwrites everything, as when I click on another menu item, it takes away everything and replaces that whole div with the content, lets say, with the about.html file which gets loaded into that div with ajax. — Fred, Jan 06 '13 at 17:18
Something like this: function game() { path = "html/game.html"; div = "content"; AJAX(path, div); } function goats() { path = "html/goats.html"; div = "content"; AJAX(path, div); } function sheep() { path = "html/sheep.html"; div = "content"; AJAX(path, div); } function AJAX(path, div) { xmlhttp.open("GET", path, false); xmlhttp.send(); if (xmlhttp.readyState == 4) { document.getElementById(div).innerHTML = xmlhttp.responseText; } } — Fred, Jan 06 '13 at 17:20
Maybe this helps: http://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml — Alex, Jan 06 '13 at 22:58

zombiehugs · Accepted Answer · 2013-01-06T19:18:33.023

I know you've put a lot of work into what you have but it might be beneficial to look in to a jQuery plugin, such as Cycle. http://malsup.com/jquery/cycle

Otherhand, you need to remove <script type="text/javascript" src="js/javascript.js"></script> from the Home.html page you are retrieving and have that in the head of the main.html file you are loading your secondary pages from. It will be called not be executed inline via the AJAX load which is the problem you are having. So we move it to the main.html and we will call it manually when our home.html page is loaded.

I've altered your AJAX method to take a callback method or function when AJAX is successful. You will see the third parameter to your AJAX method is the function to call when done, in our case it is startBSN you will see where I wrapped your js/javascript function further down with this method.

var xmlhttp = new XMLHttpRequest();
var path;
var div;

function home()
{
   path = "html/home.html";
   div = "content";
   AJAX(path, div, 'startBSN');
}

function AJAX(path, div, callback)
{
    xmlhttp.open("GET", path, false);
    xmlhttp.send();
    if (xmlhttp.readyState == 4)
    {
       document.getElementById(div).innerHTML = xmlhttp.responseText;
       window[callback]();
    }
}

I've removed your js/javascript.js and included it in the head of main.html, you should remove it from your home.html

I've also wrapped your js/javascript.js code into a callable function called startBSN otherwise it would run on page load as anonymous functions.

Here is your js.javascript file with the surrounding function startBSN

function startBSN(){
    var useBSNns;

    if (useBSNns)
    {
        if (typeof(bsn) == "undefined")
            bsn = {}
        var _bsn = bsn;
    }
    else
    {
        var _bsn = this;
    }


    _bsn.Crossfader = function (divs, fadetime, delay )
    {   
        this.nAct = -1;
        this.aDivs = divs;

        for (var i=0;i<divs.length;i++)
        {
            document.getElementById(divs[i]).style.opacity = 0;
            document.getElementById(divs[i]).style.position = "absolute";
            document.getElementById(divs[i]).style.filter = "alpha(opacity=0)";
            document.getElementById(divs[i]).style.visibility = "hidden";
        }

        this.nDur = fadetime;
        this.nDelay = delay;

        this._newfade();
    }

    _bsn.Crossfader.prototype._newfade = function()
    {
        if (this.nID1)
            clearInterval(this.nID1);

        this.nOldAct = this.nAct;
        this.nAct++;
        if (!this.aDivs[this.nAct]) this.nAct = 0;

        if (this.nAct == this.nOldAct)
            return false;

        document.getElementById( this.aDivs[this.nAct] ).style.visibility = "visible";

        this.nInt = 50;
        this.nTime = 0;

        var p=this;
        this.nID2 = setInterval(function() { p._fade() }, this.nInt);
    }

    _bsn.Crossfader.prototype._fade = function()
    {
        this.nTime += this.nInt;

        var ieop = Math.round( this._easeInOut(this.nTime, 0, 1, this.nDur) * 100 );
        var op = ieop / 100;
        document.getElementById( this.aDivs[this.nAct] ).style.opacity = op;
        document.getElementById( this.aDivs[this.nAct] ).style.filter = "alpha(opacity="+ieop+")";

        if (this.nOldAct > -1)
        {
            document.getElementById( this.aDivs[this.nOldAct] ).style.opacity = 1 - op;
            document.getElementById( this.aDivs[this.nOldAct] ).style.filter = "alpha(opacity="+(100 - ieop)+")";
        }

        if (this.nTime == this.nDur)
        {
            clearInterval( this.nID2 );

            if (this.nOldAct > -1)
                document.getElementById( this.aDivs[this.nOldAct] ).style.visibility = "hidden";    

            var p=this;
            this.nID1 = setInterval(function() { p._newfade() }, this.nDelay);
        }
    }

    _bsn.Crossfader.prototype._easeInOut = function(t,b,c,d)
    {
        return c/2 * (1 - Math.cos(Math.PI*t/d)) + b;
    }
}

Hi John, yes, I see what you are doing and I tried it. The javascript file's purpose is to fade the images. I input an alert("Calls!") and it calls the file correctly but my images still does not start to fade. This works when I load the home.html on its own but for some reason not when I'm using ajax. I dont know... I'm going start to pull my hair out. — Fred, Jan 06 '13 at 19:12
I know you've put a lot of work into what you have but it might be beneficial to look in to a jQuery plugin, such as Cycle. http://malsup.com/jquery/cycle/ — zombiehugs, Jan 06 '13 at 19:16
Ok cool... jQuery will then have to do because its working. Just will have to google and copy and paste the code then. Thanks. — Fred, Jan 07 '13 at 06:22
No problem. This might ease the pain for you. Let someone else's code do the work. Best of luck! — zombiehugs, Jan 07 '13 at 15:38

Javascript won't execute

1 Answers1