When I try to run this page, by clicking on the dropdown, the change event is sending an AJAX request, but it is shows an error: "Uncaught TypeError: Object # has no method 'split'". Why is it displaying that split 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 handles 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;
}
}