jQuery post causes Uncaught SyntaxError: Unexpected token :

Question

I found a bunch of similar questions here but after 3 hours of reading them and trying stuff, I am posting my own. I apologize for the duplication, but I just don't know what's going on here.

So I have this javascript function:

function saveSetting(settingName, settingValue) {
    $.post(
        appUrl + "Account/SaveSetting",
        { settingName: settingName, settingValue: settingValue },
        function (data) {
            alert(data.Result);
        },
        "json"
    );
}

which I call like this:

saveSetting("bookFontSize", fontSize);

where fontSize is "10.5" or something similar.

Chrome reports the post headers like this:

Request URL:http://localhost:1227/Account/SaveSetting?callback=jQuery151022712289774790406_1298625531801
Request Method:POST
Status Code:200 OK
Request Headers
Accept:text/javascript, application/javascript, application/ecmascript, application/x-ecmascript, */*; q=0.01
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-Length:42
Content-Type:application/x-www-form-urlencoded
Cookie:ASP.NET_SessionId=jwpzp4okerckuh2bhkl2pnwu; .ASPXAUTH=429EEA1CFBFD9D5702011C59F77F18F8DAEEEB412314D608E86289779DF8ED9C80C6E0370B7108D68C44B088C7CB6998F34C59DDCFF8EA9D4A556495F5D40DF21737392DCF5942F73726882BEC354C35599864F751751FD458473FA4541AF25294F7E16DC00AABD4DEC43B321B0ECCBF195FD419C3BC912017275FC478A27F0C12A28D124A663EA5F19E5AEFFB276603
Host:localhost:1227
Origin:http://localhost:1227
Referer:http://localhost:1227/Read/116/1
User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.98 Safari/534.13
X-Requested-With:XMLHttpRequest
Query String Parameters
callback:jQuery151022712289774790406_1298625531801
Form Data
settingName:bookFontSize
settingValue:10.5
Response Headers
Cache-Control:private, s-maxage=0
Connection:Close
Content-Length:38
Content-Type:application/json; charset=utf-8
Date:Fri, 25 Feb 2011 09:18:53 GMT
Server:ASP.NET Development Server/10.0.0.0
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:3.0

That goes to a C# / ASP.NET MVC3 action that looks like this:

[Authorize]
public JsonResult SaveSetting(string settingName, string settingValue)
{
    try
    {
        repository.SaveSettingForUser(CurrentUser, settingName, settingValue);
    }
    catch (Exception ex)
    {
        return Json(new { Result = CurrentUser.IsAdmin() ? "Failed :" + ex.Message : "Failed" });
    }
    return Json(new { Result = string.Format("Set {0} to {1}.", settingName, settingValue) });
}

which, according to chrome, returns this:

{"Result":"Set bookFontSize to 10.5."}

which looks like legitimate json to me. However, I get this error in chrome:

Uncaught SyntaxError: Unexpected token :

and this one in IE 7, and 8:

An error has occurred in the script on this page.
Line: 67456553
Char: 10
Error: Expected ';'
Code: 0
URL: http://localhost:1227/Read/116/1

I definitely do not have 67 million lines of code :)

Anyway, does anyone know what the heck is going on here? My alert does not run. IE never actually gets the request out, but Chrome does.

I think this function actually worked with a previous version of jQuery a long time ago, with the setting $.ajaxSettings.traditional = true, but now it doesn't work (jQuery 1.5.1) with or without that setting.

Update: I got it working. I stepped through the javascript with the debugger. For some reason, during the .ajax() call in jQuery, it was stepping into jquery.validate.js. Why would it do that? I had the file included, but was not using it anywhere. I eliminated the error by simply no longer referencing jquery.validate.js. But this kind of sucks, because what if I want to use the validation features in the future?

So my question now is "Why does having jquery.validate.js in my project screw everything up?"

Update 2: There is a bug in jquery.validate.js, which has now been fixed in a fork of that project on github. See my answer for details. I was not even using the validation features of that file, merely including it in the page for later use. It gets in the way and breaks things. Note from the author of jquery.validate.js regarding the fix: "Fixes jQuery 1.5- code by using jQuery.ajaxSettings and not window.ajaxSettings (yeah, that was dumb)."

Answer 1

I figured it out!!!

It's a bug in jquery.validate.js. It's repeated and documented here: http://bugs.jquery.com/ticket/8064

The author has addressed the issue on February 2, 2011, but this fix has not yet made it into an official release of the plugin (as of February 25, 2011 and jQuery Validate 1.7). If you would like jQuery 1.5+ JSON to work while using jquery validation, you should download the patched validation plugin.

https://github.com/jaubourg/jquery-validation/raw/master/jquery.validate.js https://github.com/jaubourg/jquery-validation/raw/master/jquery.validate.min.js

If you are here from google and the above links don't work anymore, upgrading to a version of validate that is greater than 1.7 will probably work. Alternatively, go here https://github.com/jaubourg/jquery-validation and grab the latest version from the repository.

2011-08-31 Update: It looks like they don't use that GitHub link anymore. I think this is what you need.