ShowTable of Contents
Traversing XML result of Ajax call
When working with JQuery and Ajax, there is simply no simple good instructions on how to traverse the complete tree of an XML result of an Ajax call. This is how You do it.
Let's create an agent that produces the XML result that we want to analyze. This is a dummy agent; the XML is static, but You could of course have it to retreive any data from any database and produce the correct XML of Your choise.
Sub Initialize
Dim result As String
Print "Content-Type:text/xml;Char-Set:ISO-8859-15;"
result = |<?xml version="1.0"?>| + Chr$(13)
result = result + |<catalog>| + Chr$(13)
result = result + |<album id="1"><name>My First Album</name>| + Chr$(13)
result = result + |<artist>123</artist>| + Chr$(13)
result = result + |</album>| + Chr$(13)
result = result + |<album id="2"><name>Second time around</name>| + Chr$(13)
result = result + |<artist>123</artist>| + Chr$(13)
result = result + |</album>| + Chr$(13)
result = result + |</catalog>|
Print result
End Sub
Make the agent trigger "Agent List selection" and run on Target "None".
Time to create the form...
Now, create a form that has the following HTMLHead content:
"<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js\"></script>"+@NewLine +
"<script>" + @NewLine +
"var dbPath ='" + @WebDbName + "';" + @NewLine +
"</script>"
In the form, make passthrough HTML and write a button and a div:
<input type="button" onclick="getDummyXML();" />
<br />
<div id="result">
</div>
In the JSHead, create function named "getDummyXML()":
function getDummyXML() {
var dt = new Date();
var agentURL = '/' + dbPath + '/(dummyXML)?OpenAgent&dt=' + dt;
var bodyContent = '';
bodyContent = $.ajax({
url:agentURL,
success: function(xml){
showResult(xml);
}
}
).responseXml;
}
The JQuery will make an Ajax call, and when it gets the result, it will call a function named "showResult()". So, we need to create that function as well in the JSHead:
function showResult(xml) {
var fld = $('#result');
var result = '';
result = '<h3>This is the result of xml: </h3><p>';
var nodes = $(xml).find('catalog').children();
$(nodes).each(function() {
$(this).children().each( function() {
result += 'NodeName = ' + $(this).get(0).nodeName + '<br />';
result += 'NodeValue = ' + $(this).text() + '<br />';
result += 'Attribute = ' + $(this).parent().attr("id") + '<br />';
result += '<br />';
})
});
result += '</p>';
fld.html(result);
}
Thats it... Now some explanation...
Explanation of the JavaScript
In the first line, we assign a JavaScript variable to hold the div-tag. $('#result') is the same as doing the classic: document.getElementById('result'); .
We will assign a JavaScript variable to hold all the child-nodes of the "Catalog"-root node:
var nodes = $(xml).find('catalog').children();
Next lines are doing the actual traversing - for each child node of the Catalog-node, get the actual node-name and the value of the node and everything is stored in the "result"-variable.
To get the attribute "id" that is stored in the "album"-node, we need to go up one level with the .parent() selector and then get the attribute with .attr('id') selector.
The last line is putting all the result into the innerHTML of the DIV-tag and thats it...