When I try to launch this page by clicking on the drop-down list, the change event sends an AJAX request, but the error message appears: “Uncaught TypeError: Object # has no“ split ”method. Why does it show that separation is not a method?
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ajax - jQuery AJAX Powered Cascaded drop down list</title> <script type="text/javascript" src="JS/jquery-1.7.2.js"></script> <script type="text/javascript"> //When the socument is ready call the function OnReady $(document).ready(OnReady); function OnReady() { //Handle the change event for the drop down list $("#drpContinent").change(onChange); } function onChange() { //create the ajax request $.ajax ( { type: "POST", //HTTP method url: "Default2.aspx/OnContinentChange", //page/method name data: "{'continentName':'"+$('#drpContinent').val() +"'}", //json to represent argument contentType: "application/json; charset=utf-8", dataType: "json", success: callback, error: onError } ); } //Handle the callback on success function callback(msg) { //handle the callback to handle response //request was successful. so Retrieve the values in the response. var countries = msg.split(';'); var length = countries.length; //Change the second dropdownlists items as per the new values foudn in response. //let us remove existing items document.getElementById('<%=drpCountry.ClientID %>').options.length = 0; //Now add the new items to the dropdown. var dropDown = document.getElementById('<%=drpCountry.ClientID %>'); for(var i = 0; i < length - 1; ++i) { var option = document.createElement("option"); option.text = countries[i]; option.value = countries[i]; dropDown.options.add(option); } } //Handle the callback on error function onError() { alert('something went wrong'); } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> Select Continent: <asp:DropDownList ID="drpContinent" runat="server"> </asp:DropDownList><br /> <br /> Select Country: <asp:DropDownList ID="drpCountry" runat="server"> </asp:DropDownList> </div> </form> </body> </html>
Here we have the OnContinentChange method that processes the AJAX request:
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class Default2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (IsPostBack == false) { //Let us populate the list of continents in the first drop down drpContinent.DataSource = DBHelper.GetContinentList(); drpContinent.DataTextField = "continentName"; drpContinent.DataValueField = "continentName"; drpContinent.DataBind(); //Set the second dropdown as the list of all countries of selected continent drpCountry.DataSource = DBHelper.GetCountriesList(drpContinent.SelectedValue); drpCountry.DataTextField = "countryName"; drpCountry.DataValueField = "countryName"; drpCountry.DataBind(); } } [System.Web.Services.WebMethod] public static string OnContinentChange(string continentName) { DataTable table = DBHelper.GetCountriesList(continentName.Trim()); string result = string.Empty; foreach (DataRow r in table.Rows) { result += r["countryName"].ToString() + ";"; } return result; } }
source share