Using script.aculous to create some cool effects on your website? Ever get this error message?
Ajax.Autocompleter is not a constructor
All of the results I found on Google suggested that the solution to the problem was to make sure that you were including controls.js (which is where the autocompletion stuff lives in script.aculous). If you checked and double checked that you have controls.js (or that you’re including scriptaculous.js which itself includes controls.js), then your problem could be that you included prototype.js twice. Example:
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script>
function createAC() {
new Ajax.Autocompleter('mytextbox', 'myautocomplete',
'autocomplete/url', {});
}
</script>
<input type="text" id="mytextbox" name="username" value="" />
<div id="myautocomplete" class="autocomplete"></div>
<a href="#" onclick="createAC(); return false;">start autocomplete</a>
<script type="text/javascript" src="prototype.js"></script>
Why? Prototype defines a class ‘Ajax’:
var Ajax = {
getTransport: function() {
...
and then Script.aculous extends that class:
Ajax.Autocompleter = Class.create();
Object.extend(Object.extend(Ajax.Autocompleter.prototype, Autocompleter.Base.prototype), {
...
So including prototype.js a second time blows away the class defined by Script.aculous. Really easy to fix, but if you’re working on a large team, make sure that prototype.js is only included once on every page.
While using scriptaculous I ran into this issue and I was unable to resolve. From one issue to the next. Makes me think this library isn’t very stable…. or perhaps I am am missing something….?
Thanks for this hint!
I ran into this as well, and you saved me some previous testing time. Huighly appreaciated. 🙂
Cheers,
Holger
I’ve ran into a similar situation with Ajax.InPlaceSelect. Are you saying if I have included:
js/lib/prototype.js
and
js/src/scriptaculous.js
at the top of my document, Scriptaculous could be including it again, which is causing the error:
Ajax.InPlaceSelect is not a constructor
Is it important that i include the prototype file? Or should I check to make sure it’s loading “controls.js”?
you can email me if you have a solution: brian [at] solepixel.com
Thanks a lot, I’ve been looking for what was causing this error for 60 minutes before I found your blog. It runs now 🙂
Thanks you man, i was breaking my head on this for a week now and i finally found the answer…:)
Thanks so much, I had a bit of .net code auto adding the script in a second time, cheers again.
This is not another “thank you” comment. Really.
I had the same issue but my fix was a little different. I’m developing using struts 2 and tomcat and when I used a s:url tag to construct the script tags the jessionid would be appended to the end of the script urls in the script tag. So I changed how I included my scripts, the jsessionid went away and now I don’t get the weird error.
So my script url would look like this:
scriptaculous.js;jsessionid=1D6720B552495F415587E83C64355191
The side effect of this was that the browser wouldn’t dynamically load builder,effects,dragdrop,controls,slider
So Ajax.Autocompleter never gets define.
Had this silly mistake of thinking that I didn’t need scriptaculous.js included on the page and only included prototype.js. By removing the entire file, I ran into the same error.
Figured you might enjoy a good laugh, thanks for your explanation!
I am working on an Autocompleter I am debugging it wiht mozilla Firefox
when I run it it show an error on line 54 of the controls.js the code is
” this.oldElementValue = this.element.value; ” and the error says:
this.element is null
baseInitialize()(null, “nombre”, Object)controls.js (lÃÂnea 54)
initialize()(“clinombre”, “nombre”, “nombres.php”, Object)controls.js (lÃÂnea 348)
klass()prototype.js (lÃÂnea 48)
(?)()
I have the same problem, but now it’s solved 🙂
I’m going to create my custom autocompletor now.
Love You 😛
you saved my time
Thanks ,Problem solved after including controls.js
Great! I almost went crazy… Thanks.
One solution is to add a test on Ajax variable in prototype.js
if (!Ajax) {
var Ajax = {
So when the page is reloaded, Ajax variable is not recreated and the scriptaculous extend not deleted.
The complexity comes from the mysterious management of JS cache in browser. In my mind, scriptaculous.js is cached and not prototype.js by the browser.
Hi, i have included scriptaculous.js and prototype.js, both are included just once, but even then i am getting the error “Ajax.Autocompleter not defined”. Please help
Thanks — this solved my problem.
Revisiting this topic: I was working on a magento site tonight that included prototype.js twice and was throwing this error, but for some odd, VERY ODD reason, when I created an accordion function and removed the 2nd called prototype.js file, it would cause my css to act up like crazy.
I verified that the prototype files are exactly the same and even tested both on their own, all while changing directory listings and everything.
Strange files.
Let me know if anyone has a clue why it would do this??
Thank you!