Recently I’ve been hard at work hacking up a new plugin for fitnesse to allow for live table editing, using xmlhttprequest to fetch raw pages and persist the data in fitnesse. For the moment, I’ve wanted to stick with pure javascript without writing custom responders or anything, but ran into a small hurdle. I could fetch the raw page content by simply appending “?raw” to the url for the test, but to save it I needed a ticketId and saveId, which were hidden input fields on the edit page. Not knowing any other way to get it, I decided to simply fetch the edit page and select the input values I needed and grab the contents of the textfield for the raw page contents.

And that’s where things got messy.

Since the content is HTML 4.01 and sent as text/html, xhr.responseXml is out of the question. So the choice was to simply load a document from the xhr.responseText string. This was easy in firefox as all I had to do was a simple


var doc = new DOMParser().parseFromString(xhr.responseText, "text/xml");

Which, although a bit of a stretch since it was not really xml, did in fact parse the html document. However, IE’s Microsoft.XMLDOM object wasn’t as forgiving:


var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = false;
doc.loadXML(xhr.responseText);

This gave me a document object, but it was empty. :( After banging my head a bit and reading through specs and msdn, I decided to simply take the responseText and assign it to innerHTML on an element.

var div = document.createElement("div");
div.innerHTML = xhr.responseText;
div.getElementsByTagName("input");
...

Is it dirty? Yes. But does it work? Yes. Although the result is invalid html, the div is discarded after the data needed from the document is retrieved. ;)

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!