javascript not being called

Question

Hello, I have the following javascript functions, which when in a standalone file, will be called correctly from a page.

function deleteItem(layer, url) {
    var xmlHttp=GetXmlHttpObject();
    if(xmlHttp==null) {
     alert("Your browser is not supported?");
    }
    xmlHttp.onreadystatechange = function() {
     if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
      if(xmlHttp.responseText == 'result=true') {
       var row = document.getElementById(layer);
       row.parentNode.removeChild(row);
      }
      document.getElementById(layer).innerHTML=xmlHttp.responseText;
     } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
      document.getElementById(layer).innerHTML="loading";
     }
    }
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}
function deleteRec(layer, pk) {
    url = "get_records.php?cmd=deleterec&pk="+pk+"&sid="+Math.random();
    if (confirm("Confirm Delete?")) {
     deleteItem(layer, url);
    }
}
function GetXmlHttpObject() {
    var xmlHttp=null;
    try {
     xmlHttp=new XMLHttpRequest();
    }
    catch (e) {
     try {
      xmlHttp =new ActiveXObject("Microsoft.XMLHTTP");
     }
     catch (e) {
     }
    }
    return xmlHttp;
}

It is called like so:

 echo '<td><a href="#" onclick="deleteRec(\'article_' . $pk .'\', \'' . $pk . '\')">DELETE</a></td>' . "\n";

This displays the confirm dialog, and will delete the page if OK is clicked, as it should.

However.

When my other necessary functions are placed in the js file, nothing will happen.

function update(layer, url) {
    var xmlHttp=GetXmlHttpObject();
    if(xmlHttp==null) {
     alert("Your browser is not supported?");
    }
    xmlHttp.onreadystatechange = function() {
     if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
      document.getElementById(layer).innerHTML=xmlHttp.responseText;
     } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
      document.getElementById(layer).innerHTML="loading";
     }
    }
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}
function updateByPk(layer, pk) {
    url = "get_auction.php?cmd=GetAuctionData&pk="+pk+"&sid="+Math.random();
    update(layer, url);
}
function updateByQuery(layer, query) {
    url = "get_records.php?cmd=GetRecordSet&query="+query+"&sid="+Math.random();
    update(layer, url);
}
function updateByPage(layer, query, pg) {
    url = "get_records.php?cmd=GetRecordSet&query="+query+"&pg="+pg+"&sid="+Math.random();
    update(layer, url);
}
function deleteItem(layer, url) {
    var xmlHttp=GetXmlHttpObject();
    if(xmlHttp==null) {
     alert("Your browser is not supported?");
    }
    xmlHttp.onreadystatechange = function() {
     if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
      if(xmlHttp.responseText == 'result=true') {
       var row = document.getElementById(layer);
       row.parentNode.removeChild(row);
      }
      document.getElementById(layer).innerHTML=xmlHttp.responseText;
     } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
      document.getElementById(layer).innerHTML="loading";
     }
    }
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}
function deleteRec(layer, pk) {
    url = "get_records.php?cmd=deleterec&pk="+pk+"&sid="+Math.random();
    if (confirm("Confirm Delete?")) {
     deleteItem(layer, url);
    }
}
function GetXmlHttpObject() {
    var xmlHttp=null;
    try {
     xmlHttp=new XMLHttpRequest();
    }
    catch (e) {
     try {
      xmlHttp =new ActiveXObject("Microsoft.XMLHTTP");

     }
     catch (e) {
     }
    }
    return xmlHttp;
}
function makewindows(html) {
    child1 = window.open ("about:blank");
    child1.document.write(html);
    child1.document.close();
}

There does not seem to be anything wrong with the JavaScript itself, so I am wondering if something is being canceled out somehow. Even when changing deleterec() to a simple alert nothing happens.

Answer 1

maybe the html tag you are using to include the js file into your page is not correct

the correct way to include a script is

<script type="text/css" src="myfile.js"></script>

the following will not work

<script type="text/css" src="myfile.js" />

I would also recomend you to use Firefox's Error Console that is a nice app that will let you know if there are any issues.

Answer 2

I wonder if there's an error being detected in your JS code? If your Javascript has a syntax error in it, the browser will probably just not run any of it. If you're using a debugger like Firebug, this will help you track down the error.

Alternatively, try adding one function at a time, which will tell you which one is breaking things.

Answer 3

Try using FireBug to follow the code that does work.
Also if you have a complete page to show, that may clear things a bit.

Answer 4

First, in this text block:

        if(xmlHttp.responseText == 'result=true') {
                // Here you remove the appropriate element from the DOM rather than trying to update something within the DOM
                var row = document.getElementById(layer);
                row.parentNode.removeChild(row);
        }
        document.getElementById(layer).innerHTML=xmlHttp.responseText;

You don't actually want this line:

document.getElementById(layer).innerHTML=xmlHttp.responseText;

Additionally, try placing the deleteRec function first before the deleteItem function in the list of functions.

I would also recommend that you test this in Firefox with Firebug installed. This will show you any Javascript errors that are occurring on the page.