Develop Reference

Add another event source FullCalendar?

I try to add another event source on my FullCalendar. First, I get all events from manual function that I create own and I render all events using renderEvent function. But, I got error when I try to add another event source. So, I want to add holidays feature. I create another event source to get holidays date. That event was success to showed in my FullCalendar. But there is weird thing.
Example : If I have range of my holiday date, such as start : 2019/02/26 - end : 2019/02/28. The event content length doesn't 26 until 28, but start from 26 until 27.
What it's wrong? This is my code for to get all events.
// Get Agenda Data
function getEvents(datas) {
$("input[name=unitAgenda]").attr("value",
$("select[name=unit]").val());
var reUnit = datas.replace("- ","");
$('.calendar').fullCalendar('removeEvents');
$('.calendar').fullCalendar('refetchEvents');
$.ajax({
url: 'agendakerja/kalender/get_events',
dataType: 'JSON',
data: { unit: reUnit },
success: function(data) {
$.each(data["events"], function (index, event) {
$('.calendar').fullCalendar('renderEvent', event, true);
});
}
});
//passing unit name to function
global = reUnit;
}
And this is my code for get holidays date.
eventSources: [
{ url: 'agendakerja/kalender/get_holidays' }
]
Please help me!

Always show autocomplete list, even if search doesn't match

