'How to load content from second node while also loading content from first node in XML with AJAX?
Okay So I successfully can load content with AJAX with the following code below. I can load content from the XML element "user1". But I also want to load some content from the XML element "user2" in the same function (without creating a new function).
I'm pretty sure this is a simple one or 2 line of code situation.
But I'm not sure how to do it. as you can see below, I tried to create a second set of variables as follows y, z, And userFriendContent,
In my function titled "myFunction" to retrieve and setup my content for the next next node. But its not working.Only the first set "user 1” elements from the XML loads. The other variables seem to just stall. I TEXT tagged the line of code that seems to be stalling. BTW you can see that the userVar2 Variable has been set in the previous function titled loadXMLUserList. I'm kinda rusty on all of this as I haven't worked with HTML, JavaScript or XML in 10 - 15 years or so. Please help. Thanks!
HTML
<p><button onclick="loadXMLUserList(userVar='user1')">Get user 1 info</button></p>
<p><button onclick="loadXMLUserList(userVar='user2')">Get User 2 info</button></p>
<div class="demoShell" id="demo" >
</div>
JavaScript
<script>
loadXMLUserList(userVar='startuser'); <!---- Load XML User List XML element startuser onLoad ---->
userVar2='user2';
function loadXMLUserList() { <!----creates function named loadXMLDoc---->
var xmlhttp = new XMLHttpRequest(); <!----creates variable named xmlhttp make it equal a new XML Http req---->
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xmlhttp.open("GET", "userinfo.xml" , true); <!----opens variable named xmlhttp make it equal a new XML Http req---->
xmlhttp.send();
}
function myFunction(xml) { <!----creates function named myFunction---->
var x, i, loggedInUserContent, y, z, userFriendContent, table; <!----creates variables named x, i, xmlDoc, table---->
loggedInUserContent = xml.responseXML; <!----gives variable named xmlDoc the value of xml.responseXML---->
table = " "; <!----gives variable named "table" the value of ""---->
x = loggedInUserContent.getElementsByTagName(userVar) <!----gets elements from XML element "user1"---->
y = loggedInUserContent.getElementsByTagName(userVar2) <!----gets elements from XML element "user2" UNDER CONSTRUCTION---->
for (i = 0; i < x.length; i++) {
table += "<div class='box2'>" + <!----creates div class titled "box2? in function variable named "table"---->
x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue + <!----retrieves value from XML element named "Name"---->
"</div><div class='box1'>" + <!----closes first DIV & creates new div class titled "box1? following first XML element---->
x[i].getElementsByTagName("ID")[0].childNodes[0].nodeValue +<!----retrieves value from XML element named "ID"---->
"</div><div class='box3'>" + <!----closes second DIV ---->
x[i].getElementsByTagName("image1")[0].childNodes[0].nodeValue + <!----retrieves value from XML element named "Company"---->
" </div>"; <!----creates space after element NOTE this last element is not wrapped in a DIV except the main DIV--->
x[i].getElementsByTagName("code")[0].childNodes[0].nodeValue + <!----retrieves value from XML element named "Company"---->
" "; <!----creates space after element NOTE this last element is not wrapped in a DIV except the main DIV--->
}
document.getElementById("demo").innerHTML = table; <!----converts function variable "table" data to variable "demo" div ---->
}
</script>
XML
</CATALOG>
<user1>
<Name>Kevin McDonald </Name>
<ID>231132</ID>
<image1>images/user2/kmd.png</image1>
<code>USA</code>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</user1>
<user2>
<Name>Kevin McDonald </Name>
<ID>231132</ID>
<image1>images/user2/kmd.png</image1>
<code>USA</code>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</user2>
<user3>
<Name>Joe Clarkson</Name>
<ID>432123</ID>
<image1>images/user3/joe.png</image1>
<code>USA</code>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</user3>
<startuser>
<Name>Immauel Williams</Name>
<ID>Joe Cocker</ID>
<image1>images/startuser/iman.png</image1>
<code>USA</code>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</startuser>
</CATALOG>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
