I tried all the classic tricks to get my web page to redeploy changes that were made to dom, but nothing worked. I have already tried
element.className = element.className;
as well as access to some part of dom, which I changed, but this also does not work.
Here is my code. Onload body calls queryDB, and in html there is a paragraph with the identifier "plants". So far, this code only works correctly on firefox 3 and chrome.
var timeout = 5000; //get new plants every 5 seconds function queryDB() { responseDoc = getXMLFrom("ajax/getallplants.php"); paragraph = document.getElementById("plants"); table = document.createElement("table"); table.setAttribute("class", "viewTable"); //clean up the last query cleanUpLastResult(paragraph); //loop through the responseDoc and dynamically add plants if(plantsFound(responseDoc)) { for(i = 0; i < responseDoc.documentElement.childNodes.length; i++) { currentChild = responseDoc.documentElement.childNodes[i]; row = document.createElement("tr"); //old way of printing where the whole sci name and common name was just text /*paragraph.appendChild(document.createTextNode(responseDoc.documentElement.childNodes[i].firstChild.nodeValue)); paragraph.appendChild(document.createElement("br"));*/ //newer way of printing where the common name is bolded /*paragraph.appendChild(document.createTextNode(currentChild.firstChild.nodeValue + " ")); commonName = document.createElement("b"); commonName.appendChild(document.createTextNode(currentChild.getAttribute("commonname"))); paragraph.appendChild(commonName); paragraph.appendChild(document.createElement("br"));*/ //newest way of printing that prints to a table col1 = document.createElement("td"); col1.setAttribute("class", "viewTable"); col1.appendChild(document.createTextNode(currentChild.firstChild.nodeValue)); col2 = document.createElement("td"); col2.setAttribute("class", "viewTable"); col2Bold = document.createElement("b"); col2Bold.appendChild(document.createTextNode(currentChild.getAttribute("commonname"))); col2.appendChild(col2Bold); row.appendChild(col1); row.appendChild(col2); table.appendChild(row); } paragraph.appendChild(table); paragraph.className = paragraph.className; paragraph.firstChild.className = paragraph.firstChild.className; } else { paragraph.appendChild(document.createTextNode("no plants currently entered")); } //re-add the callback setTimeout(queryDB, timeout); } function plantsFound(responseDoc) { if(responseDoc.documentElement == null) { return false; } else { if(responseDoc.documentElement.firstChild.nodeType == 3) { //text node so no children return false; } else { return true; } } } function cleanUpLastResult(paragraph) { //old way of cleaning up where everything was only a childnode of the paragraph /*while(paragraph.childNodes.length >= 1) { paragraph.removeChild(paragraph.firstChild); }*/ /* The three possible cases: * 1 first execution time so paragraph has no child * 2 nth execution time but nothing was found in db so only a textnode * 3 nth execution and there a whole table to clean up */ if(paragraph.firstChild == null) { //nothing there so nothing to delete } else if(paragraph.firstChild.nodeValue != null) { //no table printed, just remove that text node paragraph.removeChild(paragraph.firstChild); } else { //delete the whole table table = paragraph.firstChild; //remove each row while(table.childNodes.length >= 1) { //remove the two columns in it and their stuff row = table.firstChild; col1 = row.firstChild; col2 = row.lastChild; //remove column1 and it text node col1.removeChild(col1.firstChild); row.removeChild(row.firstChild); //remove column2, it bold node and its text node col2.firstChild.removeChild(col2.firstChild.firstChild); col2.removeChild(col2.firstChild); row.removeChild(row.firstChild); table.removeChild(row); } //finally delete the table paragraph.removeChild(paragraph.firstChild); } } function getXMLFrom(url) { if(window.XMLHttpRequest) { //regular browser xmlhttp = new XMLHttpRequest(); } else { //ie6 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", url, false); xmlhttp.send(); responseDoc = xmlhttp.responseDoc; if(responseDoc == null) { if(window.XMLHttpRequest && (typeof DOMParser != "undefined")) { //firefox var parser = new DOMParser(); responseDoc = parser.parseFromString(xmlhttp.responseText, "text/xml"); } else { //ie6 or ie7 var doc = new ActiveXObject("Microsoft.XMLDOM"); doc.async = true; doc.loadXML(xmlhttp.responseText); responseDoc = doc; } if(responseDoc == null) { alert("error in parser xml from: " + url); } return responseDoc; } }
I also tested responseDoc, and I know that I get the correct answer from getallplants.php, which generates xml views of various plants. Any ideas how to fix this? Also, for various reasons, I cannot use jQuery for this.
edit I have a quasi-good solution that I found in another SO thread. If I add document.write (document.all [0] .innerHTML); on queryDB after I set the table that I made for the child of the paragraph. The only problem is that if I do this, the page will not refresh every 5 minutes. Therefore, if the database that it changed, this page must be updated, what types of lesions are aimed at ensuring that javascript asynchronously receives information from the database.
source share