JavaScript Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 307,155 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,598 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Adding line breaks, bolding and more to XML content.

Adding line breaks, bolding and more to XML content., Adding style to pure XML content is not so hard!

Options

Speechist

28 May, 2009 - 08:10 PM

Post #1

Have you ever brought XML content into your page (a large amount of text) only to see it displayed all on one wrapping line with no line breaks? I spent a lot of time searching for a good explanation of how to insert line breaks ( ), bolding, links and more directly into the text that is pulled from an XML file into an AJAX implementation (Spry if you're in Dreamweaver). In searching for answers, I came across a bunch of folks also wondering how to do this. The solution I hit upon is pretty simple (I KNEW it had to be!) and gives you lots of flexibility.

Here's the situation: you've got an XML file you're using to populate certain areas of your page via AJAX. You've defined a dataset in the (<head>) section of your HTML page, and you've got a call to a data (bound) element in your page. You may have a large amount of text that you're pulling into this area, such as a description, list of items, multiple paragraphs, whatever. How do you get those line ( ) breaks where you need them? There's really just 2 things to do.

1. Add the following to your dataset in the (<head>) section of your HTML page. First you define the data set (in this case I'm using Spry notation in Dreamweaver):

CODE

var dsRegInfoElem = new Spry.Data.XMLDataSet("regisinfo.xml", "sites/level1/site",{distinctOnLoad:true});

Then just add an extra line afterward that further defines the dataset 'setColumnType' to 'html' like this:

CODE

dsRegInfoElem.setColumnType('datetime','html');

As you can see in the comment, this line takes the dataset (dsRegInfoElem) and sets its columnType to html. The 'datetime' element is the name of the bound element that pulls the text into your page, so this name must match the (<datetime>) node name in your xml file. You would add this line to each dataset that calls XML content that you may be wanting to style with line breaks, bolding, or whatever. On to step two!

2. In your XML file, locate the text content that will be pulled into your HTM page. A very simple example of this would look like:

CODE

What you must do now is wrap the ENTIRE content of your tag (in this case "datetime") with a CDATA tag like this:

CODE

Essentially, you put "<!CDATA[" (without the quotes) just inside your start tag and "]]>" just before the closing tag. What this does is apply character data coding so that the XML parser will know how to render (act on) anything that looks like html code (like a ( ) tag), instead of displaying it just as you've written it " ".

Now, you can enter (in the text in the XML file) anything you need to display the text correctly, such as line breaks, bolding, links or whatever standard html tags you might use, like this:

CODE

<!CDATA[text text text text text text text text]]>

Which will render (display) on the page like this:

text text text text text
text text text

I know this is a pretty simple example, and to be sure, there is LOTS more to know about XML rendering and how to style it (more robust implementations achieve styling using an XSLT file in the same way CSS styles an HTML page). A really good starting point to learn more about XML is this XML tutorial site. But I hope this at least helps someone who was trying to do a simple line break like I was!