I have an autocomplete field, and on type I go to the PHP/Database to retrieve the matching options.
Thing is, my suggestion list isn't exactly matches of the text. I explain:
Say I type "Jon". My list will bring from the database "John Doe", "Jonatan", etc. Only "Jonatan" will be visible as the suggestion to the input, but I do need them all, because it considers approximation (there's a soundex element on my backend search).
My JavaScript/Ajax code:
function prePatientsList(){
//I'm limiting search so it only starts on the second character
if (document.getElementById("name").value.length >= 2) {
try
{
listExecute.abort();
}catch(err) {
null;
}
var nome= $("#name").val();
var nomeList = "";
listExecute = $.ajax({
url: '/web/aconselhamento/Atendimento/PrePacientesAutocomplete',
type: "POST",
async: true,
datatype: 'json',
data: { nome: nome}
}).done(function(data){
source = JSON.parse(data);
});
$(function() {
$("input#nome").autocomplete({
source: source,
// I know I probably don't need this, but I have a similar component which has an URL as value, so when I select an option, it redirects me, and I'll apply you kind answer on both.
select: function( event, ui ) {
ui.item.label;
}
});
});
}
}
Thanks.

I think you'd have to set your remote endpoint directly as the autocomplete's source (e.g. similar to https://jqueryui.com/autocomplete/#remote) so that it's the backend which does all the filtering. Right now, the autocomplete effectively thinks you've fed it a static list of options from which further filtering should take place, and therefore it decides to handle the filtering itself.
Your code can be as simple as this I think, no need to have a separate handler or an ajax request outside the scope of the autocomplete.
$(function() {
$("input#nome").autocomplete({
minLength: 2, //limit to only firing when 2 characters or more are typed
source: function(request, response)
{
$.ajax({
url: '/web/aconselhamento/Atendimento/PrePacientesAutocomplete',
type: "POST",
dataType: 'json',
data: { nome: request.term } //request.term represents the value typed by the user, as detected by the autocomplete plugin
}).done(function(data){
response(data); //return the data to the autocomplete as the final list of suggestions
});
},
// I know I probably don't need this, but I have a similar component which has an URL as value, so when I select an option, it redirects me, and I'll apply you kind answer on both.
select: function( event, ui ) {
ui.item.label;
}
});
});
See http://api.jqueryui.com/autocomplete/#option-source for more info.

How to prevent event overlapping when updating existing events in Full Calendar?

I have used eventOverlap: false, and selectOverlap: false, to prevent the user from overlapping events. However, I am trying to prevent the user from overlapping existing events.
In my full calendar the user can click on an event, which opens a pop up dialog and allows the user to update the date/time of the selected event. However, the user is able choose a date/time where an event is already booked. Therefore, I want to have a validation on the Save button that checks if the updated date/time has an event or not before any changes are made. These two screen shots show this problem graphically.
1. Shows that event time is being updated. 2. Shows the event is overlapping after it has been updated
var events = []; //global array where all the events are stored
function FetchEventAndRenderCalendar() {
//fetch info from database and add it to the events array
events = [];
$.ajax({
type: "GET",
url: "/SessionScheduler/GetEvents",
success: function (data) {
$.each(data, function (i, v) {
events.push({
id: v.Id,
title: v.Title,
description: v.Description,
start: moment(v.StartDate),
end: moment(v.EndDate),
tutorName: v.TutorName,
color: v.ThemeColour
});
})
//then display the calendar with the events
GenerateCalender(events);
},
error: function (error) {
alert('failed');
}
})
}
This is the Save button where I want to have a validation check. I have looked at this solution but this didn't work for me
$('#btnSave').click(function () {
//validation
var selectedStartDate = moment(document.getElementById('txtStart').value.trim(), "DD/MM/YYYY HH:mm a").toDate();
var selectedEndDate = moment(document.getElementById('txtEnd').value.trim(), "DD/MM/YYYY HH:mm a").toDate();
if (selectedStartDate > selectedEndDate) {
alert('Invalid end date');
return;
}
if (selectedStartDate.getTime() == selectedEndDate.getTime()) {
alert('Start/End dates can not be the same');
return;
}
var data = {
Id: $('#hdEventID').val(),
Title: $('#txtTitle').val(),
StartDate: $('#txtStart').val(),
EndDate: $('#txtEnd').val(),
Description: $('#txtDescription').val(),
TutorName: $('#txtTutorName').val(),
ThemeColour: $('#ddThemeColour').val()
}
SaveEvent(data);
})
SaveEvent function: Which saves the data
function SaveEvent(data) {
if (selectedEvent != null && confirm("Are you sure?")) {
$.ajax({
type: "POST",
url: '/SessionScheduler/SaveEvent',
data: data,
success: function (data) {
if (data.status) {
//refresh the calendar if the status is true else its failed
FetchEventAndRenderCalendar();
$('#myModalSave').modal('hide'); //hide modal dialog pop window
}
},
error: function () {
alert('Failed');
}
})
}
}

This function will check whether the event passed in overlaps with any other events currently displayed on the calendar.
Note this relies on the events having unique id properties, so it doesn't check itself. It also cannot, by its nature, check any events not currently displayed on the calendar, because fullCalendar doesn't return those from its clientEvents method. You should check again on the server-side before accepting the modification into your database.
//check whether or not the calendar event passed in overlaps with an existing event in the current (client-side) calendar data
//the first parameter should be the event which is being tested
//the second parameter should be a jQuery object wrapping the calendar HTML element
function isCalendarEventOverlapping(event)
{
var evts = cal.fullCalendar('clientEvents');
for (i in evts)
{
if (evts[i].id != event.id)
{
if (event.start.isBefore(evts[i].end) && event.end.isAfter(evts[i].start))
{
return true;
}
}
}
return false;
}

I did some search about this problem.
FullCalender check if selection days has an event?
How to check event is already exist for a day - fullcalendar
How to avoid events duplication on fullcalendar?
Can I prevent events with conflict time?
Everytime, they get all the events from the FC memory, and iterate over them, for searching conflict time.
Unfortunately, there is no simple solution for that.
My suggestions:
You should to make a ajax call before every modification, where your server checks the conflict (if you store the events on the server side)
If your server doesn't store your events, then you have to iterate all the events in the client side, in order to find a conflict.

How to add independent buttons at the end of each data row in Jquery

So I'm getting data from a back-end through an AJAX GET method, and presenting it in a list(below) in html. I tried to put the button tag in there and I get the buttons on the list but I'm not sure how to use the delegate and others to make it work.
So how can I put independent buttons that send the users to a details page about the cafeteria in that list? (This is just a personal project)
$(function(){
var $cafeterias = $('#cafeterias');
var $Name = $('#CName');
var $Location = $('#CLocation');
function DispCafeteria(cafeteria) {
$cafeterias.append('<li> Name: '+cafeteria.Name+'Location: '+cafeteria.Location+'<button id="Details">Details</button>'+'</li>');
}
$.ajax({
type: 'GET',
url: 'some url',
success: function (cafeterias) {
$.each (cafeterias, function (i, cafeteria){
DispCafeteria(cafeteria);
});
},
error: function() {
alert('Error while loading cafeterias');
}
});
});

A few nit pick:
Don't name functions with a leading capital letter unless your planning to instantiate it (constructor function). It confuses people since this is the common de facto standard.
Avoid nested callback logic. Use a promise interface instead. (jQuery has one).
Don't construct interactive DOM elements with HTML strings. It makes it difficult to attach events to it. An exception is using event delegation which in your example is a better more performant way to do that.
You should break your problem space down. Separate concerns into smaller chunks.
Fetch AJAX Data:
function fetchData() {
return $.ajax({
type: 'GET',
url: 'some url'
});
}
Handle errors:
function handleErrors(err) {
alert('Error while loading cafeterias');
}
Construct the DOM:
function cafeteriaToString(cafeteria) {
return 'Name: ' + cafeteria.name +
' Location: ' + cafeteria.location;
}
function constructDataTable(cafeterias) {
$.each(cafeterias, function (i, cafeteria) {
var $button = $('<button/>')
.text('Details')
.data('details-id', i);
$('<li/>')
.text(cafeteriaToString(cafeteria))
.append($button);
});
}
Attach a delegated event:
function handleButtonClicks(e) {
var detailsId = $(this).data('details-id');
// Do something with detailsId
}
Putting it all together:
function init() {
fetchData()
.then(constructDataTable)
.fail(handleErrors);
$('ul').on('click', 'li>button', handleButtonClicks);
}

jquery Select2 prevent selecting in ajax response

I want to prevent from adding a category to the Select2 element if it fails creating the row first in my db. The action is not prevented when i call ev.preventDefault(); Nothing happens.. what is wrong?
$('#sel2').select2({
placeholder: 'Enter categories',
minimumInputLength: 3,
multiple: true,
ajax: {
url: 'async/get_categories.php',
dataType: 'json',
quietMillis: 250,
data: function (term, page) {
return {
q: term,
};
},
results: function (data, page) {
return {
results: data.items
};
},
cache: true
},
formatResult: format,
formatSelection: format
}).on('select2-selecting', function(e) {
console.log(e);
if (e.val == 4) {
// if category id equals 4
// do not add this category to select 2
// e.preventDefault();
// the above works just fine and its just for testing
}
// Is something wrong here?
var ev = e;
$.ajax({
type: 'POST',
url: 'async/create_profile_category.php',
data: {
profile_id: '1',
category_id: ev.val
},
success: function(response) {
console.log(response);
if (response.error === false) {
// category assigned successfully
} else {
// failed to assign category
// so i want now to prevent from adding to select2
console.log('should not add this category');
ev.preventDefault();
// the above is not working
}
},
error: function() {
alert('Failed to assign category!');
}
});
});

The AJAX request is made asynchronusly, so by the time it has finished the element has already been added. Even though you are calling ev.preventDefault(), it is too late for it to make a difference. So this leaves you with two options:
Make the request synchronusly, which will allow preventDefault to make the difference.
Make the request asynchronusly, and manually remove the element if it fails.
Both options have their pros and cons, and it's up to you to decide which option you go with.
Making the request synchronusly
Pros
The value will never be added if the request fails.
Works well in cases where the element cannot be added quite often.
Cons
Blocks the UI - So the user is potentially left with an unresponsive page while the request is made.
Making the request asynchronusly
Pros
Does not block the UI.
Works well in cases where elements typically can be added.
Cons
The value will always show up for the user, even if it fails later.
You must manually unset the new option.
What's important to consider here is the user experience of both options. When making synchronus requests, it's not uncommon for the browser to stop relaying events - which gives the illusion that the UI has locked up and the page has gone unresponsive. This has the benefit of ensuring that the value never shows up if it isn't allowed. But if users typically can add the elements, it also has the downside of complicating the most common use case.
If users can usually add elements, then it is a better experience to add the element while the request is being made, and then notifying the user later (while removing the element) if there was an issue. This is very common is web applications, and you can see it being used in many places, such as the Twitter and Facebook like buttons (where requests usually work), as well as places on Stack Overflow.

There is a way to get around this with version4 of the select2 library.
on select2:selecting we cancel the preTrigger event. Which will stop the select2:select event. We do our ajax call. On success we then get out Select2 instance then call the trigger of the Observer that way it by passes overwritten trigger method on your select2 instance.
The call method needs your select2 instance as the context so that the existing listeners are available to call.
var sel = $('#sel');
sel.select2(config);
sel.on('select2:selecting', onSelecting);
function onSelecting(event)
{
$.ajax({
type: 'POST',
url: 'async/create_profile_category.php',
data: {
profile_id: '1',
category_id: event.params.args.data.id
},
success: function(event, response) {
console.log(response);
if (response.error === false) {
// category assigned successfully
// get select2 instance
var Select2 = $users.data('select2');
// remove prevented flag
delete event.params.args.prevented;
// Call trigger on the observer with select2 instance as context
Select2.constructor.__super__.trigger.call(Select2, 'select', event.params.args);
} else {
// failed to assign category
// so i want now to prevent from adding to select2
console.log('should not add this category');
}
}.bind(null, event),
error: function() {
alert('Failed to assign category!');
}
});
event.preventDefault();
return false;
}

here how I did it for yii2 Select2 integrated into Gridview:
'pluginEvents' => [
'select2:selecting' => "
function(event)
{
var select2 = $('#types-" . $model->id . "');
select2.select2('close');
$.post('update',{id: " . $model->id . ", type_id: event.params.args.data.id})
.done (function(response)
{
select2.val(event.params.args.data.id);
select2.trigger('change');
})
.fail(function(response)
{
krajeeDialog.alert('Error on update:'+response.responseText);
});
event.preventDefault();
return false;
}",
],
it allows to asynchoronous update data in the grid using select2 and ajax and return it to previous value if there was an error on updating.