Develop Reference

Cannot read property 'event' of undefined FullCalandar.js

https://jsfiddle.net/studovey/jvrwfzea/21/
Im getting the following error in FullCalendar.js every time I select Day view I get this error. There is an event on the below date so it throws the error.
I thought that it could be something to do with the formatting perhaps. I have looked online for solution but to no avail.
Can anyone share any throughts?
My code is the following:
function GetAppointments() {
var initialLocaleCode = 'en';
$('#calender').fullCalendar('destroy');
$('#calendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day'
},
footer: true,
selectable: true,
height: 650,
events: function (start, end, timezone, callback) {
$.ajax({
type: "GET",
contentType: "application/json",
url: '#Url.Action("GetAppointmentData", "Admin")',
dataType: "JSON",
selectable: true,
locale: 'en',
titleFormat: "YYYY-MM-DD HH:mm:ss",
success: function (data) {
var events = [];
$.each(data, function (i, data) {
var start = data.start;
var end = data.end;
events.push({
eventID: data.Id,
title: data.title,
description: data.description,
start: start,
end: end,
backgroundColor: data.type.TypeColour,
textColor: 'white',
borderColor: 'white',
allDay: false,
});
});
callback(events);
}
})
},
nextDayThreshold: '00:00:00',
editable: true,
droppale: true,
nowIndicator: true,
eventClick: function (info) {
GetEventDetailByEventId(info);
}
});
$(".fc-day-header").addClass("bg-success");
$(".fc-day-header").css("color", "white");
$(".fc-button, .fc-agendaWeek-button, .fc-state-hover").addClass("bg-success");
}
// Grab individual elements from the combined HTML string. Use each as the default rendering.
// Then, compute the 'el' for each segment. An el might be null if the eventRender callback returned false.
$(html).each(function (i, node) {
var seg = segs[i];
var el = view.resolveEventEl(seg.event, $(node));
if (el) {
el.data('fc-seg', seg); // used by handlers
seg.el = el;
renderedSegs.push(seg);
}
});
}
function GetEventDetailByEventId(eventinfo) {
$.ajax({
type: "POST",
url: '#Url.Action("GetAppointmentById", "Admin")',
dataType: "JSON",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
'id': eventinfo.id
}),
success: function (data) {
$('#appointmentHeader').removeClass('bg-success');
$('#appointmentHeader').addClass('bg-info');
$('#btnUpdate').removeClass('d-none');
$('#btnDelete').removeClass('d-none');
$('#btnAdd').addClass('d-none');
$('#headerText').html('Update Appointment');
$('#btnBackAdd').removeClass('d-none');
$('#txtTitle').val(data.Name);
$('#txtName').val(data.Info);
$('#txtStartDate').val(moment(data.StartTime).format("DD-MM-YYYY HH:mm"));
$('#txtEndDate').val(moment(data.EndTime).format("DD-MM-YYYY HH:mm"));
$('#hdnAppointmentId').val(data.Id);
$('#drptype').val(data.type.Id);
}
})
}

Did you check whether you are getting the expected values for data.StartTime and data.EndTime that you are passing into the function? The error event of undefined might be coming from moment. I faced that once.

Jquery Datatables get row data as string or object on button click

I'm attempting to get a row of data based on button click event. I can manage to find the row and read the results as text, but I want the data cast as a string or an object. Below is my current code:
$.ajax({
url: "SympsService.asmx/GetSymptoms",
method: "post",
dataType: "json",
data: JSON.stringify({
organ_name: "toes"
}),
contentType: "application/json",
success: function(data) {
var sympList = 'GetSymptoms' ? JSON.parse(data.d) : data.d;
createDataTable('#symptomsTable', sympList);
function createDataTable(target, data) {
$(target).DataTable({
destroy: true,
paging: false,
searching: false,
info: false,
data: data,
columnDefs: [{
targets: [-1],
render: function() {
return "<button type='button'>" + ('Choose') + "</button>"
}
}],
columns: [{
'data': 'Sympt',
'title': 'toes Symptoms'
}, {
'data': null,
'title': 'Action'
}]
});
}
$('#symptomsTable').on("click", "tbody button", function() {
var id = $(this).closest("tr").find("td:nth-child(1)").text(); //this show perfectly
var id = $(this).closest("tr").find("td:nth-child(1)").data(); //this show undefined
var id = $(this).closest("tr").find("td:nth-child(1)").toString(); //this show {object Object}
console.log(id);
})
},
});
Any kind of help is appreciated.

