I searched Stackoverflow for an answer to my question: How to save dropped external events immediately to the database. Adding and updating events through the dialog works fine. Dragged external events are rendered fine.
This is the code I use in the eventReceive function. The first alert to show the event data is correct, but the second is never reached.
eventReceive: function (event, delta, revertFunc) {
alert(event.title + " was dropped on " + event.start.format()); //REPLACE WITH AJAX TO SAVE EVENT DATA
var eventToAdd = {
title: event.title,
description: "Unknown",
start: event.start.format,
end: event.end.format,
allDay: isAllDay(event.StartDate, event.EndDate)
};
if (checkForSpecialChars(eventToAdd.title) || checkForSpecialChars(eventToAdd.description)) {
alert("please enter characters: A to Z, a to z, 0 to 9, spaces");
}
else {
alert(event.title + " was dropped on " + event.start.format());
PageMethods.addEvent(eventToAdd, addSuccess);
}
},
I digged somewhat deeper and as far as I can tell, after the var eventToAdd JQuery 3.3.1 triggers the same functions over and over again as soon as the mouse is hovered over any element in the page. Functions involved are: matchFromGroupMatchers, elementmatcher, prefilter and Sizzle. The javascript of fullcalendar does not resume.
It seems the variable eventToAdd was in use. Changing it to a different name solved it. I have it now this way:
eventReceive: function (event) {
// alert(event.title + " was dropped on " + event.start.format());
var eventAdd = {
start: event.start.format(),
end: event.end.format(),
title: event.title,
description: "Onbekend",
hwType: "Proefwerk",
};
PageMethods.addEvent(eventAdd, addSuccess);
},
Related
I am using the calendar now, and it works well.
I want to add a database record every time an event is moved/resized/etc. to keep a history log.
Once an event is moved for instance, I will use ajax to add the information to my db, but I don't know how to capture the original time and new time.
$('#calendar').fullCalendar({
events: [
// events here
],
editable: true,
eventDrop: function(event, delta, revertFunc) {
alert(event.title + " was dropped on " + event.start.format());
if (!confirm("Are you sure about this change?")) {
revertFunc();
}
}
Does the delta value hold this information so I can use it for my records?
I have angular-meteor app that needs Material md-autocomplete from a collection with 53,296 documents with angularUtils.directives.dirPagination but this amount of data make my browser hang.
I'm publishing the collection with:
Meteor.publish('city', function (options, searchString) {
var where = {
'city_name': {
'$regex': '.*' + (searchString || '') + '.*' ,
'$options': 'i'
}
};
return City.find(where, options);
});
I subscribe with:
subscriptions: function () {
Meteor.subscribe('city');
this.register('city', Meteor.subscribe('city'));
}
and have pagination on controller :
$scope.currentPage = 1;
$scope.pageSize = 100;
$scope.sort = {city_name_sort : 1};
$scope.orderProperty = '1';
$scope.helpers({
city: function(){
return City.find({});
}
});
but it takes a long time to load and its make chrome stop working.
You already have most of the server-side searching done because your search is running inside a subscription. You should make sure that the city_name field is indexed in mongo! You should only return that field to minimize data transfer. You can also simplify your regex.
Meteor.publish('city', function (searchString) {
const re = new RegExp(searchString,'i');
const where = { city_name: { $regex: re }};
return City.find(where, {sort: {city_name: 1}, fields: {city_name: 1}});
});
What I've found helps with server-side auto-complete is:
Don't start searching until the user has typed 3 or 4 characters. This drastically narrows down the search results.
Throttle the search to only run every 500ms so that you're not sending every character to the server because then it has to keep re-executing the search. If the person is typing fast the search might only run every 2 or 3 characters.
Run the same .find() on the client that you're running on the server (instead of just querying for {}). That's just good practice since the client-side collection is the union of all subscriptions on that collection, there might be documents there that you don't want to list.
Lastly I don't know why you're subscribing twice here:
subscriptions: function () {
Meteor.subscribe('city');
this.register('city', Meteor.subscribe('city'));
}
only one of those Meteor.subscribe('city') calls is necessary.
This is further information from a previous submission but I thought it would be clearer if I posted this separately.
A helper is returning a collection query:
Template.clientGrid.helpers({
'programs': function () {
var fullNameP = Session.get('clientName');
return Programs.find({FullName: fullNameP});
}
});
In the template it's printing out properties from 'programs'. For example:
...
{{#each programs}}
<p>{{formatCampYear CampYear}}: {{formatNotes Notes}}</p>
{{/each}}
....
Nothing special going on. So, if the FullName is Jane Doe, and she's got 6 documents in the programs collection, it will print the six properties in the template. But the page is getting caught in a while-loop inside Tracker (see line 449 the while-loop 'recompute all pending computations') after the properties finish printing. The CPU is tied up and prevents certain page operations. If any of you harder-core guys and gals have any clue as to what this means, perhaps I can sleuth out the problem. Here's a copy of the while loop itself (just in isolation):
// recompute all pending computations
while (pendingComputations.length) {
var comp = pendingComputations.shift();
comp._recompute();
if (comp._needsRecompute()) {
pendingComputations.unshift(comp);
}
if (! options.finishSynchronously && ++recomputedCount > 1000) {
finishedTry = true;
return;
}
}
EDIT: Here's the event map that setting the session. There doesn't seem to be anything suspicious. Since I'm pre-production, I'm not doing any updates to the collection. It's pretty much just static at this point.
Template.clientSearchButton.events({
'click #client-search-button': function(event) {
event.preventDefault();
var clientFullName = document.getElementById('full-name').value.toUpperCase();
Session.set('clientName', clientFullName);
mapAddress = Demographic.find({ "FullName": clientFullName }).map(function (a) { return (a.Address + " " + a.City + " " + a.State + " " + a.Country); });
Meteor.myFunctions.initialize();
}
});
I'm using the new Timeline view in the FullCalendar from http://fullcalendar.io/
When I drag an event, I want to save the change to the backend, so I use the eventdrop function like this:
eventDrop: function (event, delta, revertFunc, ev) {
console.log(event.title + " was dropped on Date:" + event.start.toISOString() + " ResourceID:" + event.resourceId);
}
The problem is, that I have events shared among multiple resources, so I need to know the source of the event begin dropped (the resourceId where it came from) to be able to update correctly. In my backend I handle the link between a resource and the event via a field called event.resourceIds holding the ids of all the resources linked to this event. In the front end (Fullcalender), I create an event (with a unique ID) for each each resource for a given event.
Any hints on how I can find out where the event came from?
Found a solution myself - posted here in case anyone could use the answer:
eventDragStop: function (event, delta, revertFunc, ev) {
event._srcResourceId = event.resourceId;
},
eventDrop: function (event, delta, revertFunc, ev) {
console.log(event.title + " was dropped on Date:" + event.start.toISOString() + " ResourceID:" + event.resourceId + ' Old resource ID: '+ event._srcResourceId);
}
I'm trying to get an jquery ajax callback function to update the background colour of a table cell, but I can't get it to work.
I have the following code (which produces no errors in Firebug):
$(".tariffdate").click(function () {
var property_id = $('#property_id').attr("value");
var tariff_id = $('#tariff_id').attr("value");
var tariff_date = $(this).attr("id");
$.post("/admin/properties/my_properties/booking/edit/*", { property_id: property_id, tariff_id: tariff_id, tariff_date: tariff_date },
function(data){
var bgcol = '#' + data;
$(this).css('background-color',bgcol);
alert("Color Me: " + bgcol);
});
I've added the alert just to confirm I'm getting the expected data back (a 6 digit hexadecimal code), and I am - but the background of my table cell stubbornly refuses to change.
All the table cells have the class .tariffdate but also have individual ID.
As a test, I tried creating a hover function for that class:
$(".tariffdate").hover(function () {
$(this).css('background-color','#ff0000');
});
The above works fine - so I'm really confused as to why my callback function is not functioning. Any ideas?
In the AJAX completed handler the instance of this is changed to the ajax object. You'll need to save the instance of this to an object and use that object. For example:
$(".tariffdate").click(function () {
var property_id = $('#property_id').attr("value");
var tariff_id = $('#tariff_id').attr("value");
var tariff_date = $(this).attr("id");
var tariff = $(this);
$.post("/admin/properties/my_properties/booking/edit/*",
{ property_id: property_id, tariff_id: tariff_id, tariff_date: tariff_date },
function(data) {
var bgcol = '#' + data;
tariff.css('background-color',bgcol);
alert("Color Me: " + bgcol);
}
);
});
Check what the "this" variable is in you ajax callback function. I suspect that it's not referring to .tariffdate