title: jQuery post causes Uncaught SyntaxError: Unexpected token :
body: <p>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.</p>
  
  <p>So I have this javascript function:</p>
  
  <pre><code>function saveSetting(settingName, settingValue) {
      $.post(
          appUrl + "Account/SaveSetting",
          { settingName: settingName, settingValue: settingValue },
          function (data) {
              alert(data.Result);
          },
          "json"
      );
  }
  </code></pre>
  
  <p>which I call like this:</p>
  
  <pre><code>saveSetting("bookFontSize", fontSize);
  </code></pre>
  
  <p>where fontSize is "10.5" or something similar.</p>
  
  <p>Chrome reports the post headers like this:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>That goes to a C# / ASP.NET MVC3 action that looks like this:</p>
  
  <pre><code>[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) });
  }
  </code></pre>
  
  <p>which, according to chrome, returns this:</p>
  
  <pre><code>{"Result":"Set bookFontSize to 10.5."}
  </code></pre>
  
  <p>which looks like legitimate json to me. However, I get this error in chrome:</p>
  
  <pre><code>Uncaught SyntaxError: Unexpected token :
  </code></pre>
  
  <p>and this one in IE 7, and 8:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>I definitely do not have 67 million lines of code :)</p>
  
  <p>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.</p>
  
  <p>I think this function actually worked with a previous version of jQuery a long time ago, with the setting <code>$.ajaxSettings.traditional = true</code>, but now it doesn't work (jQuery 1.5.1) with or without that setting.</p>
  
  <p><strong>Update</strong>: 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?</p>
  
  <p><strong>So my question now is "Why does having jquery.validate.js in my project screw everything up?"</strong></p>
  
  <p><strong>Update 2</strong>: 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 <em>using</em> 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)."</p>