开发者

jQuery Autocomplete - Invalid label (Firebug) / Uncaught SyntaxError (Chrome)

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(); ?&开发者_如何学JAVAgt;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"}


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:

$.ajaxSetup({
   jsonp: null,
   jsonpCallback: null
});

Should fix any problems for other ajax requests too.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