I’m trying to get an autocomplete form working, and I can’t seem to figure out why I keep getting an this.element is null error.
Here is the js:
//autocomplete
function AutoComp() {
new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "fin/autocomplete", {});
}
document.onLoad = AutoComp();
HTML:
<input type="text" id="autocomplete" name="autocomplete_parameter"/>
<span id="indicator1" style="display: none">
<img src="/shared/img/loading.png" alt="Working..." />
</span>
<div id="autocomplete_choices" class="autocomplete"></div>
When I load the page, I immediately get the this.element is null error from this section of controls.js:
var Autocompleter = { };
Autocompleter.Base = Class.create({
baseInitialize: function(element, update, options) {
element = $(element);
this.element = element;
this.update = $(update);
this.hasFocus = false;
this.changed = false;
this.active = false;
this.index = 0;
this.entryCount = 0;
this.oldElementValue = this.element.value;
If I set the value of the textfield manually via value=”blah”, I still get null. If I try to do an alert in controls.js, it seems to fail at this.element = element;. e.g. if I alert(element), it alerts the id of the field properly. If I alert(this.element) [after it is assigned], it alerts null.
Thanks.
Strange behavior…
If I change
baseInitialize: function(element, update, options) {
element = $(element);
this.element = element;
this.update = $(update);
this.hasFocus = false;
this.changed = false;
this.active = false;
this.index = 0;
this.entryCount = 0;
this.oldElementValue = this.element.value;
to:
baseInitialize: function(element, update, options) {
test = $(element);
this.test = test;
this.update = $(update);
this.hasFocus = false;
this.changed = false;
this.active = false;
this.index = 0;
this.entryCount = 0;
this.oldElementValue = this.test.value;
It does not throw the error. Is ‘element’ reserved?
I just ran the scriptaculous unit tests and there were some failures on the autocomplete test:
failed testAjaxAutocompleter 7 assertions, 1 failures, 1 errors
Failure: 'ac_update' was not visible. undefined
TypeError: $("ac_update").firstChild is null(TypeError: $("ac_update").firstChild is null)
failed testAfterUpdateElement 2 assertions, 2 failures, 0 errors
Failure: 'ac2_update' was not visible. undefined
Failure: assertEqual: expected "'afterupdate:LI'", actual "'abcdefg'"
failed testTokenizing 1 assertions, 3 failures, 0 errors
Failure: assertEqual: expected "'test1'", actual "'abc'"
Failure: assertEqual: expected "'test1,test2'", actual "'abc,abc'"
Failure: assertEqual: expected "'test3,test2'", actual "'test1b,test2'"
failed testAjaxAutocompleterNoLinebreaksInResult 7 assertions, 1 failures, 1 errors
Failure: 'ac_update_br' was not visible. undefined
TypeError: $("ac_update_br").firstChild is null(TypeError: $("ac_update_br").firstChild is null)
Problem was the script calling autocompleter was in the
<head>… Needed to be after the input.