title: ajax jquery json returns 500 internal server error (undefined) but webmethod works
body: <p>I'm new to jquery and json and I'm trying to figure out why the getAreas() function returns a 500/Internal Server Error - undefined. I checked the WebMethod and it is returning data and the getRegions() function works just fine. The VS project builds just fine. Any ideas? The code is below:</p>
  
  <p>C# Server Side</p>
  
  <pre><code>[WebMethod]
  public static ArrayList GetRegionsArrayList()
  {
      ArrayList arrayList = new ArrayList();
      foreach (DataRow dr in Utility.Regions().Rows)
      {
          arrayList.Add(new ListItem(dr["Region"].ToString(), dr["Dot4"].ToString()));
      }
      return arrayList;
  }
  
  [WebMethod]
  public static ArrayList GetAreasArrayList(string Dot4)
  {
      ArrayList arrayList = new ArrayList();
      foreach (DataRow dr in Utility.Areas(Dot4).Rows)
      {
          arrayList.Add(new ListItem(dr["Area"].ToString(), dr["Dot6"].ToString()));
      }
      return arrayList;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;
      function PopulateControl(list, control) {
          if (list.length &gt; 0) {
              control.removeAttr("disabled");
              control.empty().append('&lt;option selected="selected" value="0"&gt;Please select&lt;/option&gt;');
              $.each(list, function () {
                 control.append($("&lt;option&gt;&lt;/option&gt;").val(this['Value']).html(this['Text']));
              });
          } else {
              control.empty().append('&lt;option selected="selected" value="0"&gt;Not available&lt;option&gt;');
          }
      }
  
      function getRegions() {
          $.ajax({
              type: "POST",
              url: "Demo.aspx/GetRegionsArrayList",
              data: "{}",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: OnRegionsPopulated,
              error: function (response) {
                  alert(response.status + ' ' + response.statusText);
              },
              failure: function (response) {
                  alert(response.d);
              }
          });
      }
  
      function getAreas() {
          $.ajax({
              type: "POST",
              url: "Demo.aspx/GetAreasArrayList",
              data: "{Dot4: ' + $('#&lt;%=DDL_Region.ClientID%&gt;').val() + '}",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: OnAreasPopulated,
              error: function (response) {
                  alert(response.status + ' ' + response.statusText);
              },
              failure: function (response) {
                  alert(response.d);
              }
          });
      }
  
      function OnRegionsPopulated(response) {
          PopulateControl(response.d, $("#&lt;%=DDL_Region.ClientID%&gt;"));
      }
  
      function OnAreasPopulated(response) {
          PopulateControl(response.d, $("#&lt;%=DDL_Area.ClientID%&gt;"));
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Controls</p>
  
  <pre><code>&lt;select id="Select1" onchange="getRegions();"&gt;
  &lt;select id="DDL_Region" onchange="getAreas();" runat="server"&gt;&lt;/select&gt;
  &lt;select id="DDL_Area" runat="server"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>The error details:</p>
  
  <blockquote>
    <p>{"Message":"Invalid JSON primitive: Dot4.","StackTrace":" at
    System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializePrimitiveObject()\r\n
    at
    System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializeInternal(Int32
    depth)\r\n at
    System.Web.Script.Serialization.JavaScriptObjectDeserializer.BasicDeserialize(String
    input, Int32 depthLimit, JavaScriptSerializer serializer)\r\n at
    System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer
    serializer, String input, Type type, Int32 depthLimit)\r\n at
    System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String
    input)\r\n at
    System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext
    context, JavaScriptSerializer serializer)\r\n at
    System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData
    methodData, HttpContext context)\r\n at
    System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext
    context, WebServiceMethodData
    methodData)","ExceptionType":"System.ArgumentException"}</p>
  </blockquote>