How does this work? (CDATA)

**sheldonlg** · Jun 27 '08, 07:15 PM

Re: How does this work? (CDATA)

test9991014@yah oo.com wrote:

While visiting the apple.com page, I noticed an unusual
form behavior that seems pretty nice, but looking at the
source (below) it is unclear how it works. Is there a tutorial
that explains it? Thanks.
>
<div id="ppu-checker">
<form id="ppu-check-form" onsubmit="retur n false;" method="get"
action="http
://store.apple.com/1-800-MY-APPLE/WebObjects/AppleStore.woa/wa/RSLID">
<p>
</p><div id="ppu-input-container" class="psearch
nonsafari"><lab el><
input name="ppu-postal-code" maxlength="" size="10" class="psearch
nonsafari" va
lue="Zip code" id="ppu-postal-code" type="text"><sp an id="ppu-input-
container-re
set"></span></label></div>
<script type="text/javascript">
// <![CDATA[
dojo.require("a pple.widget.Pre ttySearchField" );
var ppuinputcontain erObj = new apple.widget.Pr ettySearchField (
{
inputId: "ppu-postal-code",
containerId: "ppu-input-container",
resetIconId: "ppu-input-container-reset",
maxLength: "5",
results: "",
placeholder: "Zip code",
autosave: ""
}
);
// ]]>
</script>

The CDATA lines have been commented out.

**David Stone** · Jun 27 '08, 07:15 PM

Re: How does this work? (CDATA)

In article <v7idnRjDA9OhXL 3VnZ2dnUVZ_jGdn Z2d@giganews.co m>,
sheldonlg <sheldonlgwrote :

test9991014@yah oo.com wrote:

While visiting the apple.com page, I noticed an unusual
form behavior that seems pretty nice, but looking at the
source (below) it is unclear how it works. Is there a tutorial
that explains it? Thanks.

<div id="ppu-checker">
<form id="ppu-check-form" onsubmit="retur n false;" method="get"
action="http
://store.apple.com/1-800-MY-APPLE/WebObjects/AppleStore.woa/wa/RSLID">
<p>
</p><div id="ppu-input-container" class="psearch
nonsafari"><lab el><
input name="ppu-postal-code" maxlength="" size="10" class="psearch
nonsafari" va
lue="Zip code" id="ppu-postal-code" type="text"><sp an id="ppu-input-
container-re
set"></span></label></div>
<script type="text/javascript">
// <![CDATA[
dojo.require("a pple.widget.Pre ttySearchField" );
var ppuinputcontain erObj = new apple.widget.Pr ettySearchField (
{
inputId: "ppu-postal-code",
containerId: "ppu-input-container",
resetIconId: "ppu-input-container-reset",
maxLength: "5",
results: "",
placeholder: "Zip code",
autosave: ""
}
);
// ]]>
</script>

>
The CDATA lines have been commented out.

It may be a WebObjects thing? Not sure, as I've never actually
poked into WebObjects, but Apple certainly has...

**Gus Richter** · Jun 27 '08, 07:15 PM

Re: How does this work? (CDATA)

David Stone wrote:

In article <v7idnRjDA9OhXL 3VnZ2dnUVZ_jGdn Z2d@giganews.co m>,
sheldonlg <sheldonlgwrote :
>

>test9991014@yah oo.com wrote:

>>While visiting the apple.com page, I noticed an unusual
>>form behavior that seems pretty nice, but looking at the
>>source (below) it is unclear how it works. Is there a tutorial
>>that explains it? Thanks.
>>>
>><div id="ppu-checker">
>> <form id="ppu-check-form" onsubmit="retur n false;" method="get"
>>action="htt p
>>://store.apple.com/1-800-MY-APPLE/WebObjects/AppleStore.woa/wa/RSLID">
>> <p>
>> </p><div id="ppu-input-container" class="psearch
>>nonsafari"><l abel><
>>input name="ppu-postal-code" maxlength="" size="10" class="psearch
>>nonsafari" va
>>lue="Zip code" id="ppu-postal-code" type="text"><sp an id="ppu-input-
>>container-re
>>set"></span></label></div>
>><script type="text/javascript">
>>// <![CDATA[
>> dojo.require("a pple.widget.Pre ttySearchField" );
>> var ppuinputcontain erObj = new apple.widget.Pr ettySearchField (
>> {
>> inputId: "ppu-postal-code",
>> containerId: "ppu-input-container",
>> resetIconId: "ppu-input-container-reset",
>> maxLength: "5",
>> results: "",
>> placeholder: "Zip code",
>> autosave: ""
>> }
>> );
>>// ]]>
>></script>

>The CDATA lines have been commented out.

>
It may be a WebObjects thing? Not sure, as I've never actually
poked into WebObjects, but Apple certainly has...

In XHTML, Script and Style element contents must be wrapped within a
CDATA marked section to avoid expansion of entities < and & as start of
markup and not to recognize < and & as < and & respectively. i.e.

<script>
<![CDATA[
... unescaped script content ...
]]>
</script>

The (//) are javascript single line comments - the CDATA start and end
tags are required for XHTML, but javascript will not see those lines.

--
Gus

**Gus Richter** · Jun 27 '08, 07:15 PM

Re: How does this work? (CDATA)

Stefan Ram wrote:

Gus Richter <gusrichter@net scape.netwrites :

>In XHTML, Script and Style element contents must be wrapped within a
>CDATA marked section to avoid expansion of entities < and & as start of

>
These characters can also be encoded by other
well-known means without »CDATA«.

XHTML _will_ expand the entities.
Javascript does _not_ want them expanded.
The CDATA marked sections will _avoid_ expansion of the entities in the
XHTML document _within the CDATA marked sections_.

--
Gus

**Jonathan N. Little** · Jun 27 '08, 07:15 PM

Re: How does this work? (CDATA)

Gus Richter wrote:

XHTML _will_ expand the entities.
Javascript does _not_ want them expanded.
The CDATA marked sections will _avoid_ expansion of the entities in the
XHTML document _within the CDATA marked sections_.
>

One good reason why those how do not understand the ramifications of
using XHTML should stick to HTML.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

Little Works Studio Site Maintainance

http://www.LittleWorksStudio.com

**Jukka K. Korpela** · Jun 27 '08, 07:15 PM

Re: How does this work? (CDATA)

Scripsit test9991014@yah oo.com:

While visiting the apple.com page, I noticed an unusual
form behavior that seems pretty nice, but looking at the
source (below) it is unclear how it works. Is there a tutorial
that explains it? Thanks.

You'll find plenty of JavaScript tutorials, mostly poor, on the net.
JavaScript is not HTML. Followups trimmed.

If _this_ puzzles you, as "(CDATA)" on the Subject line suggests, then
you have a problem with HTML as well. You can simply read the HTML
specs, specifically

XHTML 1.0: The Extensible HyperText Markup Language (Second Edition)

http://www.w3.org/TR/xhtml1/#h-4.8

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/