it is clear that I am one of many with this issue, I've been googling for the past hour or so but I cannot seem to fix my issue.
I am trying to fetch data from my controller using AJAX to put into the jQuery FullCalendar, now that I am fairly confident about my controller, I still get an error saying:
unexpected token U in json at position 0
so there has to be something wrong.
here's the script I use to get data from my database in my Controller:
[HttpPost, ActionName("List")]
[WebMethod(EnableSession = true)]
public ActionResult List()
{
temphrmEntities db = new temphrmEntities();
List<medewerker_melding> eventList = db.medewerker_melding.ToList();
// Select events and return datetime as sortable XML Schema style.
var events = from ev in eventList
select new
{
id = ev.ID,
title = ev.medewerker.voorvoegsel + ". " + ev.medewerker.achternaam,
desc = ev.Omschrijving,
start = ev.datum_van.ToString(),
end = ev.datum_tot.ToString(),
user = ev.medewerkerID,
melding = ev.meldingID
};
// Serialize to JSON string.
JavaScriptSerializer jss = new JavaScriptSerializer();
String json = jss.Serialize(events);
Debug.WriteLine("Json:"+json);
return Json(json, JsonRequestBehavior.AllowGet);
}
This is the Json format that it returns:
[
{
"id":1,
"title":"K. Keesen",
"desc":"zelf ziek gemeld",
"start":"2-2-2018 13:00:00",
"end":"5-2-2018 13:00:00",
"user":15,
"melding":1
},
{
"id":3,
"title":"K. Keesen",
"desc":null,
"start":"2-2-2018 13:00:00",
"end":"5-2-2019 13:00:00",
"user":15,
"melding":1
},
{
"id":5,
"title":"K. Keesen",
"desc":null,
"start":"14-2-2018 08:30:00",
"end":"",
"user":15,
"melding":1
},
{
"id":6,
"title":"K. Keesen",
"desc":"srgsrgrgdrgdrgd",
"start":"7-2-2018 08:30:00",
"end":"",
"user":38,
"melding":13
},
{
"id":7,
"title":"T. test",
"desc":null,
"start":"14-2-2018 08:30:00",
"end":"21-2-2018 17:00:00",
"user":63,
"melding":10
},
{
"id":8,
"title":"K. Keesen",
"desc":null,
"start":"16-2-2018 08:30:00",
"end":"23-2-2018 17:00:00",
"user":28,
"melding":14
},
{
"id":9,
"title":"K. Keesen",
"desc":null,
"start":"14-2-2018 08:30:00",
"end":"",
"user":33,
"melding":12
},
{
"id":10,
"title":"K. Keesen",
"desc":"fvghbj",
"start":"22-2-2018 08:30:00",
"end":"",
"user":15,
"melding":11
},
{
"id":11,
"title":"K. Keesen",
"desc":null,
"start":"15-2-2018 08:30:00",
"end":"22-2-2018 17:00:00",
"user":15,
"melding":1
},
{
"id":12,
"title":"K. Keesen",
"desc":null,
"start":"23-2-2018 08:30:00",
"end":"",
"user":15,
"melding":1
},
{
"id":13,
"title":"K. Keesen",
"desc":"Test take #25",
"start":"7-2-2018 08:30:00",
"end":"23-2-2018 17:00:00",
"user":15,
"melding":1
},
{
"id":14,
"title":"K. Keesen",
"desc":null,
"start":"8-2-2018 08:30:00",
"end":"",
"user":15,
"melding":1
}
]
I checked if it was valid using Json Formatter & Validation
and finally my function with ajax: (I'm not very good at ajax so copy pasted it)
function GenerateCalendar() {
$("#calendar").fullCalendar({
theme: true,
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
defaultView: 'month',
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true,
events: function (start, end, callback) {
$.ajax({
type: "POST", //WebMethods will not allow GET
url: '@Url.Action("List/medewerker_melding")', //url of a webmethod - example below
//data: "", //this is what I use to pass who's calendar it is
//completely take out 'data:' line if you don't want to pass to webmethod - Important to also change webmethod to not accept any parameters
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (doc) {
var events = []; //javascript event object created here
var obj = $.parseJSON(doc.d); //.net returns json wrapped in "d"
$(obj.event).each(function () { //yours is obj.calevent
events.push({
title: $(this).attr('title'), //your calevent object has identical parameters 'title', 'start', ect, so this will work
start: $(this).attr('start'), // will be parsed into DateTime object
end: $(this).attr('end')
});
});
callback(events);
}
});
},
select: function (start, end) {
var start = moment(start).format();
var end = moment(end).format();
$('#startDate').val(start);
$('#endDate').val(end);
$('#eventModal').modal();
if ($('#eventModal')) {
$(".meldingForm").submit(function () {
//insertEvents();
});
$('#calendar').fullCalendar('renderEvent', events, true);
}
$('#calendar').fullCalendar('unselect');
},
});
}
Thanks!