second external javscript file not loaded

Question

Hi

I have these lines in my html head section

<script type="text/javascript" src="../behaviour/location.js"></script>
<script type="text/javascript" src="../behaviour/ajax.js"></script>

When I use either in isolation, the code in the external files executes as expected.

However, when I use both, I find that neither works correctly. What do I need to do to fix this?

location.js

// JavaScript Document

function addLoadEvent (func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            oldonload();
            func;
        }
    }
}

//county changer
function countyUpdate (message) {

    var name = message.getAttribute("name");
    var check = message.checked;
    var countyId = message.getAttribute("id");
    var countyId = countyId.split("_")[1];
    var innerpost = document.getElementById("innerpost_"+countyId); 
    var checks = innerpost.getElementsByTagName("input");

    for (var i = 0; i< checks.length; i++) {
        if (checks[i].checked == true && check == true) {
        checks[i].checked = false; 
        }
    }

}

//postcode changer
function postcodeUpdate (message) {
    var parent = message.parentNode.parentNode.getAttribute("id").split("_")[1];
    var county = "county_"+parent;
    var checkbox = document.getElementById(county);
    var checked = message.checked;

    if (checked == true) {
        checkbox.checked = false;
    }


}

//get a dynamic list of al postcode checkboxes
function getCounties () {
var county = document.getElementsByTagName("input");


for (var i = 0; i< county.length; i++) {
var check = county[i].getAttribute("type");

if (check == "checkbox") {  
var name = county[i].getAttribute("name");
var parent = county[i].parentNode.parentNode.getAttribute("id");
var parent = parent.split("_")[0];

//action for county
if (parent != "innerpost") {
county[i].onclick = function() { countyUpdate(this); };

    }//if


    //action for postcode
    if (parent == "innerpost") {
    county[i].onclick = function() { postcodeUpdate (this); }; 
    }//if

    }//if
    }//for
    }//function

    addLoadEvent (getCounties);

ajax.js

function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","cart.php",true);
xmlhttp.send();
}

And this is the inline code to activate the second file:

<button type="button" onclick="loadXMLDoc()">Change Content</button>

When I try using both files together, I don't seem to be able to use any functions (not even simple alerts wrapped in a function).

Answer 1

This would happen if the scripts conflict with each other.

Please show us the scripts and the error messages.

Answer 2

When I use either in isolation, the code in the external files executes as expected.

However, when I use both, I find that neither works correctly. What do I need to do to fix this?

It sounds like you have a conflict somewhere in the two files. Like a function that is named the same or a variable etc.

Having not seen the files you could:
1. Track down the naming conflict (if that is what it is) and change one.
2. Encapsulate the code in the files in different objects and access the methods/properties etc. through there.

Answer 3

My bet is that you're getting a mess out of that window.onload= juggling. I suggest you use the standard window.addEventListener() interface (check for its existance and use window.attachEvent() when the standard interface is missing if you want to support IE too). This should also guarantee that the onload functions get executed in the same order as the scripts that set them. Something like:

if (window.addEventListener) {
  window.addEventListener('load', somefunc, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', somefunc);
} // else, no way to add multiple onload handlers