I've encountered an issue while trying to implement an autocomplete form. For some reason, I keep receiving a null error message regarding this.element.
Below is the JavaScript code:
//autocomplete
function AutoComp() {
new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "fin/autocomplete", {});
}
document.onLoad = AutoComp();
Here is the 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>
Upon loading the page, I immediately encounter the this.element is null error in the controls.js section:
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;
Even setting the value of the textfield manually does not resolve the issue. Additionally, any attempts to set alerts in controls.js seem to fail at this.element = element;. While alert(element) properly alerts the field's ID, alert(this.element) after assignment alerts null.
Thank you for any assistance.
Encountering peculiar behavior...
If I modify:
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;
The error no longer occurs. Could 'element' be reserved?
After running scriptaculous unit tests, failures were observed in 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)