### 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.

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>

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

{description}

To fix this, you 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:

{description}

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 an CDATA or processing instruction that ends with ']]>'. Spry inserts CDATA text into the document exactly as it appears inside the CDATA, so there is no need for pre-processing of the HTML markup before it is inserted into the document:

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

    ...

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

It shows up properly within the browser:

{description}