How does this work? (CDATA)

[test9991014]

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="return 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"><label><
input name="ppu-postal-code" maxlength="" size="10" class="psearch
nonsafari" va
lue="Zip code" id="ppu-postal-code" type="text"><span id="ppu-input-
container-re
set"></span></label></div>
<script type="text/javascript">
// <![CDATA[
dojo.require("apple.widget.PrettySearchField");
var ppuinputcontainerObj = new apple.widget.PrettySearchField(
{
inputId: "ppu-postal-code",
containerId: "ppu-input-container",
resetIconId: "ppu-input-container-reset",
maxLength: "5",
results: "",
placeholder: "Zip code",
autosave: ""
}
);
// ]]>
</script>

[sheldonlg]

te*********@yahoo.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="return 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"><label><
input name="ppu-postal-code" maxlength="" size="10" class="psearch
nonsafari" va
lue="Zip code" id="ppu-postal-code" type="text"><span id="ppu-input-
container-re
set"></span></label></div>
<script type="text/javascript">
// <![CDATA[
dojo.require("apple.widget.PrettySearchField");
var ppuinputcontainerObj = new apple.widget.PrettySearchField(
{
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]

In article <v7******************************@giganews.com>,
sheldonlg <sheldonlgwrote:

te*********@yahoo.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="return 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"><label><
input name="ppu-postal-code" maxlength="" size="10" class="psearch
nonsafari" va
lue="Zip code" id="ppu-postal-code" type="text"><span id="ppu-input-
container-re
set"></span></label></div>
<script type="text/javascript">
// <![CDATA[
dojo.require("apple.widget.PrettySearchField");
var ppuinputcontainerObj = new apple.widget.PrettySearchField(
{
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]

David Stone wrote:

In article <v7******************************@giganews.com>,
sheldonlg <sheldonlgwrote:

>te*********@yahoo.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="return 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"><label><
input name="ppu-postal-code" maxlength="" size="10" class="psearch
nonsafari" va
lue="Zip code" id="ppu-postal-code" type="text"><span id="ppu-input-
container-re
set"></span></label></div>
<script type="text/javascript">
// <![CDATA[
dojo.require("apple.widget.PrettySearchField");
var ppuinputcontainerObj = new apple.widget.PrettySearchField(
{
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 &lt; and &amp; 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]

Stefan Ram wrote:

Gus Richter <gu********@netscape.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]

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
http://www.LittleWorksStudio.com

[Jukka K. Korpela]

Scripsit te*********@yahoo.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.

<script type="text/javascript">
// <![CDATA[

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
http://www.w3.org/TR/xhtml1/#h-4.8

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/