{"id":886,"date":"2006-12-07T22:30:29","date_gmt":"2006-12-08T06:30:29","guid":{"rendered":"http:\/\/cephas.net\/blog\/2006\/12\/07\/ajaxautocompleter-is-not-a-constructor\/"},"modified":"2006-12-07T22:30:29","modified_gmt":"2006-12-08T06:30:29","slug":"ajaxautocompleter-is-not-a-constructor","status":"publish","type":"post","link":"https:\/\/cephas.net\/blog\/2006\/12\/07\/ajaxautocompleter-is-not-a-constructor\/","title":{"rendered":"Ajax.Autocompleter is not a constructor"},"content":{"rendered":"

Using script.aculous<\/a> to create some cool effects on your website? Ever get this error message?<\/p>\n

\nAjax.Autocompleter is not a constructor\n<\/p><\/blockquote>\n

All of the results I found on Google<\/a> suggested that the solution to the problem was to make sure that you were including controls.js (which is where the autocompletion<\/a> 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<\/a> twice. Example:<\/p>\n

\r\n<script type=\"text\/javascript\" src=\"prototype.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"scriptaculous.js\"><\/script>\r\n<script>\r\n  function createAC() {\r\n    new Ajax.Autocompleter('mytextbox', 'myautocomplete', \r\n      'autocomplete\/url', {});\r\n  }\r\n<\/script>\r\n<input type=\"text\" id=\"mytextbox\" name=\"username\" value=\"\" \/>\r\n<div id=\"myautocomplete\" class=\"autocomplete\"><\/div>\r\n<a href=\"#\" onclick=\"createAC(); return false;\">start autocomplete<\/a>\r\n<script type=\"text\/javascript\" src=\"prototype.js\"><\/script>\r\n<\/pre>\n
Why?  Prototype defines a class ‘Ajax’:<\/p>\n
\r\nvar Ajax = {\r\n  getTransport: function() {\r\n...\r\n<\/pre>\n
and then Script.aculous extends that class:<\/p>\n
\r\nAjax.Autocompleter = Class.create();\r\nObject.extend(Object.extend(Ajax.Autocompleter.prototype, Autocompleter.Base.prototype), {\r\n...\r\n<\/pre>\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading Ajax.Autocompleter is not a constructor<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[29,15],"tags":[],"_links":{"self":[{"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/posts\/886"}],"collection":[{"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/comments?post=886"}],"version-history":[{"count":0,"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/posts\/886\/revisions"}],"wp:attachment":[{"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/media?parent=886"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/categories?post=886"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cephas.net\/blog\/wp-json\/wp\/v2\/tags?post=886"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}