Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 31167

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Jan 8th, 2008

CDATA in HTML

Expand Post »

I'm trying to put some text which will confuse HTML parser inside the CDATA section for javascript to access. But seems it won't work in both firefox and Internet Explorer. In Firefix, it will treat it as comment, it's still possible to remove the  go get back the original content, in IE it's worse, CDATA seems be totally ignored. No way to get the content back.

html Syntax (Toggle Plain Text)
 
<html>
<body>
<div id="test"><![CDATA[Testing Data here]]></div>
</body>
</html>
<script>
alert(document.getElementById("test").innerHTML );
alert(document.getElementById("test").firstChild.data);
</script>
<html>
<body>
<div id="test"><![CDATA[Testing Data here]]></div>
</body>
</html>
<script>
alert(document.getElementById("test").innerHTML );
alert(document.getElementById("test").firstChild.data);
</script>

Anybody has some idea to get back the CDATA in the HTML using javascript?

Thanks

Similar Threads

vbscript variable within a CDATA node in XML, XSLT and XPATH
Display a movie clip on a button click in Graphics and Multimedia
HTML in CDDATA wont parse in RSS, Web Services and SOAP
XML and hyperlink as one of the data in RSS, Web Services and SOAP
replace address - how to? in PHP

jianwu_chen

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

6 posts
since Jan 2008

Permalink

Jan 8th, 2008

Re: CDATA in HTML

Don't embed scripts. Call functions in external scripts instead.

Your quotes need to be escaped.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Jan 8th, 2008

Re: CDATA in HTML

thanks for the reply. But maybe you mis-understand my issue.

Here my problem is not the javascript code itself. But the java script can't assess the data inside
<![[CDATA .... ]]

jianwu_chen

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

6 posts
since Jan 2008

Permalink

Jan 9th, 2008

Re: CDATA in HTML

Click to Expand / Collapse Quote originally posted by jianwu_chen ...

thanks for the reply. But maybe you mis-understand my issue.

Here my problem is not the javascript code itself. But the java script can't assess the data inside
<![[CDATA .... ]]

Test it with XHTML and see if you get anything.

digital-ether

Moderator

Reputation Points: 457

Solved Threads: 101

Nearly a Posting Virtuoso

Offline

1,250 posts
since Sep 2005

Permalink

Jan 12th, 2008

Re: CDATA in HTML

If you need data constants, put them in the script, not in the HTML.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Jan 12th, 2008

Re: CDATA in HTML

Click to Expand / Collapse Quote originally posted by MidiMagic ...

If you need data constants, put them in the script, not in the HTML.

The reason i want to put it in CDATA, is that I want to put some template html data which may include many lines of HTML source. While it's possible to put the whole template inside the javascript string, but it's quite ugly as i have to use the code like: "line1\n" + "line2" + ....., and if i have single or double quote inside the template, i have escape that, which will make the javascript code more ugly. I just want a cleaner way to let javascript read the template from some external source.

Last edited by jianwu_chen; Jan 12th, 2008 at 4:13 am.

jianwu_chen

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

6 posts
since Jan 2008

Permalink

Jan 12th, 2008

Re: CDATA in HTML

Click to Expand / Collapse Quote originally posted by jianwu_chen ...

The reason i want to put it in CDATA, is that I want to put some template html data which may include many lines of HTML source. While it's possible to put the whole template inside the javascript string, but it's quite ugly as i have to use the code like: "line1\n" + "line2" + ....., and if i have single or double quote inside the template, i have escape that, which will make the javascript code more ugly. I just want a cleaner way to let javascript read the template from some external source.

You can place the data in a separate file and load it into the page later using XMLHttpRequest or similar, if you don't need it right away.

You can place it in the HTML of the page and apply a CSS style to hide it.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<div style="display:none;">data here...</div>

Last edited by digital-ether; Jan 12th, 2008 at 9:38 am.

digital-ether

Moderator

Reputation Points: 457

Solved Threads: 101

Nearly a Posting Virtuoso

Offline

1,250 posts
since Sep 2005

Permalink

Jan 13th, 2008

Re: CDATA in HTML

Click to Expand / Collapse Quote originally posted by digital-ether ...

You can place the data in a separate file and load it into the page later using XMLHttpRequest or similar, if you don't need it right away.

You can place it in the HTML of the page and apply a CSS style to hide it.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<div style="display:none;">data here...</div>
<div style="display:none;">data here...</div>

You are right. I do use XMLHttpRequest, in case that the template is only required during runtime depends on users interaction. But for some templates which are always necessary to be loaded together with the master HTML. The AJAX way is not efficient and also increases the code complexity with no benifits. That's why I want a easier way.

I do use <div style="display:none;"> tag for that. It's ok for most of the HTML templates. But somehow, if there are special characters inside the template such as "<", "#" etc, the HTML parser will build up a wrong DOM which causes problems, i also don't want put a lot of XML entities such as < which is really ugly. that's why I want to use CDATA tag inside the above <DIV> tag to prevent HTML parser manipulate the content of the template. But seems this is not a solution as HTML parser won't interprete CDATA correctly for most of browsers, even I use XHTML.

jianwu_chen

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

6 posts
since Jan 2008

Permalink

Jan 16th, 2009

Re: CDATA in HTML

One way to do it is to wrap the HTML for your template in a <script> tag with a non-javascript "type", eg:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<script type='html/template' id='myTemplate'>
  ... your html code here...
</script>
<script type='html/template' id='myTemplate'>
  ... your html code here...
</script>

I've just tested this in IE7 (I believe it works in IE6), FF3 and Webkit 3.2) and it works great. You can get the HTML for each template by id:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  var myHTML = document.getElementById('myTemplate').innerHTML;
  var myHTML = document.getElementById('myTemplate').innerHTML;

Note that you can use any "type" you want there, as long as it is not something that the browser will try to interpret (like text/javascript or visual basic or something). I'm not sure if this will pass an (x)html tidy application or not.

owenoak

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Jan 2009

Permalink

Sep 1st, 2009

Re: CDATA in HTML

One solution for that is to put the data between <textarea> and make it hidden.

jianwu_chen

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

6 posts
since Jan 2008

Page 1
2
Next

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Professional JQuery Slideshow

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: duplicate form help

DaniWeb Message

Cancel Changes

User Name
Password