small medium large xlarge

21 May 2008, 20:30
Bharat Ruparel (148 posts)

I am going through Chapter 7 of your book and the people example in the directory /code/prototype/dom/people.html does not seem to work in Internet Explorer? It works fine in Firefox.

Here is what happens in IE 7: 1. When I click on the “-“ sign next to any check boxes in the tree. It opens up a new instance of my Windows Explorer! 2. When I click on an element to select it so that the right hand side form can display its contents, nothing happens. Firefox does it correctly though. 3. When I click on the check box itself. It gets selected or deselected correctly. However, clicking on the remove button does not work. 4. I just did a little test. I put an alert statement for handleTreeClick as follows:

function handleTreeClick(e) {

alert(‘I am handling the tree click’);

var elt = e.element(); …

When I load the html file and click on the tree in IE, nothing happens. However, Firefox displays the alert message if I click on the tree anywhere. So I thought that IE is not loading the Javascript files from the hard-disk. But that assumption turned out to be false since the table sorter program in the Intro chapter works perfectly in IE. If I put an alert message to see if event handlers are firing correctly, the messages do show up. Therefore, the problem is specific to the dom people example and IE 7.

I would also like to know how to debug in a situation like this, i.e., where things work in Firefox and do not in IE. How does one go about getting something remotely similar to Firebug in Microsoft environment?

Please advise.



22 May 2008, 06:49
Christophe Porteneuve (63 posts)

Hi Bharat,

First, know that there is an issue with the script as present in the book, that b0rks some behavior in IE: there’s an extraneous trailing comma at the end of the @Staff@ constant definition. The last comma in “this fragment”: is incorrect. If you have it, strip it, then reload with no cache and try it again.

Second, if you still have issues, as this is a fairly large example, the first thing to try is the “online example”: (except for this stupid comma, which should be fixed online pretty soon).

You can download all the files from its directory, correct the comma, and try that. I assure you this works on all major browsers. You would then diff against your own copy and see whether you perhaps mistyped something?


23 May 2008, 01:33
Bharat Ruparel (148 posts)

Thanks Christophe for the quick response. That was it. For the sake of other readers: here is what Christophe is pointing out: ` var Staff = { nodes: [ { id: ‘item1’, name: ‘ACME’, children: [ { id: ‘item11’, name: ‘IT’, children: [ { id: ‘item111’, name: ‘Sébastien Gruhier’ }, { id: ‘item112’, name: ‘Alexis Jaubert’ }, { id: ‘item113’, name: ‘Guillaume Réan’ } ] }, { id: ‘item12’, name: ‘HR’, children: [ { id: ‘item121’, name: ‘Sandrine Daspet’ } ] }, { id: ‘item13’, name: ‘Xavier Borderie’ } ] }, <— This comma is not needed remove it - Per Christophe ] ` Now I did that and everything started to work fine. By the way, I just tried your online demo which has the same problem that I had. Therefore, it must have the extra comma in the code as you pointed out. You may want to take care of that.

If I may, I need some advice and guidance from you. I am a Ruby on Rails programmer with more experience in Ruby and Ruby on Rails than the client side Javascripting and Ajax. Recently, I have started diving into the client side coding of XHTML/CSS/Javascript in that order. I find Javascript fascinating but annoying at the same time.

I went thorough Simply Javascript from Sitepoint without much problems and have been dabbling with the Art and Science of Javascript (another Sitepoint publication). I also have the JQuery in Action from Manning which I was going through until I got your book. I have temporarily put it aside since my needs are more Ruby on Rails specific at this point which your book ideally fills.

I find your writing style very very enjoyable. The non-trivial examples that you have in the opening chapter and the Dom chapter are excellent but mind-bending at the same time. I am still not through the DOM manipulation chapter yet and it is slow going, but this is precisely the kind of skills that I want to pick up.

This whole experience with Internet Explorer was an eye opener of sorts. I have been moving along at a fairly comfortable pace in Firefox and Firebug world, but this bug in the IE code threw me off compeletely. Here is the Javascript error message (once I found out how to display it) in Internet Explorer with the incorrect comma.

Line: 84 Char: 7 Error: ‘undefined’ is null or not an object Code: 0

Not very helpful, indeed. I had no hope of being able to debug it unless you or someone else pointed out the problem.

I have several follow-up questions:

  1. How do I go about debugging (or even learning) in the Internet Explorer environment? The reason I ask is that we have to support Internet Explorer for the site that I am responsible for?

  2. I still have problems trying to understand the entire code for the DOM chapter. It is definitely my lack of Javascript experience more than anything else. I consider myself as an intermediate Ruby Ruby on Rails programmer. I was stepping through your code using Firefox/Firebug combination in the People3 sub-directory. I think that it is going to be several sessions before I get it. Do you have any suggestions on picking up other concepts before I do that?

  3. As a Ruby on Rails developer, how much time should I be investing in learning jQuery?



23 May 2008, 05:31
Christophe Porteneuve (63 posts)

Hey Bharat,

I’m glad you enjoy the book!

As for your questions:

  1. Effectively debugging JS in MSIE is a friggin’ mess. Basically, either you have VisualStudio installed and plug into IE with it, or you’re pretty much out of luck. The IE Developer Toolbar is a joke, and whatever “features” it has don’t extend to JS anyway. Still, there are new 3rd-party plugins being released quite often, and I can’t keep on top of it all, so perhaps there is a better alternative these days. If there were, I’d love to know about it! The way I go about frontoffice dev these days is: develop, debug, tune and hone with Firefox and Firebug, double-check on Safari 3 and Opera 9, then test on IE7, then on IE6. Experience has me put a few extra tidbits here and there for IE’s sake when I script, but Prototype handles most of the complexity of this for you, so it’s just a matter of avoiding certain well-known issues (mostly related to table components and @@ stuff). Generally, the majority of headaches between IE and the rest of the world are more about CSS than they are about JS, once you use a well-honed JS lib.

  2. I don’t know, really. IMHO, the book’s DOM chapter strives to explain away any potential complexity or “trick” in the code, so it’s more a matter of carefully reading the surrounding text when you try the code out. If there are pending questions after that, you could ask about them here or on the “book’s blog”:, for instance as comments on the relevant Neuron Workout solutions post.

  3. What JS lib you use is orthogonal to whether you use Rails or not. I prefer Prototype over jQuery but that’s largely a question of coding style. jQuery works just fine with any backend, as does Prototype. What framework you’re using server-side shouldn’t constrain your client-side choices (except perhaps in the ASP.NET world, but even there, most people ditch Ajax.Net to use another, more established lib such as Prototype, jQuery or Dojo). Still, the nice thing about using Prototype is that it’ll let you use RJS, for instance. And while you could load Prototype for RJS purposes, and jQuery for your own custom scripting, it feels pretty heavy-handed.


24 May 2008, 13:07
Bharat Ruparel (148 posts)

Thanks Christophe for sharing your experience and knowledge. I live in Newton which is next to Boston. So, most likely, I will see you in the Ajax World in October. Regards, Bharat

24 May 2008, 17:46
Christophe Porteneuve (63 posts)

Sharing is what we write books and speak at conferences for, man :-)

Looking forward to hook up at TAE, then!