Failed to load resource + $.ajax call in Chrome

Question

I am having a very strange issue with Chrome and AJAX, I have an autocomplete form that has been working for a while. I fired up Visual Studio this morning and it doesn't work anymore. It works fine in production (with Chrome) and works fine locally if I use Firefox or IE, for chrome it doesn't!

I get the error:

Failed to load resource

in Developer tools, When I expand on the error I get:

f.support.ajax.f.ajaxTransport.sendjquery-1.7.1.min.js:4
f.extend.ajaxjquery-1.7.1.min.js:4
$.autocomplete.sourceCreate:217
a.widget._searchjquery-ui-1.8.17.custom.min.js:127
a.widget.searchjquery-ui-1.8.17.custom.min.js:127
(anonymous function)jquery-ui-1.8.17.custom.min.js:127

I placed a breakpoint in the callback function on the server but it doesn't even make it to the server. The error is definitely on the client side, here is the client-side code:

$("#LocationTxt").autocomplete({
            minLength: 4,
            source: function (req, resp) {
                $.ajax({
                    type: "GET",
                    url: "/Ad/SearchLocations",
                    data: "term=" + req.term,
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        resp($.map(data, function (value, key) {
                            return { data: value, label: data[key].Name, value: data[key].Name };
                        }));
                    }, 
                   error: function (data) {
                       alert(data.statusText);
                   }
                });
            },
            select: function (e, ui) {
                var cityId = ui.item.data.Id;
                $('#AdListing_LocationID').val(cityId);
            }
        });

Also the error event gets triggered, and the statusText property is simply "error". Not very helpful. I am running Chrome version: 17.0.963.46 (I have the latest version as on 2/9/2012). I believe my Chrome updated this morning when I fired up my PC, but I am not sure. Is there a log to tell when my chrome was updated?

Solution

If you are working on a local copy of the code, make sure you are working from within a web-server such as localhost. If you are working directly from the file system, google chrome will not allow you to make ajax requests to files on the file system for security reasons.

A few more things...

Remove this:

contentType: "application/json; charset=utf-8",

You aren't sending json, you are sending a GET request. Instead, add this

dataType: "json",

so that jQuery expects to receive json.

It also may help to have your server return headers setting the contentType to application/json with the proper charset utf-8.