window.onload from two functions breaks my code

[wuzhannanan]

Hi, I have my page here. There is a tab system on the page that uses javascript. View the source the see the javascript file (tabber9.compressed.js).

Now, on my end, I am adding some tracking code. The code looks like this:

<SCRIPT TYPE='text/javascript' LANGUAGE='JavaScript'><!--    //
    window.onload = initPage;
    function initPage() {
        if (this.GetCustomerGUID)
            document.forms["Test"].elements["CustomerGUID"].value = GetCustomerGUID();
    }
//--></SCRIPT>

The problem is, when I add this code to my footer, it breaks the tab system. The tabs don't work any more.

I am not a JavaScript expert by any means (or else I would have known what the issue is! lol) but, I guess it has something to do with the window.onload function? I say that because I see the window.onload code in the tabber javascript as well.

Any advice or help anyone can give would be greatly appreciated. Thanks in advance for any help!

[Old Pedant]

Instead of using window.onload, you can *add* your onload event handler to the existing handlers.

But another way is to simply call one of the onload initializations from the other.

For example, if you have:

window.onload = setupTabbber;
...
window.onload = initPage;
...

The second onload will, as you noted, wipe out the first one.

So just call the first one from your initPage, thus:

   function initPage() {
        setupTabber( );
        if (this.GetCustomerGUID)
            document.forms["Test"].elements["CustomerGUID"].value = GetCustomerGUID();
    }

The other way to do it is to create an onload-appender, but now you get into the world of browser dependencies.

function addOnLoad( functionToCall )
{
    if (window.addEventListener) {
        window.addEventListener('load', functionToCall, false);
    } else if (window.attachEvent) {
        window.attachEvent('onload', functionToCall);
    }
} 

... and then do ...

addOnLoad( setupTabber );
...
addOnLoad( initPage );
...

[wuzhannanan]

OK, I tried adding setupTabber( ); to the initPage function like you described, and it did not solve my problem. Do I also need to modify the tabber js?

[rnd me]

Originally Posted by wuzhannanan

The problem is, when I add this code to my footer, it breaks the tab system. The tabs don't work any more.

take out the onload wrap: if your script is at the bottom, you don't need it anyways because all the needed elements will be on the page by the time the browser gets to processing the footer.

likewise, you could probably init the tabs immediately at the bottom of the page too, right above the tracker code. i doubt either one needs to wait all the way until onload to run it's code. Typically, it's only when working with images or dynamically sizing containers that have images when waiting for window.onload() is worth it.