Using HTML Fragments In XML Sample

This sample shows you two possible techniques for embedding HTML fragments in your XML so that you can use them in a spry:region or spry:detailregion.

If you simply want to know how to load an HTML fragment from a server and have it show up in an element on the page, without using XML, data sets, and spry:regions, take a look at the Update Content sample.

Developers that have used the XMLDataSet from Spry Pre-Release 1.5 and earlier should pay special attention to the changes in how CDATA strings are handled. A detailed description of how string values embedded in XML are now handled by the XMLDataSet, and the different modes that are available, can be found here.

In this example, the HTML is entity encoded so that it can be treated as plain text within an XML tag:

<?xml version="1.0" encoding="utf-8"?>
<news>
	<article id="23ASD38993">
		<title>Article 1</title>
		<date>01/01/2006</date>
		<description>&lt;p&gt;&lt;strong&gt;Article 1 - &lt;/strong&gt;&lt;em&gt;01/01/2006&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
</description>
	</article>
	<article id="23ASD38999">
		<title>Article 2</title>
		<date>01/02/2006</date>
		<description>&lt;p&gt;&lt;strong&gt;Article 2 - &lt;/strong&gt;&lt;em&gt;01/01/2006&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.&lt;/p&gt;
</description>
	</article>
</news> 

This method is used a lot in some syndication XML formats like RSS. Spry preserves the entity encoding of an XML node's text value, so if we used something like this:

 var dsArticles1 = new Spry.Data.XMLDataSet("html-01.xml", "/news/articles");

...

<div spry:region="dsArticles1">{description}</div> 

we end up seeing the actual HTML markup in the Browser content area, instead of the rendered version we expect:

To fix this, we have to entity decode the "description" column value of each row so that when Spry re-generates the spry:region, it inserts the entity decoded version of the HTML markup. The result of this pre-processing allows the HTML markup to appear properly:

If you view the source for this page, you will see that the data set (dsArticles2) used for the 2nd region above, has its "description" column specified as the type "html". This tells Spry, that the text loaded from the XML file for that column is entity encoded HTML markup and that it should be entity decoded before it is actually stored in the column.

...

var dsArticles2 = new Spry.Data.XMLDataSet("../../data/html-01.xml", "/news/article");
dsArticles2.setColumnType("description", "html");

...

In this next example, the HTML is placed within CDATA, so no entity encoding is required for embedding the HTML fragment into the XML:

<?xml version="1.0" encoding="utf-8"?>
<news>
	<article id="23ASD38646">
		<title>Article 12</title>
		<date>01/07/2006</date>
		<description><![CDATA[<p><strong>Article 12 - </strong><em>01/07/2006</em></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
]]></description>
	</article>
	<article id="23ASD33472">
		<title>Article 15</title>
		<date>01/08/2006</date>
		<description><![CDATA[<p><strong>Article 15 - </strong><em>01/08/2006</em></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>]></description>
	</article>
</news>

The one limitation of this approach is that your HTML fragment itself can't contain CDATA or a processing instruction that ends with ']]>'. If we simply load this XML data into an XMLDataSet and render it with a spry:region:

 var dsArticles3 = new Spry.Data.XMLDataSet("html-02.xml", "/news/articles");

...

<div spry:region="dsArticles3">{description}</div> 

we end up seeing the actual HTML markup in the Browser content area, instead of the rendered version you expect:

Like the previous example, you must tell the XMLDataSet to treat the CDATA as HTML markup:

...

var dsArticles4 = new Spry.Data.XMLDataSet("html-02.xml", "/news/articles");
dsArticles4.setColumnType("description", "html");

...

so that the XMLDataSet knows to entity decode the string before storing it. This gives us the results we expect: