Develop Reference

I'm not sure why this isn't XML information isn't printing to the screen

I have written this code which is supposed to print the information from the xml file into a list for each faculty member. I want to eventually place all of these into a table, but need to know how to print them to the screen first.
function init() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseXML);
var faculty = this.responseXML.getElementsByTagName("faculty");
var strOut = "<ul>";
for (i = 0; i < faculty.length; i++) {
var name = faculty[i].getElementsByTagName("name")[0].innerHTML;
var title = faculty[i].getElementsByTagName("title")[0].innerHTML;
var office = faculty[i].getElementsByTagName("office")[0].innerHTML;
var phone = faculty[i].getElementsByTagName("phone")[0].innerHTML;
var email = faculty[i].getElementsByTagName("email")[0].innerHTML;
strOut += "<li><a href = " + name + title + "</a></li>";
}
strOut += "<ul>";
document.getElementById("output").innerHTML = strOut;
}
};
xhttp.open("GET", "faculty.xml", true);
xhttp.send();
}
window.onload = init;
Here is the XML file:
<facultyInfo>
<faculty>
<name>Prof A</name>
<title>Professor and Program Coordinator</title>
<office>CI 555</office>
<phone>(999-999-9999</phone>
<email>ProfA#school.edu</email>
</faculty>
<faculty>
<name>Prof B</name>
<title>Visiting Professor</title>
<office>CI 333</office>
<phone>999-999-9999</phone>
<email>ProfB#school.edu</email>
</faculty>
</facultyInfo>

This line:
strOut += "<li><a href = " + name + title + "</a></li>";
... is both malformed and probably not what you intended. Between the missing quotes for the href attribute, missing the ">" to close off the <a> start, and not putting any text in between <a></a>, this results in a link tag where the link destination (href) is set, but the actual text to show to the user is not set. I don't see any links in your XML (maybe that is for the future), so for now you probably want something like this:
strOut += '<li>' + name + ', ' + title + '</li>';
Here is a quick demo with your XML input:
<div id="output"></div>
<script>
var xmlString = '<facultyInfo> <faculty> <name>Prof A</name> <title>Professor and Program Coordinator</title> <office>CI 555</office> <phone>(999-999-9999</phone> <email>ProfA#school.edu</email> </faculty> <faculty> <name>Prof B</name> <title>Visiting Professor</title> <office>CI 333</office> <phone>999-999-9999</phone> <email>ProfB#school.edu</email> </faculty> </facultyInfo>';
var xmlDoc = (new DOMParser()).parseFromString(xmlString,'text/xml');
// var faculty = this.responseXML.getElementsByTagName("faculty");
var faculty = xmlDoc.getElementsByTagName("faculty");
var strOut = "<ul>";
for (i = 0; i < faculty.length; i++){
var name = faculty[i].getElementsByTagName("name")[0].innerHTML;
var title = faculty[i].getElementsByTagName("title")[0].innerHTML;
var office = faculty[i].getElementsByTagName("office")[0].innerHTML;
var phone = faculty[i].getElementsByTagName("phone")[0].innerHTML;
var email = faculty[i].getElementsByTagName("email")[0].innerHTML;
strOut += '<li>' + name + ', ' + title + '</li>';
}
strOut += "<ul>";
document.getElementById("output").innerHTML = strOut;
</script>

Javascript initially skipping over nested function and then comes back to it?

I'm experiencing some weird behavior in my code that I don't quite understand. I call a function, and inside that function there is another (anonymous) callback function it skips over and it goes to the end of the containing function, runs those lines, and then goes back into the callback function and runs those lines... Anybody have some insight, what am I doing wrong? Is it doing this because the "relatedQuery" method isn't complete yet so it hasn't hit the callback function before it runs the rest of the containing function's lines? That's the only thing I can think of, but I'm also not very skilled at JS. I've added some console.log statements that will tell you the order in which lines are being hit.
//Call the mgmtPopupContent function
mgmtTractPopupBox.setContent(mgmtPopupContent);
function mgmtPopupContent(feature) {
for (var attrb in feature.attributes) {
if (attrb == "HabitatManagement.DBO.MgmtTracts.OBJECTID") {
var OID = feature.attributes[attrb];
}
}
var relatedQuery = new RelationshipQuery();
relatedQuery.outFields = ["*"];
relatedQuery.relationshipId = 0;
relatedQuery.objectIds = [OID];
//Get data year that the map view is set to and set the definition expression on the table
viewYear = dom.byId("data-year").value;
relatedQuery.definitionExpression = "YearTreated = " + viewYear;
//Create table header that will go inside popup
var content = '<table id="mgmtPopupTable1"><tr><th>Veg Mgmt Practice</th><th>Herbicide</th><th>Month</th><th>Year</th>\
<th>Implemented By</th><th>Funded By</th><th>Farm Bill Code</th></tr>';
console.log("PRINTS FIRST");
//Do query and get the attributes of each related record for the popup
queryableMgmtTractFL.queryRelatedFeatures(relatedQuery, function (relatedRecords) {
console.log("PRINTS THIRD");
var fset = relatedRecords[OID].features;
fset.forEach(function (feature) {
var vegPractice = vegPName(feature.attributes.VegMgmtPractice);
var herbicide = herbName(feature.attributes.Herbicide);
var monthTreated = monthName(feature.attributes.MonthTreated);
var yearTreated = feature.attributes.YearTreated;
var impBy = impName(feature.attributes.ImplementedBy);
var fundBy = fundName(feature.attributes.FundedBy);
var fbc = feature.attributes.FarmBillCode;
if (fundBy == "CRP" || fundBy == "CRP - CREP") {
fbc = crpName(fbc);
}
else if (fundBy == "EQIP" || fundBy == "EQIP - RCPP") {
fbc = eqipName(fbc);
}
else {
fbc = "Not applicable";
}
row = '<tr><td>' + vegPractice + '</td><td>' + herbicide + '</td><td>' + monthTreated + '</td><td>' + yearTreated +
'</td><td>' + impBy + '</td><td>' + fundBy + '</td><td>' + fbc + '</td></tr>';
content = content + row;
});
content = content + '</table>';
});
console.log("PRINTS SECOND");
return content;
}

As mentioned in my comment, you have to wait for the queries to finish before you can render the content. So something like:
let content = '<table id="mgmtPopupTable1"><tr><th>Veg Mgmt Practice</th><th>Herbicide</th><th>Month</th><th>Year</th>\
<th>Implemented By</th><th>Funded By</th><th>Farm Bill Code</th></tr>';
const render_popup = function( content ) {
document.querySelector( '#myPopup' ).innerHTML = content;
};
// Render only the headers to begin with.
render_popup( content );
queryableMgmtTractFL.queryRelatedFeatures(relatedQuery, function (relatedRecords) {
var fset = relatedRecords[OID].features;
fset.forEach(function (feature) {
...
});
// Rerender the popup, now headers And content.
render_popup( content );
});

Can't addEventListener('click', ...) to a div created programmatically

I parse the result of XMLHttprequest() into a JSON object, then for each node of that object I create a div to store the informations.
Finally I add each div as innerHTML of a parent div.
Here the relevant part
xhr.onreadystatechange = function() {//Call a function when the state changes.
if(xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
var html="";
var linksDiv = document.getElementById('links');
if (response.error != true){
for (var i=0; i< response.links.length; i++){
var l = response.links[i];
var curId = l.id;
var curLink = l.link;
var curCreated = l.created_at;
var curOrigin = l.origin;
html = "<div id=\"link"+curId+"\" >"+
"<label><b>Id </b></label><label>"+curId+"</label> </br>"+
"<label><b>Link </b></label><label>"+curLink+"</label> </br>"+
"<label><b>Created </b></label><label>"+curCreated+"</label> </br>"+
"<label><b>Origin </b></label><label>"+curOrigin+"</label> </br></br>"+
"</div>";
linksDiv.innerHTML += html;
var curDiv = document.getElementById('link'+curId);
console.log("curDiv is"+'link'+curId);
curDiv.addEventListener('click', function(){
curDiv.style.background="gray";
getLink(curId);
});
}
}
}
}
unfortunately
curDiv.addEventListener('click', function(){
curDiv.style.background="gray";
getLink(curId);
});
doesn't work.
I already tried to make sure that the div exist (the console.log("curDiv is"+'link'+curId); works just fine)
and even used different ways like curdDiv.onmouseover = function(){curDiv.style.background="gray";}
If i put curDiv.style.background="gray"; outside the addEventListener() every div's background gets correctly changed.
If i put onmouseover="this.style.background='gray';" as inline property of the div tag when i generate it, it works as well, but i don't want javascript in the html since I will transform this page in a Chrome Extension and javascript must be separated
Please don't get confused from the mouseover tries, I need onclick behavior, but was just testing different thing to see if they worked.
I looked for a long time on SO for an answer, as you can see from my tries, but couldn't find something that worked for me. Probably there is something that I don't get.
Ps.
Let me know if you need a sample JSON data to test the function.

I think you should use
html = document.createElement('div');
html.id = 'link' + curId;
html.innerHTML = "<label><b>Id </b></label><label>" + curId
+ "</label> </br><label><b>Link </b></label><label>" + curLink
+ "</label> </br><label><b>Created </b></label><label>" + curCreated
+ "</label> </br><label><b>Origin </b></label><label>" + curOrigin
+ "</label> </br></br>";
html.addEventListener('click', function(){
this.style.background="gray";
getLink(this.id);
});
linksDiv.appendChild(html);
instead of
html = "<div id=\"link"+curId+"\" >"+
"<label><b>Id </b></label><label>"+curId+"</label> </br>"+
"<label><b>Link </b></label><label>"+curLink+"</label> </br>"+
"<label><b>Created </b></label><label>"+curCreated+"</label> </br>"+
"<label><b>Origin </b></label><label>"+curOrigin+"</label> </br></br>"+
"</div>";
linksDiv.innerHTML += html;
var curDiv = document.getElementById('link'+curId);
console.log("curDiv is"+'link'+curId);
curDiv.addEventListener('click', function(){
curDiv.style.background="gray";
getLink(curId);
});

Check this working code. make delay so that event will attached to element.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function populateLink() {
var html = "";
var linksDiv = document.getElementById('links');
for (var i = 0; i < 10; i++) {
var l = 'l-' + i;
var curId = i;
var curLink = 'l.link-' + i;
var curCreated = 'l.created_at_' + 1;
var curOrigin = 'l.origin_' + i;
html = "<div id=\"link" + curId + "\" >" +
"<label><b>Id </b></label><label>" + curId + "</label> </br>" +
"<label><b>Link </b></label><label>" + curLink + "</label> </br>" +
"<label><b>Created </b></label><label>" + curCreated + "</label> </br>" +
"<label><b>Origin </b></label><label>" + curOrigin + "</label> </br></br>" +
"</div>";
linksDiv.innerHTML += html;
//var curDiv = document.getElementById('link' + curId)
//curDiv.addEventListener('click', function () {
// this.style.background = "gray";
// getLink(this.id);
//});
attachEvent(curId);
}
}
function attachEvent(curId) {
setTimeout(function () {
var curDiv = document.getElementById('link' + curId)
curDiv.addEventListener('click', function () {
this.style.background = "gray";
//getLink(this.id);
});
}, 100);
}
window.onload = populateLink;
</script>
</head>
<body>
<div id="links"></div>
</body>
</html>

Modifying innerHTML in nested get() jQuery

I'm currently using the jQuery get method to read a table in another page which has a list with files to download and links to others similar webpages.
$.get(filename_page2, function(response, status){
var data = $("<div>" + response + "</div>");
var target_element = data.find(target_element_type_page2 + '#' + target_element_id_page2)[0];
var container = document.getElementById(element_change_content_page1);
if (typeof target_element !== "undefined"){
var rows = target_element.rows;
for (var i = 1, n = rows.length; i < n; i++) {
var table = rows[i].cells[1].getElementsByTagName("TABLE")[0];
var isFolder = table.getAttribute("CType") == "Folder";
var elem = table.rows[0].cells[0];
var text = elem.innerText || elem.textContent;
var link = elem.getElementsByTagName("A")[0].getAttribute("href");
if (!isFolder) {
container.innerHTML += "<li class=\"mainfolderfile\">" + "<a class=\"filelink\" href=\"" + link + "\">" + text + "</a></li>";
} else {
container.innerHTML += "<li class=\"folderlist\">" + "<a class=\"folderlink\" onclick=\"open_submenu(this)\" href=\"#\">" + text + "</a><ul></ul></li>";
var elem_page1 = container.getElementsByTagName("li");
var container_page1 = elem_page1[elem_page1.length - 1].getElementsByTagName("ul")[0];
create_subfolder(container_page1, link);
}
}
} else {
container.innerHTML += "<li class=\"mainfolderfile\">" + "<a class=\"filelink\" href=\"" + "#" + "\">" + "Error..." + "</a></li>";
}
}, page2_datatype);
This is working fine, and all the folders and files are being listed. But when I try to do the same thing with the folders (calling the create_subfolder function) and create sublists with their subfolders and files, I'm getting a weird behavior.
function create_subfolder(container2, link1) {
$.get(link1, function(response, status){
var data = $("<div>" + response + "</div>");
var target_element = data.find("table" + "#" + "onetidDoclibViewTbl0")[0];
if (typeof target_element !== "undefined"){
var rows = target_element.rows;
for (var i = 1, n = rows.length; i < n; i++) {
var table = rows[i].cells[1].getElementsByTagName("TABLE")[0];
var elem = table.rows[0].cells[0];
var text = elem.innerText || elem.textContent;
var link2 = elem.getElementsByTagName("A")[0].getAttribute("href");
//nothing is changed in the webpage. The modifications in the html don't appear
container2.innerHTML += "<li>" + text + "</li>";
}
}
alert(container2.innerHTML); // Print the html with all the modifications
}, "html");
}
The second get(), inside the create_subfolder() function are not changing anything in the webpage, so no sublist is created. But, when I call the alert() function at the end of the get() function, it prints the code with all the modifications it should have made in the html at the second get callback. I believe the problem is related with the asynchronous behavior of the get function but I don't know exactly why. Any guess?

AJAX works when in debug mode but not in real time

My code works when i'm slowly stepping through in debug mode, but when i try it in real time, it doesn't seem to want to update the page.
Here is the javascript:
searchButton = document.getElementById("searchButton");
var searchBox = document.getElementById('searchBox');
searchButton.addEventListener("click", searchItem);
function searchItem(){
searchString = searchBox.value;
article = document.getElementById("homeSection");
var xmlhttp = getXmlHttpRequestObject();
var string = '';
if(xmlhttp){
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var response = JSON.parse(xmlhttp.responseText);
for(var i=0; i<response.length; i++){
string += '<section class="searchResult">';
string += '<h1>' + response[i].Name + '</h1>';
string += '<p class="photo"></p>';
string += '<p class="price">£' + response[i].Price + '</p>';
string += '<p class="productID">ID: ' + response[i].ID + '</p>';
string += '<p class="description">' + response[i].Description + '</p>';
string += '<p class="quantity">Quantity: ' + response[i].Quantity + '</p>';
string += '</section>';
}
article.innerHTML = '<h1>Search</h1><section><h1 class="bottomBorder">You searched for: "' + searchString + '"</h1></section>';
article.innerHTML += string;
}
};
xmlhttp.open("GET", "search.php?search=" + searchString, true);
xmlhttp.send(null);
}
}

Two things you need to do
Cancel the click action that is triggering the function
Second encode the content you are sending to the server
Updated code:
function searchItem (event){
event.preventDefault();
var searchStringEnc = encodeURIComponent(searchBox.value);
...
xmlhttp.open("GET", "search.php?search=" + searchStringEnc, true);

It's not working on IE, rest of the responses and suggestions here are correct. Why IE only? because you have undefined vars:
searchString = searchBox.value;
correct
var searchString = searchBox.value;
To check if your script is truly working just alert the formatted string.
article.innerHTML += string;
alert(string);
then you will know what is wrong.

If you're using a button in a form to post with AJAX, make sure the button type="button" or it will act as a submit button and submit the form. This little feature cost me days of frustration!!!