Question

我正在尝试让自动填充表单正常工作，而我似乎无法弄清楚为什么我一直会收到this.element null错误。

这是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>

当我加载页面时，我立即从control.js的这一部分得到this.element为null错误：

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;

如果我通过value =“blah”手动设置文本字段的值，我仍然会得到null。如果我尝试在controls.js中做一个警报，它似乎在this.element = element;失败。例如如果我提醒（元素），它会正确地提醒字段的id。如果我发出警告（this.element）[在分配之后]，它会提醒null。

感谢。

奇怪的行为......

如果我改变

  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;

为：

  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;

它不会抛出错误。 '元素'保留了吗？

我刚刚运行了scriptaculous单元测试，自动完成测试有一些失败：

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)

Answer 1

我不确定它是否仍然相关，但这个错误的原因可能非常简单：执行过程中的Javascript无法找到该元素。您执行js函数OnLoad事件。当然在那个舞台上没有加载任何html元素。把你的脚本放在html下面，或者在OnPreRender事件上调用它。

Answer 2

问题是调用autocompleter的脚本在<head>中...需要在输入之后。

Answer 3

为了更好地了解正在发生的事情，在IE8中使用Web Developer工具包（对我来说，我点击F12）和调试，然后在创建功能中中断，或者使用Firebug对Firefox执行相同的操作，和调试。

但是，我愿意打赌这是你的问题： element = $(element);

正在寻找该名称的元素类型。 element = $('input')将获得页面上所有输入元素的数组。

你可能想要 element = $('#' + element)，因为如果你使用的是jquery，它将通过id得到它，但我不确定那是你正在使用的库。

因此，在进行分配之前设置一个断点，看看在分配之前和之后element的值会发生什么。

Answer 4

我还没有让它正常工作，但我已经消除了错误。将Ajax.Autocompleter脚本放在页面底部，或者至少在定义控件之后。

autocomplete this.element为null

4 个答案: