I am creating a webpage that has a collapsible menu on the right side. The menu is built into the webpage by JavaScript. My goal is to be able to have an external source of information that data can be collected and inserted into that right menu. The data will be under various buttons that will show and hide the information for that category. I am open to any way to achieve this functionality, but I am leaning towards an xml file because I want something that is easy for others to update with new information either manually or through a VBA script that will be added to this menu. I am fairly certain that I do not have access to JQuery, AJAX, PHP, in general, my tools are limited so much that I practice code on one computer with the Eclipse IDE and work my final product in a text editor. In addition, I am working both efforts from a file structure, but there is a possibility that it may end up on a web server. In addition, I need to ultimately make sure the webpage works on FireFox 45 at a minimum and Internet Explorer and it is worth mentioning that all of my JavaScript and CSS are in an external file from the HTML.
I have control over the format of the input information, but right now, I am thinking that it would look something like this. XML seems like the best option to achieve this project, but I have been considering another html or text file.
<name>
<phone>123-4567</phone>
<email>[email protected]</email>
</name>
I have had partial success on my practice computer, but I have not had luck once I transfer it to my other system with the exact same syntax.
The first attempt was by inserting either an xml or html file into a div that I can hide. I can't just leave the xml or html object in the menu because I need to have the data sorted into different fields. I thought about creating several files that can be imported as objects, but I think that will defeat the purpose of making it easier to update, add, and delete entries. Below is the code that I have tried for an html and xml file
document.getElementById("insertHtml").innerHTML = '<object type="text/html" data="./BuildABasicSite.html"></object>'
document.getElementById("insertHtml").innerHTML = '<object type="text/xml" data="./FileForJS.xml"></object>'
and then my plan was to parse the information into the categories and format that I wanted so I used the code below.
document.getElementById("insertHtml").children[0].contentDocument.getElementById("inpPara").innerText
I can see this element in the FireFox console, but I receive an error when I try to run it as part of a JavaScript an error occurs. " Ignoring get or set of property that has [LenientThis] because the “this” object is incorrect". I looked this one up and it seems like a deficiency in the Firefox devtools (Javascript DOM "this" Object is incorrect). If there is a way around this, I think it would be a viable solution to my code. The other code that I have attempted was to parse the xml file.
if (window.XMLHttpRequest) {
var xmlhttp = new XMLHttpRequest();
} else {
var xmlhttp = new ActiveXObect("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction1(this);
}
};
xmlhttp.open("GET", "./FileForJS.xml", true);
xmlhttp.send();
function myFunction1(xml) {
var xmlDoc = new DOMParser().parseFromString(xml.responseText,'text/xml');
console.log(xmlDoc);
alert(xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue);
}
For this piece of code. I was able to successfully retrieve the information on my development computer, but then we I try to re-create it, I receive an error "XML Parsing Error: no root element found". I cannot figure out a reason why it works on one system but not on the other.
I am hoping for help on a solution that will allow me to retrieve the information so that I can move onto the code that will format the data into the side menu with information that I can store in a file that is easy to update for other users.