thr3ads.net - Rails spinoffs - Bungee Book Tree Injection Example Not Working [Feb 2008]

If this information is useful, please help other people find it:
Share via:

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
-~----------~----~----~----~------~----~------~--~---

Richard Quadling

2008-Feb-20 14:36 UTC

head link

Re: Bungee Book Tree Injection Example Not Working

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
-~----------~----~----~----~------~----~------~--~---

Richard Quadling

2008-Feb-20 14:38 UTC

head link

Re: Bungee Book Tree Injection Example Not Working

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?
> >
> > Kevin
Having 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

head link

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

head link

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
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - Feb 2008 - Bungee Book Tree Injection Example Not Working

Bungee Book Tree Injection Example Not Working

Re: Bungee Book Tree Injection Example Not Working

Re: Bungee Book Tree Injection Example Not Working

Re: Bungee Book Tree Injection Example Not Working

Re: Bungee Book Tree Injection Example Not Working