autocomplete problems with serverside json

Question

For some reason the script below is not working.

This is the code I am using to generate the json data:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
    Response.Clear()
    Response.Write(generate_json_data())
    Response.End()
End Sub

This produces the following output on screen:

[ {id:0,value:"c++"}, {id:1,value:"java"}, {id:2,value:"php"}, {id:3,value:"coldfusion"}, {id:4,value:"javascript"}, {id:5,value:"asp"}, {id:6,value:"ruby"} ];

This is the jquery I have so far, which does not seem to work. It does not give an error, when I type into the input field, nothing happens, when it should be displaying some of the data from the json data.

$("input").autocomplete({
    source: "serverside_array.aspx",
    dataType: "json",
    select: function (event, ui) {
        $("#txtAllowSearch").val(ui.item.value); // display the selected text
        $("#txtAllowSearchID").val(ui.item.id); // save selected id to hidden input
    }
});

EDIT 1: The header from the developer tools in chromium 10

Request URL:http://intranet/test_array.aspx?term=j
Request Method:GET
Status Code:200 OK
Request Headers
Accept:application/json, text/javascript, */*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Type:application/x-www-form-urlencoded
Host:intranet
Referer:http://intranet/rights_stage_three.aspx
User-Agent:Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.17 (KHTML, like Gecko) Chrome/10.0.652.0 Safari/534.17
X-Requested-With:XMLHttpRequest
Query String Parameters
term:j
Response Headers
Cache-Control:private
Content-Length:204
Content-Type:application/json; charset=utf-8
Date:Thu, 27 Jan 2011 16:11:14 GMT
Server:Microsoft-IIS/6.0
X-AspNet-Version:2.0.50727
X-Powered-By:ASP.NET

EDIT 2: looking at the reponse data XHR, I get the following

name test_array.aspx

method get

status 200 ok

type application/json

size 204b

time pending

EDIT 3:

Now I am totally confused. I got it working by simply changing the contenttype generated by the aspx page to:

text/xml

instead of

applicaiton/json

why does it work with text/xml when I am returning json?

why not use a webservice such as an asmx to generate the json? — Mark Schultheiss, Jan 27 '11 at 16:30
Is that why I am experiencing problems? Because I am not using a webservice to generate the json? — oshirowanen, Jan 27 '11 at 16:38
well, writing to the .aspx it unconventional for this - this is why the .asmx is used. Some background on asmx I have answered before on setting those up: http://stackoverflow.com/questions/2225781/asp-net-web-method-that-accepts-a-listcustomobject-is-failing-with-web-service/2268178#2268178 — Mark Schultheiss, Jan 27 '11 at 17:14
here is and MVC example: http://blog.schuager.com/2008/09/jquery-autocomplete-json-apsnet-mvc.html — Mark Schultheiss, Jan 27 '11 at 17:17

score 1 · Accepted Answer · answered Jan 27 '11 at 15:12

1

Use a webdev tool like Firebug or Operas and Chromes built-in dev-tools which can list HTTP requests and responses to you.

Check if a JavaScript error is logged.

If not, check for the response, and that the responses Content-Type is text/javascript if it’s a callback, or application/json if only JSON data.

Without the content type the ajax request may fail because of security against XSS.

answered Jan 27 '11 at 15:12

Kissaki

8,810
5
40
42

Using the developer tools in chromium 10, it does not seem to display and javascript error messages. However, it reports that it has successfully retrieve html when I type something into the input field, when I would have thought it should be reporting the retrieval of json... – oshirowanen Jan 27 '11 at 16:07
I have updated my original post to include details on the header and the reponse XHR. – oshirowanen Jan 27 '11 at 16:20

score 1 · Answer 2 · answered Jan 27 '11 at 18:03

[ {id:0,value:"c++"}, {id:1,value:"java"}, {id:2,value:"php"}, {id:3,value:"coldfusion"}, {id:4,value:"javascript"}, {id:5,value:"asp"}, {id:6,value:"ruby"} ];

The semicolon at the end of the string should not be there. Also the Content-Type of the response should be application/json. And consider to put all values in double quotes. May be it will work without it, but it is not the proper JSON format without it. This is the standard compliant JSON string:

[{"id":0,"value":"c++"}, {"id":1,"value":"java"}, {"id":2,"value":"php"}]

autocomplete problems with serverside json

2 Answers2