Turning the Survey HTML into XML

Yesteray I blogged about a drag and drop example for a survey. Today I'm going to round off that post by adding how one can convert the resultant html content into usable server side data. With this specific example it makes sense that one would want to process nested XML that represents the dependencies generated via the user interface. Once this XML structure has been created one could place it in a hidden form field or post it back to the server using XMLHTTP. I'm not really interested in those specifics right now since that's not really what matters in this situation. What is important is leveraging the DHTML interface as a data source.

I therefore opted to generate the following XML structure from the HTML markup:

I initially thought that I could use an XSLT transform on the HTML to convert it back to XML, but unfortunately the outerHTML returned by Internet Explorer is not well formed XML. I therefore opted for hand coding the HTML conversion using recursion and MSXML. Here is the core peice of JavaScript that generates the XML document (You pass in the main survey OL element and the XML document root element to start off):

/******************************************************************************
Recursively processes questions and answers to generate the survey XML that will be
sent back to the server for storage ******************************************************************************/
function ProcessListItems(listElement, parentXmlElement, xmlDocument) { var listType
= listElement.className; var listItemType = (listType == "Questions" ? "Question"
: "Answer"); //Create the container element and add it to the document at the current
location var containerNode = xmlDocument.createNode(NodeTypes.Element, listType, "");
parentXmlElement.appendChild(containerNode); for (var childIndex=0; childIndex <
listElement.childNodes.length; childIndex++) { var htmlElement = listElement.childNodes[childIndex];
var node = xmlDocument.createNode(NodeTypes.Element, listItemType, ""); var identAttribute
= xmlDocument.createNode(NodeTypes.Attribute, "ID", ""); //Place the question/answer
Text inside of the Question/Answer element and all other information //as attributes
to reduce document size and improve readability node.text = htmlElement.firstChild.nodeValue;
if (htmlElement.id != null) { identAttribute.text = htmlElement.id; } //Add the question
to the questions list containerNode.appendChild(node); //Add all the relevant attributes
to the current question element node.attributes.setNamedItem(identAttribute); //Now
recursively add any other Answers/Questions nested within this element if (htmlElement.lastChild.tagName
== "OL") { ProcessListItems(htmlElement.lastChild, node, xmlDocument); } } }

You can view a complete demo of the transform here: XMLFromHTMLDemo.html (4.93 KB)

posted on Tuesday, October 25, 2005 5:12 AM

Comments have been closed on this topic.

Eden Ridgway's Blog

Search

Article Categories

Archives

Post Categories

Development

General