Question

Got a simple autocomplete box (jquery ui) that gets its source from a web service. The code is something like below:

var autocompleteOptions = {
    source = getDataFromService,
    minLength: 3
};

var getDataFromService = function(request, response) {
    var ajaxOptions = {
        url: "http://myservice:1234/somedata/",
        dataType: "jsonp",
        data: "someVariable = " + request.term,
        success: function(data) { alert("data"); },
        error: function(xhr, description, error) { alert("failed"); }
    };

    $.ajax(ajaxOptions);
}

$(someSelector).autocomplete(autocompleteOptions);

Looking in fiddler and even in the Firefox firebug panel, I can see that the JSON is correctly returned, and the server response is a 200. I have even checked the created jsonp script snippet, which also contains the correct JSON. However it always hits the error function not the success one.

I have also tried using complete and getting the data from the xhr manually, however the responseText and responseXml are both undefined. The error contained says parse error, but it all seems to be syntactically correct json, as the firebug panel and fiddler both display it fine.

HTTP/1.1 200 OK
Server: ASP.NET Development Server/9.0.0.0
Date: 28 Jun 2011 11:17:04 GMT
X-AspNet-Version: 2.0.50727
X-AspNetMvc-Version: 2.0
Cache-Control: private
Content-Type: application/json; charset=utf-8
Content-Length: 29
Connection: Close

[{"id":"1", "somevar":"hello"}]

Answer 1

That JSON is not correct,

[{"id":"1", somevar:"hello"}]

needs to be

[{"id":"1", "somevar":"hello"}]

JSON requires double quotes.

http://jsfiddle.net/robert/Y6ypV/

A value can be a string in double quotes, or a number, or true or false or null, or an object or an array. These structures can be nested.

Take From: http://www.json.org/