I searched all over for a simple solution to pretty print xml with JavaScript. I saw several answers in StackOverflow, but I just wanted a straight answer that I could just paste on my page and voila! but no. I couldn't find one.
Some people suggested using Google Prettify and is fine but prettify does not handle indentation and I had to escape the < > characters in my xml, and I just wanted to embed the xml in the page and have javascript handle the rest.
For the indentation some people recommended another javascript called vkBeautify but I just wanted a quick snipped of how to do it, well in the end my friend Joseph and I just put together a quick sample.
It was very simple but I tought there should be a lot of people with something like that already done.
We embed our xml like this:
<script type="text/xml" id="xml2">
<data><test>10</test><test>20</test></data>
</script>
Indentation is handled with the vkBeautity.
var text = textToHtml(vkbeautify.xml(document.getElementById('xml2').innerHTML));
Then we needed a function to do the escaping for us:
var pr_amp = /&/g;
var pr_lt = /</g;
var pr_gt = />/g;
var pr_quot = /\"/g;
/** escapest html special characters to html. */
function textToHtml(str) {
return str.replace(pr_amp, '&')
.replace(pr_lt, '<')
.replace(pr_gt, '>');
};
And the rest is just using the google prettify:
<body onload="updateText(),prettyPrint()" bgcolor="white">
<pre class="prettyprint" id="xml">
</pre>
</body>
NOTE: this solution still has a problem with carriage returns. So indentation is yet to be fixed
UPDATE: I have fixed the issue. For some reason the IE gets rid of the '\n' in the string. So your have to change them for a <BR>
function updateText() {
var text = textToHtml(vkbeautify.xml(document.getElementById('xml2').innerHTML));
var expr = new RegExp("\n","g")
document.getElementById('xml').innerHTML=text.replace(expr,'<br>');
}
UPDATE2:
For IE you might need to add this after the doctype:
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
prettyxml.zip (26.35 kb)
prettyxml2.zip (27.49 kb)
Now, we all write pages and HTML5 apps that must work in Mac/Linux/Windows/iPhone/iPad/S3/Nexus... you name it.
And sadly not all browsers behave the same, so a common problem is that you have to bind your code to all sort of events.
My friend Luis Diego send me a nice javascript library that tries to use the microsoft win8 idea of unified all these events under an umbrella of pointer events.
Pointer.js is the library proposed there. I tried it on my HTC WP7 and not everything works. On my pc works very nice and still need to tried on some mobile devices.
I might need some tune up but is a great start.
Well, there are several reasons why this error appears...
I had this annoying error for a few days so I decided to track it down. It seems that in my case this error was a bug in jQuery.
if (document.documentElement.contains) {
Sizzle.contains = function (a, b) {
return a !== b && (a.contains ? a.contains(b) : true);
};
}
That code throws the exception in the a.contains(b) method call. So I tried to fix it for a while but I did not have a lot of time so I ended up patching it like:
if (document.documentElement.contains) {
Sizzle.contains = function (a, b) {
try {
return a !== b && (a.contains ? a.contains(b) : true);
}
catch (err) {
return false;
}
};
}
In my case it works. I know is not the best solution but if you are struggling with this it might help