I am having a very strange issue with Chrome and AJAX, I have an autoplete 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
$.autoplete.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").autoplete({
            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?

I am having a very strange issue with Chrome and AJAX, I have an autoplete 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
$.autoplete.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").autoplete({
            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?

• javascript
• jquery
• ajax
• google-chrome

• cool. So it's not sending anything? What happens when you manually trigger it via a developer console? If it never gets called then is probably the code which calls it? – tkone Commented Feb 9, 2012 at 16:25
• So I took your suggestion and ran it manually and it still didn't work. But then I decided to pare what was different between IE/Firefox and Chrome. I discovered when I disabled the Ad Blocker plugin it worked!. I guess there was an update to that plugin that breaks the code or its blacklisted because the form I am filling out creates an "Ad" so a lot of my javascript object names, etc has the word "Ad" in it. So strange but thanks for your help! – TheWebGuy Commented Feb 9, 2012 at 17:40

1 Answer 1

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.