How does this work? (CDATA)

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>

test9991014 (AT) yahoo (DOT) 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.

In article <v7idnRjDA9OhXL3VnZ2dnUVZ_jGdnZ2d (AT) giganews (DOT) com>,
sheldonlg <sheldonlg> wrote:

test9991014 (AT) yahoo (DOT) 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...

David Stone wrote:

In article <v7idnRjDA9OhXL3VnZ2dnUVZ_jGdnZ2d (AT) giganews (DOT) com>,
sheldonlg <sheldonlg> wrote:

test9991014 (AT) yahoo (DOT) 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

Stefan Ram wrote:

Gus Richter <gusrichter (AT) netscape (DOT) net> writes:
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

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

Scripsit test9991014 (AT) yahoo (DOT) 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/