JavaScript runtime error: Object doesn't support property or method 'replace' in jquery-ui.js

Question

I have below methods in my Controller

[HttpPost]
public ActionResult GetEventsForMonth(int month, int year)
{
    var events = new ListWithDuplicates();
    Dictionary<string, string> eventsnew = new Dictionary<string, string>();
    var ndates = (from nd in MCBDM.News where nd.nsdate.Month==month && nd.nsdate.Year==year select nd.nsdate).ToList();
    var nevents = (from ne in MCBDM.News where ne.nsdate.Month==month && ne.nsdate.Year==year select ne.nbrief).ToList();
    for (int i = 0; i < ndates.Count;i++ )
    {
        events.Add(ndates[i].Day.ToString(), nevents[i].ToString());
        eventsnew.Add(ndates[i].Day.ToString(), nevents[i].ToString());
    }

    Thread.Sleep(1000);
    return Json(events);
  }

public class ListWithDuplicates : List<KeyValuePair<string, string>>
{
    public void Add(string key, string value)
    {
        var element = new KeyValuePair<string, string>(key, value);
        this.Add(element);
    }
}

I have below code in my _calendar.cshtml file

<div id="datepicker">

</div>

<div class="row modal-line pad-left20 error-text" id="cal_error">

</div>

<script type="text/javascript">

    $(function () {
        $("#datepicker").datepicker({
            beforeShowDay: function (date) {
                var day = date.getDate();
                if (day in calendarEvents) {
                    if (calendarEvents[day] == undefined) {

                        return [true, 'isActive'];
                    }
                    return [true, 'isActive', calendarEvents[day]];
                }
                return [false, ''];
            },
            onChangeMonthYear: function (year, month, inst) {
                getEvents(month, year);
            }
        });
        var calendarDate = $("#datepicker").datepicker("getDate");
        getEvents(calendarDate.getMonth() + 1, calendarDate.getFullYear());
    });


</script>

and this in a separate js file

var calendarEvents = {};
function getEvents(month,year)
{
    $.ajax({
        url: "Home/GetEventsForMonth",
        type:"Post",
        data: JSON.stringify({ month: month, year: year }),
        dataType: 'json',
        processdata: false,
        contentType: 'application/json; charset=utf-8',
        success: function (data) { 
            calendarEvents = data; },
        error: function (xhr, ajaxOptions, thrownError) { 
            $("#cal_error").text("Something Went wrong!! Please try after sometime!!");
        },
        complete: function (x, y) { 
            $("#datepicker").datepicker("refresh"); }

    });
}

The problem I am facing is - whenever I pass events, which is of type ListWithDuplicates, I will get javascript error saying JavaScript runtime error: Object doesn't support property or method 'replace' in jquery-ui.js but if I Pass eventsnew through JSON method from controller, I won't get any error and calendar will be displayed properly. Can anyone please tell what's wrong with the type I use. I have attached a screenshot of watch which has both events and eventsnew contents and both will have same type of format and contents. But still javascript error shows up when events is returned.!

Answer 1

I just added below code to my ajax success method and that worked like a charm.. :)

The problem was eventsnew was returning an object and events was returning array of object as result. I just started retrieving array of objects and stored it as object..

  success: function (data) {
            $.each(data, function (index) {
                var obj = data[index];
                calendarEvents[obj.Key] = obj.Value;
            });
    },