Question

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

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.