Jquery Uncaught TypeError: Object #<Object> has no method 'split'

Question

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: &nbsp;
                <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;
    }
}

the param to callback is an object not a string so you do not have the split method in it. Can you share the response format — Arun P Johny
– Arun P Johny, Commented Sep 16, 2013 at 10:02

iConnor · Accepted Answer · 2013-09-16 10:03:18Z

3

You are saying the dataType is JSON so that means the response will be an object not a string, you can only use split() on a string.

answered Sep 16, 2013 at 10:03

iConnor

20.2k14 gold badges66 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul · Accepted Answer · 2013-09-16 10:20:24Z

1

The response string you are generating is not a JSON text, it is just a ; delimited string, so remove the dataType: "json", from your AJAX request.

It will work then, because msg will be the response text as a string (and split is defined on strings).

answered Sep 16, 2013 at 10:20

Paul

142k28 gold badges285 silver badges272 bronze badges

Collectives™ on Stack Overflow

Jquery Uncaught TypeError: Object #<Object> has no method 'split'

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related