kdweiss-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2008-Feb-20 13:48 UTC
Bungee Book Tree Injection Example Not Working
Hi all,
I''m following the "Staff Manager" example (Chpt. 7 pgs.
121-133) in
the recently published Prototype and script.aculo.us book.
The example is broken into four parts:
1) The "People" HTML page (people.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"
xml:lang="en-
US">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Organizing your staff</title>
<link rel="stylesheet" type="text/css"
href="people.css" />
<script type="text/javascript"
src="prototype.js"></script>
<script type="text/javascript"
src="people.js"></script>
</head>
<body>
<h1>Organizing your staff</h1>
<div id="tree">
<h2>Your staff</h2>
<form id="staff">
<ul></ul>
</form>
</div>
<div id="props">
<h2>Item properties</h2>
<form id="editor">
<p>
<label for="edtName"
accesskey="N">Name:</label>
<input type="text" id="edtName" />
</p>
<p>
<input type="checkbox" id="chkIsGroup"
/>
<label for="chkIsGroup" id="lblIsGroup"
accesskey="G">Is a group?</label>
</p>
<p>
<input type="button" id="btnRemove"
value="Remove"
accesskey="R" />
<input type="button" id="btnAddChild"
value="Add as
child" accesskey="C" />
<input type="submit" id="btnSubmit"
value="Create" />
</p>
</form>
</div>
</body>
</html>
2) The "People" CSS File (people.css)
body { font-family: sans-serif; font-size: small; }
h1 { color: navy; font-size: x-large; font-weight: normal; }
h2 { color: green; font-size: larger; border-bottom: 1px solid green;
margin: 0 0 0.5em; }
img { border: 0; }
#tree {
width: 25em; height: 30em; overflow: auto; float: left;
border: 1px solid #444; background: #eee; padding: 0.5em;
cursor: default;
}
#props {
width: 25em; height: 10em; margin-left: 27em;
border: 1px solid #444; background: #eee; padding: 0.5em;
}
#tree ul {
list-style-type: none;
margin: 0; padding: 0;
}
#tree ul ul { padding-left: 1.3em; }
#tree li { padding-left: 0.1em; margin: 0.4em 0; }
#tree span { padding: 5px; }
span.group { font-weight: bold; }
#tree span.person { font-weight: normal; margin-left: 16px; }
#tree span.selected {
border: 1px solid #004; padding: 4px; background: #ddf;
color: navy;
}
#editor p { position: relative; height: 1.3em; }
#edtName, #chkIsGroup { position: absolute; left: 4em; margin-left:
0; }
#edtName { padding: 0 0.1em; right: 0; }
#edtName:focus, #edtName:active { border: 2px solid black; background:
#ffd; }
#lblIsGroup { position: absolute; left: 6.3em; }
3) The Prototype JS Library (I''m using v1.6)
4) The "People" JS file (people.js)
var Staff = {
_templates: {
person: new Template(
''<span class="person">'' +
''<input type="checkbox"
name="item[]" value="#{id}" />'' +
''<span>#{name}</span></span>''),
group: new Template(
''<span class="group">'' +
''<a href="" title="Click to
collapse">'' +
''<img class="toggler"
src="group_open.gif" alt="-" /></a>''
+
''<input type="checkbox"
name="item[]" value="#{id}" />'' +
''<span>#{name}</span></span>'' +
''<ul></ul>'')
},
nodes: [
{ id: ''item1'', name: ''ACME'',
children: [
{ id: ''item11'', name: ''IT'',
children: [
{ id: ''item111'', name:
''Sebastien Gruhier'' },
{ id: ''item112'', name:
''Alexis Jaubert'' },
{ id: ''item113'', name:
''Guillaume Rean'' }
] },
{ id: ''item12'', name: ''HR'',
children: [
{ id: ''item121'', name:
''Sandrine Daspet'' }
] },
{ id: ''item13'', name: ''Xavier
Borderie'' }
] },
],
createDOMFragment: function(parentId, node) {
var element = $(document.createElement(''li''));
element.id = node.id;
var tpl = this.templates[node.children ? ''group'' :
''person''];
var escapedNode = { id: node.id, name:
node.name.escapeHTML() };
element.update(tpl.evaluate(escapeNode));
$(parentId).down(''ul'').appendChild(element);
element.down(''input'').checked = node.checked;
return node;
},
init: function(id, nodes) {
id = id || ''staff'';
nodes = nodes || this.nodes;
nodes.each(function(n) {
n.container = nodes;
this.createDOMFragment(id, n);
if(n.children)
this.init(n.id, n.children);
}.bind(this));
}
}; // Staff
These file are all in the same directory on my local machine.
The HTML page renders fine in Firefox, but the initial Staff tree does
not load. As suggested on pg. 132, I entered the command
"Staff.init()" into the Firebug plug-in console. However, the Staff
tree still doesn''t load. The Firebug console doesn''t produce
any
errors.
Does anyone else notice any problems with any of these files?
Kevin
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
2 mistakes.
1 - templates vs _templates
var tpl = this.templates[node.children ? ''group'' :
''person''];
2 - escapeNode vs escapedNode
var escapedNode = { id: node.id, name: node.name.escapeHTML() };
element.update(tpl.evaluate(escapedNode));
Try this as your createDOMFragment() function ...
createDOMFragment: function(parentId, node) {
var element = $(document.createElement(''li''));
element.id = node.id;
var tpl = this._templates[node.children ? ''group'' :
''person''];
var escapedNode = { id: node.id, name: node.name.escapeHTML() };
element.update(tpl.evaluate(escapedNode));
$(parentId).down(''ul'').appendChild(element);
element.down(''input'').checked = node.checked;
return node;
},
I would also add the following line after the //Staff comment.
document.observe(''dom:loaded'', function(e) { Staff.init(); });
On 20/02/2008, kdweiss-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
<kdweiss-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> Hi all,
>
> I''m following the "Staff Manager" example (Chpt. 7 pgs.
121-133) in
> the recently published Prototype and script.aculo.us book.
>
> The example is broken into four parts:
>
> 1) The "People" HTML page (people.html)
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>
> <html xmlns="http://www.w3.org/1999/xhtml"
lang="en-US" xml:lang="en-
> US">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
> charset=utf-8" />
> <title>Organizing your staff</title>
> <link rel="stylesheet" type="text/css"
href="people.css" />
> <script type="text/javascript"
src="prototype.js"></script>
> <script type="text/javascript"
src="people.js"></script>
> </head>
> <body>
> <h1>Organizing your staff</h1>
> <div id="tree">
> <h2>Your staff</h2>
> <form id="staff">
> <ul></ul>
> </form>
> </div>
> <div id="props">
> <h2>Item properties</h2>
> <form id="editor">
> <p>
> <label for="edtName"
accesskey="N">Name:</label>
> <input type="text" id="edtName"
/>
> </p>
> <p>
> <input type="checkbox"
id="chkIsGroup" />
> <label for="chkIsGroup"
id="lblIsGroup"
> accesskey="G">Is a group?</label>
> </p>
> <p>
> <input type="button" id="btnRemove"
value="Remove"
> accesskey="R" />
> <input type="button"
id="btnAddChild" value="Add as
> child" accesskey="C" />
> <input type="submit" id="btnSubmit"
value="Create" />
> </p>
> </form>
> </div>
> </body>
> </html>
>
>
> 2) The "People" CSS File (people.css)
> body { font-family: sans-serif; font-size: small; }
> h1 { color: navy; font-size: x-large; font-weight: normal; }
> h2 { color: green; font-size: larger; border-bottom: 1px solid green;
> margin: 0 0 0.5em; }
> img { border: 0; }
>
> #tree {
> width: 25em; height: 30em; overflow: auto; float: left;
> border: 1px solid #444; background: #eee; padding: 0.5em;
> cursor: default;
> }
>
> #props {
> width: 25em; height: 10em; margin-left: 27em;
> border: 1px solid #444; background: #eee; padding: 0.5em;
> }
>
> #tree ul {
> list-style-type: none;
> margin: 0; padding: 0;
> }
>
> #tree ul ul { padding-left: 1.3em; }
> #tree li { padding-left: 0.1em; margin: 0.4em 0; }
> #tree span { padding: 5px; }
>
> span.group { font-weight: bold; }
>
> #tree span.person { font-weight: normal; margin-left: 16px; }
>
> #tree span.selected {
> border: 1px solid #004; padding: 4px; background: #ddf;
> color: navy;
> }
>
> #editor p { position: relative; height: 1.3em; }
> #edtName, #chkIsGroup { position: absolute; left: 4em; margin-left:
> 0; }
> #edtName { padding: 0 0.1em; right: 0; }
> #edtName:focus, #edtName:active { border: 2px solid black; background:
> #ffd; }
> #lblIsGroup { position: absolute; left: 6.3em; }
>
>
> 3) The Prototype JS Library (I''m using v1.6)
>
>
> 4) The "People" JS file (people.js)
> var Staff = {
> _templates: {
> person: new Template(
> ''<span class="person">'' +
> ''<input type="checkbox"
name="item[]" value="#{id}" />'' +
>
''<span>#{name}</span></span>''),
> group: new Template(
> ''<span class="group">'' +
> ''<a href="" title="Click to
collapse">'' +
> ''<img class="toggler"
src="group_open.gif" alt="-" /></a>''
> +
> ''<input type="checkbox"
name="item[]" value="#{id}" />'' +
>
''<span>#{name}</span></span>'' +
> ''<ul></ul>'')
> },
>
> nodes: [
> { id: ''item1'', name: ''ACME'',
> children: [
> { id: ''item11'', name:
''IT'',
> children: [
> { id: ''item111'', name:
''Sebastien Gruhier'' },
> { id: ''item112'', name:
''Alexis Jaubert'' },
> { id: ''item113'', name:
''Guillaume Rean'' }
> ] },
> { id: ''item12'', name:
''HR'',
> children: [
> { id: ''item121'', name:
''Sandrine Daspet'' }
> ] },
> { id: ''item13'', name: ''Xavier
Borderie'' }
> ] },
> ],
>
> createDOMFragment: function(parentId, node) {
> var element = $(document.createElement(''li''));
> element.id = node.id;
> var tpl = this.templates[node.children ? ''group''
: ''person''];
> var escapedNode = { id: node.id, name:
> node.name.escapeHTML() };
> element.update(tpl.evaluate(escapeNode));
> $(parentId).down(''ul'').appendChild(element);
> element.down(''input'').checked = node.checked;
> return node;
> },
>
> init: function(id, nodes) {
> id = id || ''staff'';
> nodes = nodes || this.nodes;
> nodes.each(function(n) {
> n.container = nodes;
> this.createDOMFragment(id, n);
> if(n.children)
> this.init(n.id, n.children);
> }.bind(this));
> }
> }; // Staff
>
> These file are all in the same directory on my local machine.
>
> The HTML page renders fine in Firefox, but the initial Staff tree does
> not load. As suggested on pg. 132, I entered the command
> "Staff.init()" into the Firebug plug-in console. However, the
Staff
> tree still doesn''t load. The Firebug console doesn''t
produce any
> errors.
>
> Does anyone else notice any problems with any of these files?
>
> Kevin
> >
>
--
-----
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731
"Standing on the shoulders of some very clever giants!"
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
On 20/02/2008, Richard Quadling <rquadling-gM/Ye1E23mwN+BqQ9rBEUg@public.gmane.org> wrote:> 2 mistakes. > > 1 - templates vs _templates > > var tpl = this.templates[node.children ? ''group'' : ''person'']; > > > 2 - escapeNode vs escapedNode > > var escapedNode = { id: node.id, name: node.name.escapeHTML() }; > element.update(tpl.evaluate(escapedNode)); > > > Try this as your createDOMFragment() function ... > > createDOMFragment: function(parentId, node) { > var element = $(document.createElement(''li'')); > element.id = node.id; > var tpl = this._templates[node.children ? ''group'' : ''person'']; > var escapedNode = { id: node.id, name: node.name.escapeHTML() }; > element.update(tpl.evaluate(escapedNode)); > $(parentId).down(''ul'').appendChild(element); > element.down(''input'').checked = node.checked; > return node; > }, > > I would also add the following line after the //Staff comment. > > document.observe(''dom:loaded'', function(e) { Staff.init(); }); > > > On 20/02/2008, kdweiss-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org <kdweiss-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > Hi all, > > > > I''m following the "Staff Manager" example (Chpt. 7 pgs. 121-133) in > > the recently published Prototype and script.aculo.us book. > > > > The example is broken into four parts: > > > > 1) The "People" HTML page (people.html) > > 2) The "People" CSS File (people.css) > > 3) The Prototype JS Library (I''m using v1.6) > > 4) The "People" JS file (people.js) > > > > These file are all in the same directory on my local machine. > > > > The HTML page renders fine in Firefox, but the initial Staff tree does > > not load. As suggested on pg. 132, I entered the command > > "Staff.init()" into the Firebug plug-in console. However, the Staff > > tree still doesn''t load. The Firebug console doesn''t produce any > > errors. > > > > Does anyone else notice any problems with any of these files? > > > > KevinHaving said all of that, there is no event watching for the buttons, so they won''t do anything. -- ----- Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731 "Standing on the shoulders of some very clever giants!" --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
kdweiss-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2008-Feb-20 17:14 UTC
Re: Bungee Book Tree Injection Example Not Working
Cool, thanks Richard. Fixing the two typos solved the problem. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Christophe Porteneuve
2008-Feb-20 17:50 UTC
Re: Bungee Book Tree Injection Example Not Working
kdweiss-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org a écrit :> Cool, thanks Richard. Fixing the two typos solved the problem.*pfew* :-) -- Christophe Porteneuve aka TDD tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---