Question

我遇到了问题，希望你们能帮我解决。

我有这个功能，我想使用自动完成功能。在下面的帮助下，我设法删除了错误，但现在它在使用Ajax时不起作用。就像我之前写的那样，底部脚本（inbox.php）被加载到顶级脚本（home.php）中。

我发现如果我单独打开页面，自动完成脚本会起作用（所以只需要访问localhost / inbox.php），但是当通过Ajax时，它就会丢失。这就是我现在想的原因，问题出在Ajax脚本中，可以在示例的最后部分找到。

home.php（主页）

<head>

    <meta charset="UTF-8">
    <link rel="stylesheet" href="homeV2.css" type="text/css" media="screen">
    <script type="text/javascript" src="javascript/index.js"></script>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
    <script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/black-tie/jquery-ui.css">

    <title> 
        Homepage Westpop Intranet 
    </title>

    <script>
        window.onload = function()
            {
                showHome(<?=$gid?>);
                refreshChat();
                countdown();                                
            }           
    </script>



</head>

inbox.php（此页面在home.php中加载，使用Ajax）

<script type="text/javascript">
   var names = ['hi', 'bye', 'foo', 'bar'];

    $(document).ready(function() {
        $("#inputNaam").autocomplete({
          source: names
        });
    });
</script>
............ //some other script
    </div>
            </div>
        <div id='profielNieuwBericht'>
            <div id='nieuwBerichtKop'>
                Nieuw bericht
            </div>
            <table>
                <tr>
                    <td>Aan: </td>
                    <td><input type='text' class='inputNieuwBericht' id='inputNaam' /> </td>
                </tr>
                <tr>
                    <td> Onderwerp: </td>
                    <td> <input type='text' class='inputNieuwBericht' id='inputOnderwerp' /></td>
            </table>
            <textarea id='BerichtTextarea'></textarea></br>
            <input type='button' id='BerichtManagementButton' value='Stuur' />
        </div>
    </div>

这是Ajax的一部分。单击home.php中的按钮时会调用此脚本（链接未包含，但通过onClick ='showInbox（id）'调用）。

function showInbox(id){
if (id==''){
    document.getElementById("middenpag").innerHTML="";
    return;
}

if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
}
else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("middenpag").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","inbox.php?id="+id,true);
xmlhttp.send();

}

我希望你们能在这里看到我做错了什么！谢谢:)）

Answer 1

正如评论所述，不要包含多个jQuery库。选择您想要/需要的一个版本并使用它。你包括jQuery-ui版本1.10.0，它实际上是最新的only compatible with jQuery core 1.6+，所以取出你的1.3.0 include。

您正在调用来自autocomplete()内联事件的home.php中定义的自定义onkeydown方法。这是不必要的，就像您声明的整个autocomplete()方法一样。从basic autocomplete example开始，您需要做的唯一代码如下：

profile.php html

<input type="text" class="inputNieuwBericht' id="inputNaam' />

在你的例子中，我看到你也错过了输入元素上的结束标记。此外，如果您将此作为表单的一部分提交，则您将要填写输入的name=''属性，或者处理表单提交的服务器脚本无法使用从请求中获取变量。

javascript数组声明 - 如果你只在profile.php中使用它，那就把它放在那里。如果您在不同的包含文件之间重复使用相同的自动完成选项，则将其放在home.php中。或者将它放在一个单独的.php文件中，您可以include_once从最终使用它的文件中找到它。

<script type="text/javascript">
   var names = ['hi', 'bye', 'foo', 'bar'];
</script>

javascript自动完成绑定 - 每次自动完成时只执行一次，请使用document.ready处理程序，并且不要尝试将其与onkeydown内联事件一起使用。

<script type="text/javascript">
    $(document).ready(function() {
        $( "#tags" ).autocomplete({
          source: names
        });
    });

你已经完成了。最后，正如其他人也提到的那样，不要发布代码的截图。复制/粘贴您的代码，缩进它以使其格式化为代码，并指出错误发生在哪一行。此外，您应该包含profile.php包含的代码位。您对其工作原理的描述不足。

底部图片（profiel.php）被加载到顶部图片（home.php）中的脚本中。

这可能是一个iFrame，一个php包含或者需要，任意数量的javascript / ajax加载等等，所有这些都会对代码的工作方式产生不同的影响。

Answer 2

是的，我有一个问题的解决方案。

在我的程序中，问题是 template.tpl 文件中的重复jquery

**<script type="text/javascript" src="autocomplete/jquery.min.js"></script>**
<script type="text/javascript" src="autocomplete/jquery.tokeninput.js"></script>

<link rel="stylesheet" href="autocomplete/token-input.css" type="text/css" />
<link rel="stylesheet" href="autocomplete/token-input-facebook.css" type="text/css" />
<link rel="stylesheet" href="../../css/ui.all.css" rel="stylesheet" />
<link rel="stylesheet" href="../../css/styler.css"> 

**<script type="text/javascript" src="../../jsd/jquery-1.3.2.js"></script>**
<script type="text/javascript" src="../../jsd/ui.core.js"></script>
<script type="text/javascript" src="../../../js/ui.datepicker.js"></script>

我在模板中为自动完成添加了新的jquery.min.js，

...
<script type="text/javascript" src="autocomplete/jquery.min.js"></script>
...

我发现问题（.. bla bla object＃（）没有方法...），问题点是这个......

...
<!-- Trouble Autocomplete, so I disable this code -->
<-- <script type="text/javascript" src="../../jsd/jquery-1.3.2.js"></script> -->
...

所以我禁用了那个链接，Alhamdulilah就可以了。我希望，可能有用

未捕获的TypeError：对象＃<object>没有方法'autocomplete'</object>

2 个答案: