How to fix Blogger XML error message: The content of elements must consist of well-formed character data or markup.Blogger, javascript and CDATA

Blogger, javascript and CDATA 

 

In some of my code samples in this blog you will see javascript blocks like this:

<script type='text/javascript'>
  ... code ...
</script>

And in some like this:

<script type='text/javascript'>
//<![CDATA[
  ... code ...
//]]>
</script>

You might ask: What is that CDATA? Why cannot he make up his mind which one to use? Can I stick to one of the notations?

Blogger layout template must be valid XML, otherwise it won't pass validation and you cannot save it. In XML for example character < starts a tag. Lets assume you want to run the following javascript code, which you have found somewhere in internet:

<script type='text/javascript'>
  alert("Tip of the day: 5 < 6 & 1 < 2");
</script>

But if you put that on your template and try to save or preview, you'll get:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup.

Now there are two ways to correct this script before pulling out your hair. To make the original script to be valid XML inside script tags, you must escape certain characters, like <, >, and &. And if you don't escape, the template editor will escape " and ', too. The script in your template becomes:

<script type='text/javascript'>
  alert(&quot;Tip of the day: 5 &lt; 6 &amp; 1 &lt; 2&quot;);
</script>

You can use HTML Escape Tool (from htmlescape.net) and similar tools to escape the javascript code, if you don't want to do it by hand. There are also tools for unescaping the characters.

Ok, as you see that "messes up" the code and makes it harder to maintain. Another solution is to mark the code between <script> and </script> tags as CDATA (character data). This tells XML parser that the text is general character data, instead of XML to be parsed. You may have already guessed, it looks like this:

<script type='text/javascript'>
//<![CDATA[
  alert("Tip of the day: 5 < 6 & 1 < 2");
//]]>
</script>

The latter is perfect, you may think. It is good, but, there is a but. If you want to use widget tags for templates, you cannot mark those sections as CDATA. I'll give you a simple example.

<script type='text/javascript'>
  alert("<data:blog.url/>");
</script>

In this script you must not escape <data:blog.url/>, because it is template data tag http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=47270. You can escape "s to &quot;s, and if you don't, Blogger will do it for you. But if you try this:

<script type='text/javascript'>
//<![CDATA[
  alert("<data:blog.url/>");
//]]>
</script>

It does not show your blog address, but the text "<data:blog.url/>", which probably was not the intention.

For some reason, you cannot find this information in Blogger help.