Ajax.Autocompleter is not a constructor

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.

This entry was posted in JavaScript, Rich Internet Applications. Bookmark the permalink.

18 Responses to Ajax.Autocompleter is not a constructor

  1. Olmec says:

    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….?

  2. Holger says:

    Thanks for this hint!

    I ran into this as well, and you saved me some previous testing time. Huighly appreaciated. :-)

    Cheers,

    Holger

  3. Brian says:

    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

  4. Sam says:

    Thanks a lot, I’ve been looking for what was causing this error for 60 minutes before I found your blog. It runs now :)

  5. Corgen says:

    Thanks you man, i was breaking my head on this for a week now and i finally found the answer…:)

  6. Paulie says:

    Thanks so much, I had a bit of .net code auto adding the script in a second time, cheers again.

  7. Andrew Grimm says:

    This is not another “thank you” comment. Really.

  8. 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.

  9. Reid Workman says:

    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!

  10. carlos says:

    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)
    (?)()

  11. Snowcore says:

    I have the same problem, but now it’s solved :)
    I’m going to create my custom autocompletor now.

  12. Ali says:

    Love You :P
    you saved my time

  13. Rathina Kumar says:

    Thanks ,Problem solved after including controls.js

  14. Hugo León says:

    Great! I almost went crazy… Thanks.

  15. Jean says:

    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.

  16. Saurav Singh says:

    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

  17. Nathan says:

    Thanks — this solved my problem.

  18. Tony says:

    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!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>