Inline JavaScript Code That Broke My Feed

In my previous post, I needed to embed Flash object. To do that, the post needs to have two inline JavaScript code blocks embedded inside.

This two code blocks apparently killed my RSS Feed! I didn’t know about this, until I visited my LinkedIn page. LinkedIn page was prompting me to enter my WordPress blog URL address. Hmm.. that’s weird. I remember I have done that immediately when I created my LinkedIn account. I squinted my eyes to find any error messages. Below the WordPress form, I saw broken red lines with varying degree of thickness. Apparently the error message was outside the DIV’s visible area. The error message reads “Error in parsing http://sodeve.net?feed=rss2″.

Here’s the offending inline codes:

<script type="text/javascript"> 
		var swfVersionStr = "10.2.0"; var xiSwfUrlStr = "/swf/playerProductInstall.swf"; 
		var flashvars = {}; var params = {}; 
		params.quality = "high"; params.bgcolor = "#3a3737"; 
		params.allowscriptaccess = "always"; params.allowfullscreen = "true"; 
		var attributes = {}; attributes.id = "SertifikasiDownloader"; 
		attributes.name = "SertifikasiDownloader"; attributes.align = "left"; 
		swfobject.embedSWF("/swf/Downloader.swf", "flashSertifikasiDownloader", "493", "332", swfVersionStr, xiSwfUrlStr, flashvars, params, attributes); 
		swfobject.createCSS("#flashSertifikasiDownloader", "display:block;text-align:left;");
</script>

And

<script type="text/javascript">
		var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); 
		document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
			+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
</script>

Btw, please note that I made the JavaScript codes in multiple lines to make it readable. In its original form, each code block will be merged into a single line.

When I opened up this blog’s RSS Feed URL using Google Chrome, it spitted back red rectangle error message back at me. I opened the same URL with Safari, and it simply give up without even telling what’s the source of the error. Still not satisfied, I launched both IE9 and Firefox to the same URL.

Surprise surprise, these two browsers didn’t report any error. IE9 incompletely renderred the XML as a full-page of words without any arrangement. But it actually stopped rendering the content half-way. Perhaps it saw the error, got depressed, then perhaps go hiding somewhere trying to get high. Great, IE9, your act is just like Towelie.

If IE9 is like Towelie, I think Firefox is like Eddie Mora from Limitless. Although there’s error in the feed, it is still showing everything perfectly. And by perfectly, I mean everything. The FeedBurner’s favicon, the layout, the form to subscribe to the feed.

Last but not least, Opera. I think Opera is the most informative among all. It prompted the error, described what kind of error is it, which location the error was triggered from, and it even shown the part of the XML code where the error is originated.

Based on this razor-sharp information from Opera, I look into the XML file. I found out that the second JavaScript code block was auto-encapsulated inside CDATA section. But why only the second code block was auto-encapsulated? What makes the first code block so special (or not so special, depending on your today’s mood) that it wasn’t auto-encapsulated?

Anyway, I solved this issue by taking out both code blocks, and put them into two separate external .js file. Yes, this is actually the recommended practice should you ever need to include JavaScript code in your WordPress blog post. Why didn’t I do it in the first place? In my defense, the inline JavaScript code did work. As long as you make them in one single line.

What I did’t realize was that I accidentally depended on a ‘hack’, deprecated-method, or whatever it is that now WordPress (or W3 Total Cache) doesn’t support. I am not sure whether I should call this a bug. What do you think?

Moral of the story, use the recommended best practice when doing something, but don’t stop yourself from hacking Show me your hand if your’re agree!

Cheers!

The screenshots from the browsers: