title: Using AJAX to Dynamically Fill a Dropdown VB.Net JQuery
body: <p>I am trying to make an AJAX call to fill a dropdown when a value is selected in another dropdown. Currently, I am getting a SyntaxError: Invalid Character error, but if I remove the "dataType: json", I get this mess that looks like HTML code. The dropdown must be bound using value and text pairs. This is my ASPX code related to the dropdown:</p>
  
  <pre><code>&lt;%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master"      CodeBehind="Request.aspx.vb" Inherits="NDBEDP.Request" MaintainScrollPositionOnPostback="true" %&gt;
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"&gt;
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server"&gt;
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"&gt;
      &lt;script type="text/javascript"&gt;
          $('.entityDrop').live('change', function (event) {
              loadStateDrop()
          });
  
          var loadStateDrop = function () {
              var data = "{'entity':'"+ $('#&lt;%=ddlEntity.ClientID%&gt; option:selected').val()+"'}"
              alert("before ajax(), val: " + $('#&lt;%=ddlEntity.ClientID%&gt; option:selected').val());
              $.ajax({
                  type: "POST",
                  url: "Request.aspx/loadStates",
                  datatype: "JSON",
                  data: data,
                  contentType: "application/json; charset=utf-8",
                  success: function (list) {
                      alert(list);
                      $('.stateDrop').empty()
                      $.each(list, function (element) {
                          var optn = document.createElement("OPTION");
                          optn.text = element.StateAbbr;
                          optn.value = element.StateID;
                          $('.stateDrop').append(optn);
                      });
                  },
                  error: function (jqXHR, textStatus, errorThrown) {
                      alert("Error updating dropdowns: " + errorThrown);
                  }
              });
          };
      &lt;/script&gt;
      &lt;asp:panel ID="userInput" runat="server"&gt;
          &lt;asp:panel id="userInformation" runat="server" BorderStyle="None" style="margin-bottom: 0px"&gt;
              &lt;asp:DropdownList cssClass="entryField, entityDrop" ID="ddlEntity" runat="server" Width="95%"&gt;&lt;/asp:DropdownList&gt;
              &lt;asp:DropDownList cssClass="entryField, stateDrop" ID="ddlExpenseState" runat="server" Width="18%"&gt;&lt;/asp:DropDownList&gt;
              &lt;asp:DropDownList ID="ddlExpensePeriod" runat="server" cssClass="entryField" Width="50%"&gt;&lt;/asp:DropDownList&gt;
              &lt;asp:DropDownList ID="ddlExpenseYear" runat="server" cssClass="entryField" Width="20%"&gt;&lt;/asp:DropDownList&gt;
          &lt;/asp:panel&gt;
      &lt;/asp:panel&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>This is my VB.Net code:</p>
  
  <pre><code>Imports NDBEDP.StringExtensions
  Imports NDBEDP.DropdownExtensions
  Imports NDBEDP.GridViewExtensions
  Imports System.IO
  Imports System.Web.Services
  Imports System.Web.Script.Services
  Imports System.Web.Script.Serialization
  
  Public Class Request
      Inherits System.Web.UI.Page
  
      &lt;WebMethod()&gt; _
      Public Shared Function loadStates(entity As Integer) As Dictionary(Of String, Integer)
          Dim expenseStates As DataSet = (New RequestBus).getExpenseStates(entity)
          Dim returnStates As New Dictionary(Of String, Integer)
          For i As Integer = 0 To expenseStates.Tables(0).Rows.Count - 1
              returnStates.Add(expenseStates.Tables(0).Rows(i).Item("StateAbbr"), expenseStates.Tables(0).Rows(i).Item("StateID"))
          Next
          Return returnStates
      End Function
  End Class
  </code></pre>
  
  <p>Let me know if you need to see any other code to help. </p>
  
  <p>I have tried doing this through WebServices, but couldn't get that to work either. As soon as I included a WebService and hooked it up properly, before adding any of my own code, I got: JavaScript critical error at line 3, column 1 web service script1002 syntax error. I would prefer to do this in a WebService, but I'm open to anything that I can get to work. </p>
  
  <p>Does anyone know what I'm doing wrong here? </p>
  
  <p>Edit: Changed to match current code</p>