admin管理员组文章数量:1026989
I am using fullCalendar 5.5.1 to display some events on screen. I fetch the data from the database and it is working as expected. The only issue I have is that in some situations I receive an error:
Uncaught (in promise) TypeError: successCallback(...) is undefined
It happens if the response from the database is empty but it also happens after fullCalendar parses all the data returned from the database (like it is not stopping after managing all the records).
To avoid the first to happen I put a check on the response length so that if it is 0 it stops parsing and it works fine but I don't know how to avoid the other situation.
A sample of my data is (printed from console)
0: Object { title: "Evento di test 1 - 7 hours", start: "2024-06-01T22:00:00.000Z", duration: 7 }
1: Object { title: "Evento di test 2 - 3 hours", start: "2024-06-01T22:00:00.000Z", duration: 3 }
2: Object { title: "Evento di test 3 - 3 hours", start: "2024-06-06T22:00:00.000Z", duration: 3 }
3: Object { title: "Evento di test 4 - 7 hours", start: "2024-06-09T22:00:00.000Z", duration: 7 }
4: Object { title: "Evento di test 5 - 4 hours", start: "2024-06-20T22:00:00.000Z", duration: 4 }
5: Object { title: "Evento di test 6 - 6 hours", start: "2024-06-22T22:00:00.000Z", duration: 6 }
6: Object { title: "Evento di test 7 - 3 hours", start: "2024-06-28T22:00:00.000Z", duration: 3 }
While the code I am using is:
var calendar = new Calendar(calendarEl, {
timeZone: 'local',
customButtons: {
newEvent: {
text: 'New record',
click: function () {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
right: 'prev,next today',
left: 'title',
center: 'newEvent',
//right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
themeSystem: 'bootstrap',
defaultAllDay: true,
events: function (info, successCallback, failureCallback) {
let user = sessione.profilo.id;
let project = sessione.progettoAttivo.id;
//let start = info.start.valueOf();
//let end = info.end.valueOf();
let start = info.startStr;
let end = info.endStr;
smartAxios.get("/timesheet?user=" + user + "&project=" + project + "&start=" + start + "&end=" + end)
.then((response) => {
console.log(response.data);
let prevDate = '';
let totDuration = 0;
if(response.data.length==0){
console.log('no data for this month');
}else{
successCallback(
response.data.map(function (eventEl) {
console.log(eventEl);
return {
title: eventEl.title,
start: eventEl.start,
color: '#007bff',
textColor: 'white',
allDay: true
}
}),
response.data.forEach(function (element) {
let date = new Date(element.start);
let year = date.getFullYear();
let month = ((date.getMonth()+1).toString().length < 2) ? "0"+(date.getMonth()+1) : (date.getMonth()+1);
//let month = date.getMonth()+1;
let day = ((date.getDate()).toString().length < 2) ? "0"+(date.getDate()) : (date.getDate());
//let day = date.getDate();
date= year+'-'+month+'-'+day;
if (date == prevDate) {
totDuration = totDuration + element.duration;
} else {
prevDate = date;
totDuration = element.duration;
}
if (totDuration > 8) {
$('#calendar').find('.fc-day[data-date="' + date + '"]').css('background-color', '#FAA732');
}
console.log(prevDate, totDuration);
})
)
.catch(function(err){
console.log(err)
$(document).Toasts('create', { autohide: true, delay: 750, title: 'Timesheet',class: 'bg-danger', body:'Error trying to retrieve data'})
});
}
});
}
});
I am using fullCalendar 5.5.1 to display some events on screen. I fetch the data from the database and it is working as expected. The only issue I have is that in some situations I receive an error:
Uncaught (in promise) TypeError: successCallback(...) is undefined
It happens if the response from the database is empty but it also happens after fullCalendar parses all the data returned from the database (like it is not stopping after managing all the records).
To avoid the first to happen I put a check on the response length so that if it is 0 it stops parsing and it works fine but I don't know how to avoid the other situation.
A sample of my data is (printed from console)
0: Object { title: "Evento di test 1 - 7 hours", start: "2024-06-01T22:00:00.000Z", duration: 7 }
1: Object { title: "Evento di test 2 - 3 hours", start: "2024-06-01T22:00:00.000Z", duration: 3 }
2: Object { title: "Evento di test 3 - 3 hours", start: "2024-06-06T22:00:00.000Z", duration: 3 }
3: Object { title: "Evento di test 4 - 7 hours", start: "2024-06-09T22:00:00.000Z", duration: 7 }
4: Object { title: "Evento di test 5 - 4 hours", start: "2024-06-20T22:00:00.000Z", duration: 4 }
5: Object { title: "Evento di test 6 - 6 hours", start: "2024-06-22T22:00:00.000Z", duration: 6 }
6: Object { title: "Evento di test 7 - 3 hours", start: "2024-06-28T22:00:00.000Z", duration: 3 }
While the code I am using is:
var calendar = new Calendar(calendarEl, {
timeZone: 'local',
customButtons: {
newEvent: {
text: 'New record',
click: function () {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
right: 'prev,next today',
left: 'title',
center: 'newEvent',
//right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
themeSystem: 'bootstrap',
defaultAllDay: true,
events: function (info, successCallback, failureCallback) {
let user = sessione.profilo.id;
let project = sessione.progettoAttivo.id;
//let start = info.start.valueOf();
//let end = info.end.valueOf();
let start = info.startStr;
let end = info.endStr;
smartAxios.get("/timesheet?user=" + user + "&project=" + project + "&start=" + start + "&end=" + end)
.then((response) => {
console.log(response.data);
let prevDate = '';
let totDuration = 0;
if(response.data.length==0){
console.log('no data for this month');
}else{
successCallback(
response.data.map(function (eventEl) {
console.log(eventEl);
return {
title: eventEl.title,
start: eventEl.start,
color: '#007bff',
textColor: 'white',
allDay: true
}
}),
response.data.forEach(function (element) {
let date = new Date(element.start);
let year = date.getFullYear();
let month = ((date.getMonth()+1).toString().length < 2) ? "0"+(date.getMonth()+1) : (date.getMonth()+1);
//let month = date.getMonth()+1;
let day = ((date.getDate()).toString().length < 2) ? "0"+(date.getDate()) : (date.getDate());
//let day = date.getDate();
date= year+'-'+month+'-'+day;
if (date == prevDate) {
totDuration = totDuration + element.duration;
} else {
prevDate = date;
totDuration = element.duration;
}
if (totDuration > 8) {
$('#calendar').find('.fc-day[data-date="' + date + '"]').css('background-color', '#FAA732');
}
console.log(prevDate, totDuration);
})
)
.catch(function(err){
console.log(err)
$(document).Toasts('create', { autohide: true, delay: 750, title: 'Timesheet',class: 'bg-danger', body:'Error trying to retrieve data'})
});
}
});
}
});
1 Answer
Reset to default 0First let's see the error:
TypeError: successCallback(...) is undefined
the error means that you are trying to call (call as function) a variable that is actually undefined
now let's see the source of the variable: function (info, successCallback, failureCallback)
it is from a parameter, we don't have control over how it is passed, so maybe it is not passed as undefined in some cases
now to the solution:
you can do this to call it only when it exists: successCallback?.()
I am using fullCalendar 5.5.1 to display some events on screen. I fetch the data from the database and it is working as expected. The only issue I have is that in some situations I receive an error:
Uncaught (in promise) TypeError: successCallback(...) is undefined
It happens if the response from the database is empty but it also happens after fullCalendar parses all the data returned from the database (like it is not stopping after managing all the records).
To avoid the first to happen I put a check on the response length so that if it is 0 it stops parsing and it works fine but I don't know how to avoid the other situation.
A sample of my data is (printed from console)
0: Object { title: "Evento di test 1 - 7 hours", start: "2024-06-01T22:00:00.000Z", duration: 7 }
1: Object { title: "Evento di test 2 - 3 hours", start: "2024-06-01T22:00:00.000Z", duration: 3 }
2: Object { title: "Evento di test 3 - 3 hours", start: "2024-06-06T22:00:00.000Z", duration: 3 }
3: Object { title: "Evento di test 4 - 7 hours", start: "2024-06-09T22:00:00.000Z", duration: 7 }
4: Object { title: "Evento di test 5 - 4 hours", start: "2024-06-20T22:00:00.000Z", duration: 4 }
5: Object { title: "Evento di test 6 - 6 hours", start: "2024-06-22T22:00:00.000Z", duration: 6 }
6: Object { title: "Evento di test 7 - 3 hours", start: "2024-06-28T22:00:00.000Z", duration: 3 }
While the code I am using is:
var calendar = new Calendar(calendarEl, {
timeZone: 'local',
customButtons: {
newEvent: {
text: 'New record',
click: function () {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
right: 'prev,next today',
left: 'title',
center: 'newEvent',
//right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
themeSystem: 'bootstrap',
defaultAllDay: true,
events: function (info, successCallback, failureCallback) {
let user = sessione.profilo.id;
let project = sessione.progettoAttivo.id;
//let start = info.start.valueOf();
//let end = info.end.valueOf();
let start = info.startStr;
let end = info.endStr;
smartAxios.get("/timesheet?user=" + user + "&project=" + project + "&start=" + start + "&end=" + end)
.then((response) => {
console.log(response.data);
let prevDate = '';
let totDuration = 0;
if(response.data.length==0){
console.log('no data for this month');
}else{
successCallback(
response.data.map(function (eventEl) {
console.log(eventEl);
return {
title: eventEl.title,
start: eventEl.start,
color: '#007bff',
textColor: 'white',
allDay: true
}
}),
response.data.forEach(function (element) {
let date = new Date(element.start);
let year = date.getFullYear();
let month = ((date.getMonth()+1).toString().length < 2) ? "0"+(date.getMonth()+1) : (date.getMonth()+1);
//let month = date.getMonth()+1;
let day = ((date.getDate()).toString().length < 2) ? "0"+(date.getDate()) : (date.getDate());
//let day = date.getDate();
date= year+'-'+month+'-'+day;
if (date == prevDate) {
totDuration = totDuration + element.duration;
} else {
prevDate = date;
totDuration = element.duration;
}
if (totDuration > 8) {
$('#calendar').find('.fc-day[data-date="' + date + '"]').css('background-color', '#FAA732');
}
console.log(prevDate, totDuration);
})
)
.catch(function(err){
console.log(err)
$(document).Toasts('create', { autohide: true, delay: 750, title: 'Timesheet',class: 'bg-danger', body:'Error trying to retrieve data'})
});
}
});
}
});
I am using fullCalendar 5.5.1 to display some events on screen. I fetch the data from the database and it is working as expected. The only issue I have is that in some situations I receive an error:
Uncaught (in promise) TypeError: successCallback(...) is undefined
It happens if the response from the database is empty but it also happens after fullCalendar parses all the data returned from the database (like it is not stopping after managing all the records).
To avoid the first to happen I put a check on the response length so that if it is 0 it stops parsing and it works fine but I don't know how to avoid the other situation.
A sample of my data is (printed from console)
0: Object { title: "Evento di test 1 - 7 hours", start: "2024-06-01T22:00:00.000Z", duration: 7 }
1: Object { title: "Evento di test 2 - 3 hours", start: "2024-06-01T22:00:00.000Z", duration: 3 }
2: Object { title: "Evento di test 3 - 3 hours", start: "2024-06-06T22:00:00.000Z", duration: 3 }
3: Object { title: "Evento di test 4 - 7 hours", start: "2024-06-09T22:00:00.000Z", duration: 7 }
4: Object { title: "Evento di test 5 - 4 hours", start: "2024-06-20T22:00:00.000Z", duration: 4 }
5: Object { title: "Evento di test 6 - 6 hours", start: "2024-06-22T22:00:00.000Z", duration: 6 }
6: Object { title: "Evento di test 7 - 3 hours", start: "2024-06-28T22:00:00.000Z", duration: 3 }
While the code I am using is:
var calendar = new Calendar(calendarEl, {
timeZone: 'local',
customButtons: {
newEvent: {
text: 'New record',
click: function () {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
right: 'prev,next today',
left: 'title',
center: 'newEvent',
//right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
themeSystem: 'bootstrap',
defaultAllDay: true,
events: function (info, successCallback, failureCallback) {
let user = sessione.profilo.id;
let project = sessione.progettoAttivo.id;
//let start = info.start.valueOf();
//let end = info.end.valueOf();
let start = info.startStr;
let end = info.endStr;
smartAxios.get("/timesheet?user=" + user + "&project=" + project + "&start=" + start + "&end=" + end)
.then((response) => {
console.log(response.data);
let prevDate = '';
let totDuration = 0;
if(response.data.length==0){
console.log('no data for this month');
}else{
successCallback(
response.data.map(function (eventEl) {
console.log(eventEl);
return {
title: eventEl.title,
start: eventEl.start,
color: '#007bff',
textColor: 'white',
allDay: true
}
}),
response.data.forEach(function (element) {
let date = new Date(element.start);
let year = date.getFullYear();
let month = ((date.getMonth()+1).toString().length < 2) ? "0"+(date.getMonth()+1) : (date.getMonth()+1);
//let month = date.getMonth()+1;
let day = ((date.getDate()).toString().length < 2) ? "0"+(date.getDate()) : (date.getDate());
//let day = date.getDate();
date= year+'-'+month+'-'+day;
if (date == prevDate) {
totDuration = totDuration + element.duration;
} else {
prevDate = date;
totDuration = element.duration;
}
if (totDuration > 8) {
$('#calendar').find('.fc-day[data-date="' + date + '"]').css('background-color', '#FAA732');
}
console.log(prevDate, totDuration);
})
)
.catch(function(err){
console.log(err)
$(document).Toasts('create', { autohide: true, delay: 750, title: 'Timesheet',class: 'bg-danger', body:'Error trying to retrieve data'})
});
}
});
}
});
-
You say
in some situations I receive an error...but then the two cases you mention are 1) when no results are returned, and 2) when results are returned. This sounds like all situations (aside from the axios request failing entirely of course). Are there some other scenarios where it doesn't happen? It's hard to imagine what they would be. So are you really saying you always get this error? The way you describe the problem is a little bit confusing. – ADyson Commented Nov 19, 2024 at 10:47 -
if I'm not mistake your
.catch(function(err){is in the wrong place as well. It looks like it's attached to thesuccessCallbackfunction call, but that doesn't return a Promise. Surely it's supposed to be attached to thesmartAxios.getcall? – ADyson Commented Nov 19, 2024 at 11:15
1 Answer
Reset to default 0First let's see the error:
TypeError: successCallback(...) is undefined
the error means that you are trying to call (call as function) a variable that is actually undefined
now let's see the source of the variable: function (info, successCallback, failureCallback)
it is from a parameter, we don't have control over how it is passed, so maybe it is not passed as undefined in some cases
now to the solution:
you can do this to call it only when it exists: successCallback?.()
本文标签：
版权声明：本文标题：javascript - fullCalendar is throwing undefined error on successCallback after correctly parsing the response from the backend - 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745657267a2161672.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
in some situations I receive an error...but then the two cases you mention are 1) when no results are returned, and 2) when results are returned. This sounds like all situations (aside from the axios request failing entirely of course). Are there some other scenarios where it doesn't happen? It's hard to imagine what they would be. So are you really saying you always get this error? The way you describe the problem is a little bit confusing. – ADyson Commented Nov 19, 2024 at 10:47.catch(function(err){is in the wrong place as well. It looks like it's attached to thesuccessCallbackfunction call, but that doesn't return a Promise. Surely it's supposed to be attached to thesmartAxios.getcall? – ADyson Commented Nov 19, 2024 at 11:15