Pretty Print XML in Javascript

25. January 2013 12:20 by Mrojas in   //  Tags: , , ,   //   Comments (0)

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)

Mouse Events/ Touch Events/ Gesture Events!!! Is there a general solution for this problem. Well Pointer.js might help

6. November 2012 21:05 by Mrojas in General, HTML5  //  Tags: , ,   //   Comments (0)
 
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.
 
So if you are dealing with this issue I really recommend this post: http://smus.com/mouse-touch-pointer/
 
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.
 

IE8 No such interface

17. August 2012 10:45 by Mrojas in Javascript  //  Tags: , , , , , ,   //   Comments (0)

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