Object obect error on jquery ajax request on dropdown change?

Question

I'm using jquery ajax on dropdown change function.The problem is that even before hitting the url mentioned in the ajax request I'm getting Object object error .

The ajax request is as follows

 $("#locationList").change(function () {
             var locationNo = document.getElementById('<%=locationList.ClientID%>').value;
             $.ajax({
                 url: "HealthReport.aspx/GetCashsafes",
                 data: "{ 'Location': '" + locationNo + "'}",
                 type: "POST",
                 dataType: "json",
                 contentType: "application/json; charset=utf-8",
                 success: function (data) {
                     alert("Success");
                     response($.each(data.d, function (key, value) {                        
                     $("#CashSafeList").append($("<option></option>").val(value.CashsafeId).html(value.CashsafeDisplaySerialNo));
                     }));
                 },
                 error: function (result) {
                     alert(result);
                     $("#CashSafeList").append($("<option></option>").val("-1").html("Select one"));
                 }
             });
         });

The server side code is as follows

 [WebMethod]       
    public static string GetCashsafes(string Location)
    {
        Decimal userId = (Decimal)AMSECSessionData.userId;
        List<Cashsafe> lstCashSafe = DropDown.getCashSafeListLocationwise(userId, Convert.ToDecimal(Location));
        List<CashSafeSelect> lstCashSafeSelect = new List<CashSafeSelect>();
        lstCashSafeSelect = lstCashSafe.Select(item => new CashSafeSelect()
        {
            CashsafeId=(decimal)item.CashsafeId,
            CashsafeSerialNo=item.CashsafeSerialNo.ToString()

        }).Distinct().ToList();
        System.Web.Script.Serialization.JavaScriptSerializer jSearializer =
              new System.Web.Script.Serialization.JavaScriptSerializer();
        string sjson=jSearializer.Serialize(lstCashSafeSelect);
        return sjson;     
    }

I've checked the string sjson and the data is returning correctly in json format.

Since the error is showing even before the url is hit,i'm confused on how to proceed further.

Any help will be appreciated.

Answer 1

Change the data like this

data: JSON.stringify({ 'Location':  locationNo }),

Then your code will look like

$("#locationList").change(function () {
         var locationNo = document.getElementById('<%=locationList.ClientID%>').value;
         $.ajax({
             url: "HealthReport.aspx/GetCashsafes",
             data: JSON.stringify({ 'Location':  locationNo }),
             type: "POST",
             dataType: "json",
             contentType: "application/json; charset=utf-8",
             success: function (data) {
                 alert("Success");
                 response($.each(data.d, function (key, value) {                        
                 $("#CashSafeList").append($("<option></option>").val(value.CashsafeId).html(value.CashsafeDisplaySerialNo));
                 }));
             },
             error: function (result) {
                 alert(result);
                 $("#CashSafeList").append($("<option></option>").val("-1").html("Select one"));
             }
         });
     });

Edit

Since your dataType is json, you should return json , not string . Change your server side code like this,

[WebMethod]       
public static List<CashSafeSelect> GetCashsafes(string Location)
{
    Decimal userId = (Decimal)AMSECSessionData.userId;
    List<Cashsafe> lstCashSafe = DropDown.getCashSafeListLocationwise(userId, Convert.ToDecimal(Location));
    List<CashSafeSelect> lstCashSafeSelect = new List<CashSafeSelect>();
    lstCashSafeSelect = lstCashSafe.Select(item => new CashSafeSelect()
    {
        CashsafeId=(decimal)item.CashsafeId,
        CashsafeSerialNo=item.CashsafeSerialNo.ToString()

    }).Distinct().ToList();

    return lstCashSafeSelect;     
}

You dont have to serialize those lists

Answer 2

Issue solved,Thanks to every one who replied especially @Anoop.

Issue was that I've set Autopostback=true for the dropdown where the ajax call is made.I've removed the autopostback property of the dropdown and now the code is working fine.

I wonder how a fresh day,clear mind helps to solve the issues.