jQuery 自动完成 - 无效标签 (Firebug) / 未捕获的语法错误 (Chrome)
在 SO 的好心人的帮助下,我成功地让我的自动完成功能在 CodeIgniter 2.0 的基本测试页面上运行。
当我将代码移动到实际页面时,出现了问题。
一旦我输入第一个字母,我就会进入 Firebug
invalid 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"}
With help from the good folks here at SO I managed to make my autocomplete run on a bare bones test page on CodeIgniter 2.0.
When I move the code to the actual page, there's a problem.
As soon as I type the first letter, I get on Firebug
invalid label
[Break On This Error] {"response":"true","message":[{"label"... My Park","value":"Thier Park"}]}
and on 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
Here is my CI view code:
<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>
and my CI controller code:
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);
}
As above, this all works perfectly on a bare bones page within CI.
But when this is output to my standard CI template I get the errors. I've disabled several other JS scripts and the problem persists.
Curiously, if I repeat the download of jQuery right before the CI view script above it works. But obviously that's not a solution :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...
Anyone know how to kill this bug?
Thanks!
EDIT:
Here is the JSON response on the console
[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"}]}
EDIT2:
Using console.log(req)
shows
Object { term="asd"}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
听起来它与此处列出的 jQuery 重复 ajax 调用错误有关: jQuery Bug #8398
事实证明jQuery 1.5 正在将 json 的后续 ajax 调用修改为 jsonp,这会导致此错误。
我通过遵循错误更改历史记录中建议的解决方法之一来修复它,并在进行 ajax 调用之前将以下代码放置在某处:
也应该修复其他 ajax 请求的任何问题。
Sounds like it's related to a jQuery repeat ajax call bug listed here: jQuery Bug #8398
It turns out that jQuery 1.5 is modifying subsequent ajax calls for json to jsonp which leads to this error.
I fixed it by following one of the workarounds suggested in the bug change history and placing the following code somewhere before my ajax calls are made:
Should fix any problems for other ajax requests too.