I'm trying to get an autoplete form working, and I can't seem to figure out why I keep getting an this.element is null error.

Here is the js:

    //autoplete
function AutoComp() {
new Ajax.Autopleter("autoplete", "autoplete_choices", "fin/autoplete", {});
}
document.onLoad = AutoComp();

HTML:

            <input type="text" id="autoplete" name="autoplete_parameter"/>
        <span id="indicator1" style="display: none">
          <img src="/shared/img/loading.png" alt="Working..." />
        </span>
        <div id="autoplete_choices" class="autoplete"></div>

When I load the page, I immediately get the this.element is null error from this section of controls.js:

var Autopleter = { };
Autopleter.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 autoplete test:

failed  testAjaxAutopleter   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  testAjaxAutopleterNoLinebreaksInResult   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)

I'm trying to get an autoplete form working, and I can't seem to figure out why I keep getting an this.element is null error.

Here is the js:

    //autoplete
function AutoComp() {
new Ajax.Autopleter("autoplete", "autoplete_choices", "fin/autoplete", {});
}
document.onLoad = AutoComp();

HTML:

            <input type="text" id="autoplete" name="autoplete_parameter"/>
        <span id="indicator1" style="display: none">
          <img src="/shared/img/loading.png" alt="Working..." />
        </span>
        <div id="autoplete_choices" class="autoplete"></div>

When I load the page, I immediately get the this.element is null error from this section of controls.js:

var Autopleter = { };
Autopleter.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 autoplete test:

failed  testAjaxAutopleter   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  testAjaxAutopleterNoLinebreaksInResult   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)

• javascript
• ajax
• autoplete

Share Improve this question Follow edited Nov 3, 2009 at 19:46 Jason Berkan 8,91477 gold badges3131 silver badges3939 bronze badges asked Nov 3, 2009 at 14:37 stormdrainstormdrain 7,89544 gold badges3939 silver badges7676 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

I'm not sure if it's still relevant, but the reason of this error can be pretty simple: Javascript during performing cannot find the element. You perform the js function OnLoad event. Sure on that stage no html elemnts loaded. put you script bellow the html, or call it on OnPreRender event.

Problem was the script calling autopleter was in the <head>... Needed to be after the input.

To get a better idea what is happening, either in IE8 use the Web Developer toolkit (for me I hit F12) and debug, then put in a break in the create function, or do the same with Firefox, using Firebug, and debug.

But, I am willing to bet this is your problem: element = $(element);

It is looking for an element type by that name. element = $('input') would get an array of all input elements on the page.

You may want element = $('#' + element), as that will get it by id, if you are using jquery, but I am not certain that that is the library you are using.

So put a break point in just before you do the assign and see what happens to the value of element before and after the assignation.

I haven't gotten this to work properly yet but I have eliminated the error. Put the Ajax.Autopleter script at the bottom of the page, or at least after the controls are defined.