To find the data object for the whole row:
$("#symptomsTable').DataTable().rows($(this).closest("tr")).data()
to find it for the particular cell:
$("#symptomsTable").DataTable().cells($(this).closest("td").siblings().eq(0)).data()

How do I Multiselect Items Sortable Drag and Drop in a list?

At the moment I was able to drag and drop by selecting only one item from the list but now I have a requirement to multiselect items form list for dragging and dropping in the same list. I'm using below code, can anyone please help me for multiselect drag and drop.
<script>
document.observe('dom:loaded', function() {
Sortable.create('sortlist', {
tag: 'li',
only: 'sorting',
hoverclass: 'over',
overlap: 'horizontal',
ghosting: false,
constraint: false,
scroll: window,
scrollSensitivity: 30,
scrollSpeed: 25
})
var $isInIFrame = (window.location !== window.parent.location);
var $window = $isInIFrame ? parent : self;
var $buttonSave = $$('button.button-save-sortable')[0];
var $buttonOpenNewWindow = $$('button.button-open-new-window')[0];
$buttonSave.onclick = function() {
new Ajax.Request("<?php echo $this->getSaveUrl(); ?>", {
method: "post",
evalScripts: true,
onLoading: function() {
$window.$('loading-mask').show()
},
onSuccess: function(transport) {
$window.$('loading-mask').hide()
},
onComplete: function(transport) {
eval(transport.responseText)
},
parameters: {
data: Sortable.serialize('sortlist'),
iframe: $isInIFrame,
form_key: '<?php echo $this->getFormKey(); ?>'
}
})
}
})
</script>

Why title is not showed after second click in FancyBox?

There are a some video links on the page for playing video by click:
<div class="play" id="27" data-width="850" data-height="470" data-fancybox-href="https://www.youtube.com/embed/zqO7epdsSic"></div>
When I click on link then callback beforeLoad: function () {} calls function getVideo(){} that return title in global variable. In callback this title is appointed by the current window FancyBox.
So, sometimes this title is not displayed. How I can improve this code and fix?
Code JS:
$(".play").fancybox({
type: 'iframe',
maxWidth: "90%",
padding: 0,
autoCenter: false,
scrolling: 'no',
fitToView: false,
beforeLoad: function () {
var id = $(this.element).attr("id");
var info = '?theme=dark&color=white&autohide=1&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&origin=http://whoismed.com&showinfo=0&autoplay=1';
this.href = this.href + info;
getVideo(id, this, function (response, th) {
th.title = th.title + response.template;
th.width = $(th.element).data("width");
th.height = $(th.element).data("height");
});
},
afterLoad: function () {
//changeURL(_videoInfo.info.VideoCode+'#'+_videoInfo.info.idVideo, _videoInfo.info.VideoName, _videoInfo.info);
},
helpers: {
overlay: {
locked: false
},
title: {
type: 'inside' // to append the html
}
}
});
Function GetVideo();
function getVideo(id, th, callback) {
var th = th;
$.ajax({
type: "POST",
dataType: "json",
data: {id: id},
url: '/comments/GetHash',
success: function (result) {
info = result.info[0];
hash = result.hash;
_videoInfo.info = info;
_videoInfo.template = parseTpl(userInfoVideo, {
'name': info.DetailToUsersName,
'id_user': info.idDetailToUsers,
'time': info.VideoTime,
'desc': info.VideoDescription,
'id': info.idVideo,
'title': info.VideoName,
'category': info.SpecializationName,
'category_id': info.idSpec,
'likes': result.statistic,
'form': result.formComment,
'comments': result.comments,
'user_photo': (info.DetailToUsersPhoto == null) ? '/public/images/notphoto.png' : '/' + info.DetailToUsersPhoto
});
callback(_videoInfo, th);
}
});
}

Why Can't Data from Kendo DataSource's Observable Object Be Logged to Console?

I'm trying to read from a remote service. When I use the .read() method, I can see the AJAX response on my browser's Network tab, but I don't understand why I can't log the the server's response to my browser's console.
Here's my code:
var accountsListDs = new kendo.data.DataSource({
transport: {
read: function() {
$.ajax({
url: "http://localhost:8085/cabinet/wicket/bookmarkable/com.office.web.services.AccountsService",
dataType: "json",
type: "POST",
cache: false,
data: {
op: "list"
},
success: function(){
console.log("DataSource Read Success");
},
error: function(){
console.log("DataSource Read Failed");
}
});
},
schema: {
data: function(response) {
return response;
}
}
},
requestEnd: function(e) {
var response = e.response;
console.log(response);
}
});
I manually ran accountsListDs.read() from my browser's console. I get a perfect response from the server. When I tried to do accountsListDs.data(), it returns an empty array. I suppose, it makes an async call, so .data() won't immediately work, I even tried to hook it up with requestEnd event (As described in Kendo's overly helpful documentation, but still no luck).
Even if I copy paste the code from Kendo's documentation, it does not work.
What am I missing here?
(Thanks in advance, CodingWithSpike)

You can, but you are not propagating the data received by the ajax request. You should invoke op.success with the received data:
var accountsListDs = new kendo.data.DataSource({
transport: {
read: function(op) {
$.ajax({
url: "http://localhost:8085/cabinet/wicket/bookmarkable/com.office.web.services.AccountsService",
dataType: "json",
type: "POST",
cache: false,
data: {
op: "list"
},
success: function(data){
console.log("DataSource Read Success");
op.success(data);
},
error: function(){
console.log("DataSource Read Failed");
}
});
},
schema: {
data: function(response) {
return response;
}
}
},
requestEnd: function(e) {
var response = e.response;
console.log(response);
}
});
The following code snippet shows a running version of the idea.
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: function (op) {
$.ajax({
url: "http://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp",
success: function(data){
console.log("DataSource Read Success");
op.success(data);
},
error: function(){
console.log("DataSource Read Failed");
}
});
}
},
requestEnd: function(e) {
var response = e.response;
console.log(response);
},
batch: true,
pageSize: 20,
schema: {
data: function(response) {
return response;
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120 }
],
});
});
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<div id="grid"></div>