如何解决jQuery Autocomplete-无效标签Firebug/未捕获的SyntaxErrorChrome
|| 在SO的优秀人员的帮助下,我设法在CodeIgniter 2.0的裸机测试页面上运行了自动完成功能。 当我将代码移至实际页面时,出现了问题。 键入第一个字母后,我就会上Firebuginvalid label
[Break On This Error] {\"response\":\"true\",\"message\":[{\"label\"... My Park\",\"value\":\"Thier Park\"}]}
并在Chrome上
// jquery.min.js:line 16
Uncaught SyntaxError: Unexpected token :
d.d.extend.globalEvaljquery.min.js:16
d.ajaxSetup.converters.text scriptjquery.min.js:16
bQjquery.min.js:16
vjquery.min.js:16
d.support.ajax.d.ajaxTransport.send.c
这是我的CI视图代码:
<script>
$(document).ready(function() {
$(\"#exer_loc\").autocomplete({
source: function(req,add){
$.ajax({
url: \'<?php echo base_url(); ?>exercise/loc_autocomplete\',dataType: \'json\',type: \'POST\',data: req,success: function(data){
if(data.response ==\'true\'){
add(data.message);
}
}
});
},minLength: 1,select: function(event,ui){
$(this).end().val(ui.item.value);
}
});
});
</script>
和我的CI控制器代码:
public function loc_autocomplete()
{
$search = $this->input->post(\'term\');
$data[\'response\'] = \'false\';
$this->db->select(\'*\');
$this->db->from(\'loc_exercise\');
$this->db->like(\'locations\',$search);
$locations = $this->db->get()->result();
if (count($locations) > 0) {
$data[\'message\'] = array();
foreach ($locations as $location) {
$data[\'message\'][] = array(\'label\' => $location->locations,\'item\' => $location->locations,\'value\' => $location->locations );
}
$data[\'response\'] = \'true\';
}
echo json_encode($data);
}
如上所述,所有这些都可以在CI中的裸露页面上完美地工作。
但是,当这输出到我的标准CI模板时,我得到了错误。我已经禁用了其他几个JS脚本,问题仍然存在。
奇怪的是,如果我在上面的CI视图脚本起作用之前立即重复下载jQuery。但是显然,这不是解决方案:P。
<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js\"></script>
<script type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js\"></script>
<script>
$(document).ready(function() {
$(\"#exer_loc\").autocomplete({
source: function(req,add){
etc...
有人知道如何杀死这个错误吗?
谢谢!
编辑:
这是控制台上的JSON响应
[Object { label=\"My Place\",item=\"My Place\",value=\"My Place\"},Object { label=\"Pond Park\",item=\"Pond Park\",value=\"Pond Park\"},Object { label=\"Rock Park\",item=\"Rock Park\",value=\"Rock Park\"}]
//html
{\"response\":\"true\",\"message\":[{\"label\":\"My Place\",\"item\":\"My Place\",\"value\":\"My Place\"},{\"label\":\"Fresh Pond Park\",\"item\":\"Fresh Pond Park\",\"value\":\"Fresh Pond Park\"},{\"label\":\"Cat Rock Park\",\"item\":\"Cat Rock Park\",\"value\":\"Cat Rock Park\"}]}
编辑2:
使用console.log(req)
节目
Object { term=\"asd\"}
解决方法
听起来与这里列出的jQuery重复ajax调用错误有关:jQuery Bug#8398
事实证明,jQuery 1.5正在将对json的后续ajax调用修改为jsonp,从而导致此错误。
我通过遵循错误更改历史记录中建议的一种变通办法并将以下代码放置在我的Ajax调用之前的某个位置来解决了该问题:
$.ajaxSetup({
jsonp: null,jsonpCallback: null
});
应该也解决其他ajax请求的任何问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。