Pages

Saturday, October 1, 2011

52

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.

Some references:
Wikipedia CDATA
Javascript and XHTML
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

52 comments:

Jorge deSaliceta said... [reply]

Excelent, is just that I have searching for.

But, I have a code like this:

/* */


What's the function of /* an */?

Thanks

Jorge deSaliceta said... [reply]

17I just saw that the element "CDATA" onmy comment is disappeared, and was inconprensible!

Marie John said... [reply]

Thanks for sharing this info, I've also come across Sitepoint's javascript tutorial which was pretty helpful when I needed to problem solve issues.

Daniel Gubalane said... [reply]

@Jorge deSaliceta

It's a comment tag Jorge. The text inside that are just an explanation of what the code does.

It's sort of a programmer's note.

Alberto Sola said... [reply]

Thanks for the explanation. It's useful to know why you need to use that! :)

pavithra dass said... [reply]

Appreciate Your Work... Thanks for Sharing Useful Information. I Just want to Share Some information related to HTML5 training in Chennai hope it is useful for the Community Here.

Andria BZ said... [reply]

Quite Interesting post!!! Thanks for posting such a useful blog. Keep posting it’s really helpful to enhance my skill set, keep blogging.
Regards,
Java J2EE Training in Chennai|Java Training Institute in Chennai

jivat mulchandani said... [reply]

Quite Interesting post!!! Thanks for posting such a useful blog. Keep posting it’s really helpful to enhance my skill set, keep blogging.

HTML5 Training in Chennai
HTML5 Training in Chennai

Pavithra Kumar said... [reply]

It is indeed an informational one ! Thank you for sharing your knowledge. Hope this is of use,

html5training

Unknown said... [reply]

i went through your blog and now i got a basic idea about HTML5 .It was very useful for me. when i was searching for HTML5 tutorials i came across html5training.in . Is this a good site to learn HTML5

Unknown said... [reply]
This comment has been removed by the author.
Unknown said... [reply]

Thanks for sharing a useful blog. keep posting
HTML5 TRAINING IN CHENNAI

Sharma said... [reply]

Thanks for the info...

Real Trainings provide all IT-Training Institutes information in Hyderabad, Bangalore, Chennai . Here students can Compare all Courses with all detailed information. In Real trainings we provide courses like GPS Infotec, Eduwizz online training, Akshara Technologies, Spark Trainings, Visualpath etc...

ProPlus Logics said... [reply]

Thanks for sharing an information to us. If someone wants to know about websites and SEO Service. I think this is the right place for you!
Digital Marketing
SEO Company

Calla said... [reply]

Really very happy to say, your post is very interesting to read. I never stop myself to say something about it. You’re doing a great job. Keep it up.php training in Mumbai

Viết Hoàng Đắc said... [reply]

Thanks for infomation <3

It's very useful for me when I custom Schema for my website Kome Cafe Vietnnamese Coffee https://www.kome.cafe

Thanks for share!

Vicky Ram said... [reply]

I am happy to find this post Very useful for me, as it contains lot of information

Guest posting sites
Education

Unknown said... [reply]
This comment has been removed by the author.
Vicky Ram said... [reply]

Nice post. I learned some new information. Thanks for sharing.

Guest posting sites
Technology

Poshe said... [reply]

Good Stuff. Thank you for providing such a valuable information. I am looking forward to visit your blog at daily basis.
If you’re looking for a safety training institute in Chennai, it doesn’t get better than POSHE Solutions.
NEBOSH Course in Chennai
Fire and safety course in vizag
Fire and safety course in vizag

Vicky Ram said... [reply]

Good explanation with appropriate solution.

Guest posting sites
Technology

Unknown said... [reply]
This comment has been removed by the author.
NIHAL AHAMED said... [reply]

Hi MS-potilas ,
Thanks for Clear and brief Content MS-potilas. Your Knowledge towards Html and Javascript Would help all the Programmers, intermediate programmer, students and Working Professional.Please share your knowledge and all sort of ideas in your blog. It will be helpful for everybody.Keep Blogging!!!!! All the Best!!!!
Regards
Nihal Blog Follower
HTML5 TRAINING IN CHENNAI

Vicky Ram said... [reply]

Thanks for posting such an blog it is really very informative. And useful for the freshers Keep posting the
updates.

Guest posting sites
Education

yugandar said... [reply]

The blog is so interactive and Informative , you should write more blogs like this. We provide Datascience training with real time experts and 100% placement program Datascience Training

mani said... [reply]

Thank you for the link building list.I am going jot down this because it will help me a lot.Great blog! Please keep on posting such blog.

website builder for reseller

mani said... [reply]

Comfortabl y, the post is really the freshest on that deserving topic. I harmonise with your conclusions and definitely will thirstily look forward to your next updates.


private label website builder

mani said... [reply]

This is a very amazing post for cheap web hosting services. in this post, you have provided all the basic information regarding.

white label website builder

sunshineprofe said... [reply]

I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.
nebosh course in chennai

High Technologies Solutions said... [reply]

I really like your post. Thanks for sharing such a valuable post. Please keep sharing such kind of post. It will be helpful for other.

Delhi's best python institute
Noida's best python institute

Gurgaon's best python institute

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: