The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

psuross (1) [Avatar] Offline
#1
I have the javascript function below, which is a DWR callback. The first alert() displays the correct value from the method in the bean, however, when the new LI is created and clicked on, it says that id is undefined. I have tried single and double quoting id within the Builder.node call, but nothing seems to work, I have tried swapping the single quotes for double quotes but I get the same undefined error for id.

Any help would be appreciated.

function addNewElementToList(id)
{
alert(id);
li = Builder.node("li", {id:"ListLi_", className:"alt", value:"id", onclick:"javascript:alert(id)"}, "New Item", [
Builder.node("input", {type:"hidden", id:"id", value:"id"})
]);
privateDropList.appendChild(li);
}
davecrane (149) [Avatar] Offline
#2
Re: Problem with Scriptaculous DOM manipulation
Hi,

Nice example - illustrating Javascript closures and event handler attributes. There are two ways to add an event handler to a DOM node:

1) an onclick attribute, or similar. The browser will create an anonymous function for you using the text of the attribute as the function body
2) programmatically assign a function object yourself

If you so the first option, there's no way of creating a closure around a variable - in this case id. To have the onclick reference your id variable, you'd need to add it programmatically, like so:

function addNewElementToList(id)
{
alert(id);
var li = Builder.node("li", {id:"ListLi_", className:"alt", value:"id", }, "New Item", [
Builder.node("input", {type:"hidden", id:"id", value:"id"})
]);
li.onclick = function(){ alert(id); }
privateDropList.appendChild(li);
}

NB: I've also added a var declaration for the li variable - written the way you did, you're actually declaring a global variable 'window.li', as window is the default object in the browser-based JS interpreter.

There's a fuller explanation of closures inchapter 9 of the book.

HTH

Dave
Christo (1) [Avatar] Offline
#3
Ajax in Action (JavaScript)
Hi Dave,

I use this blog for a private question, since I was not able to find your or Eric Pascarello’s emails. Also I was not able to get in touch with the relevant Manning’s representatives.

I am scheduled to teach “Internet Technology” class next Fall, where I decided to cover some Web 2.0 and Ajax technologies. I was using in the past Deitel/Deitel, "Internet and World Wide Web: How to Program" because I was not able to find a better text. This year I am planning to use your book “Ajax in action”. I already downloaded the source code from http://www.manning.com/crane/ . In my opinion “Ajax in action” is not only a very good book on Ajax, but an excellent JavaScript book I plan to adapt to your style of Javascript presentation in my class. However Appendix B (JavaScript) is not downloadable. My question is – is it possible to get an access to Appendix B. It will safe me a significant time in preparing my slides. Also, typing in by hand is not only tedious, but error-prone.

My email is: dichevc@wssu.edu

Thank you in advance,
Christo (http://myweb.wssu.edu/dichevc/)