OSBlues

Just before Xmas I spent ages struggling with the “Ajax.Autocompleter is not a constructor” error while trying to add a script.aculo.us autocompleter to a textbox.  I’ve done them loads of times before and never had an issue so unsurprisingly this infuriated me!

I checked online and found suggestions to do with referencing prototype more than once, and not including the right bits of script.aculo.us (effects.js, I think it’s in).  But none of those were the case.

In the end I found the answer myself… I’d followed the generally good practice of placing all my javascript references and code at the bottom of my page (just before /body) which is how I always do things nowadays.  This works absolutely great when working with prototype as it means the page doesn’t have to wait for the library to load and things therefore aren’t unnecessarily delayed.  Now, I say it works great for prototype, it doesn’t however work for script.aculo.us, THIS HAS TO GO IN THE HEAD!

So, there we have it, if you hit this problem and you’re doing “the right thing” by including your javascript goodies at the bottom of your page, I’m afraid that won’t work here.  Move your JS references to your head and things work dandy again.  You can still do your actual javascript code before /body (which I would suggest you do), just include the references to prototype and scriptaculous in the head.

I hope this helps…. and saves some hair pulling.

Update: 15/03/2010 – Just had another instance of this (well, a colleague did) and we’ve uncovered another area that can throw this same error! Everything looked exactly right, so we were scratching our heads for quite a while… until I looked at the HTML source and noticed a random <br/> at the top of the page. Looking at the code I noticed that my colleague had been outputting some debug type info before the start of the document (in this case the debug info was empty, but it was outputting a “br” after it. This, by the looks of it, throws out the DOM, such that Script.aculo.us can’t do it’s thing and rather usefully gives us this same standard “Ajax.Autocompeter is not a constructor” error. So, if you’re still having issues… check your source! Commenting the debug line out (and this the “br”), fixed it.

:: :: :: :: :: :: :: :: :: :: :: :: :: :: :: ::