JQuery FullCalendar freezing after removing an event - javascript

I am using FullCalendar with an array of events to populate it. To remove events from the calendar, the user clicks an event box and a dialog box pops up. There is an x in this box that triggers the removeEvent method.
In this method I filter out the event matching this id of the removed element, then remove and re-add the source like this
calendar.fullCalendar('removeEvents');
calendar.fullCalendar('removeEventSource', addedEvents);
calendar.fullCalendar('addEventSource', addedEvents);
calendar.fullCalendar('refetchEvents');
calendar.fullCalendar('rerenderEvents');
All of this works fine (the event gets removed), but after that, I can no longer interact with the events. Clicking an event does not open the dialog box. It's almost as if the elements are no longer there, but I can still see them.
Any help troubleshooting this would be appreciated. Thank you.

Related

Clicking through absolute positioned divs

I am using the autocomplete js from here:
https://goodies.pixabay.com/javascript/auto-complete/demo.html
It all works fine but when I click one of the suggestions
A click event fires on the body element which then shuts down the whole drop down menu.
(this is by design as in every other case where there body is genuinely clicked I want the drop down menu to disappear)
When I check the event that is firing on the body the path is showing that it is starting at the body element. I have put event stop propogation functions on all of the divs created in the drop down menue including the ones created by the autocomplete. It doesn't seem to be coming from them - it is if it the click is firing the click event of the suggestions divs but additionally of body underneath as an entirely separate click event.
How can I stop this from happening?
Many thanks.
SOLUTION:
The autocomplete javascript code from pixabay was capturing the mousedown event - and then setting the display of the suggestions to none. This meant that when the click event fired the suggestion div was no longer there causing it to fire a click on whatever was underneath the click. So I changed the mousedown event in the autocomplete code to click and this has fixed the problem.
This seems like a bug in their code? I can't see a reason why you'd ever want the click event to be fired on what happens to be underneath a suggestion?

Detect click event to prevent autocomplete list from closing jQuery

I have an issue in IE that is causing my autocomplete list to close when I click on the scrollbar, when the autocomplete element is on a dialog. It works fine for my other autocomplete inputs that are on the main page.
How can I add a click handler to detect what was clicked and cancel the close function if the target of the click was the scrollbar of the autocomplete.
Id love to just comment but since my renown isnt high enough here:
Try going trough this post it might contain solution for you.
Clicking on a div's scroll bar fires the blur event in I.E

jQuery Chosen Plugin : Capturing focus to open when tabbing

We're currently using the Chosen Dropdown Plugin which is rather awesome, apart from one minor issue. When we're using a single dropdown, if you tab into the 'chosen' control, the actual dropdown portion is not shown. However, when applying the plugin to a multiple 'select', it does appear.
Having been through the documentation and GitHub issues, there seems to be a lot of mentions regarding tab ordering and focusing, but nothing that seemingly deals with this rather simple requirement; Display the dropdown when receiving focus when tabbing.
So assuming that this functionality is not part of the plugin, is there an alternative such as capturing the focus of the anchor tag?
$('.chzn-single').focus(function(e){
alert('I should be focused!')
});
So far, I haven't been successful and was wondering whether any others have experienced this issue. You can check out this jsfiddle that demonstrates the problem
You should keep track of focus event for the search input thats inside chosen conainer, not the anchor element, then trigger mousedown event for the chosen container - that's the event that it listens to when opening a dropdown
You need to use delegated events approach to bind event handler to elements added dynamically (for jquery 1.7.1 and earlier you may just use 'live' method)
You also need to check if the container is active currently, to avoid recursive calls (when chosen dropdown gets opened - search input will be focused again)
$('body').on('focus', '.chzn-container-single input', function() {
if (!$(this).closest('.chzn-container').hasClass('chzn-container-active'))
$(this).closest('.chzn-container').trigger('mousedown');
//or use this instead
//$('#select').trigger('liszt:open');
});
Here's working jsfiddle
Instead of $(this).closest('.chzn-container').trigger('mousedown');
you may also trigger plugin's internal event: $('#select').trigger('liszt:open');

FullCalendar event removal

I am currently using the Full Calendar JQuery plugin on my webpage. I am having one small problem with it. On eventClick, a dialog is opened asking the user to name their event. That is fine.
However, when the user escapes this UI, I wish for the event to be removed from the fullCalendar view completely. By default, a blue box is left there. showing where the event would have been placed. If you click anywhere that isn't on the fullCalendar screen, then it will escape this blue box.
I have an alert being displayed when the user exits the dialog that prompts them for an event name, all I need to figure out is the code to remove the blue box that is generated!
The function revertFunc(); will not seem to do this, I assume because the event has not actually been created.
Does anyone know what could be used in this case?
There is a removeEvents method
http://arshaw.com/fullcalendar/docs/event_data/removeEvents/

Adding options to select element at the point it's about to open in JavaScript

I have a system with a fast-changing set of items that may appear as options in select boxes. I could update the options themselves directly each time the data changes, but I'd rather simply fill in the options at the point where the user is about to see them. E.g. when it's about to open. Is there an event for this?
I suppose I could use the 'click' or 'mousedown' event, but what about navigating via the keyboard? There may be other cases too (perhaps)
BTW, I know how to add options to a select, the 'opening' event is really what I'm after.
Thanks,
Ben
You've got two choices: click() and focus() there are no others.
Use focus() and not click() because the click event does not give enough time to populate the drop down with new values which causes quirky behavior. Also the click event will only capture mouse clicks, with the focus() you get both mouse and keyboard focus events and also it gives ample time for the drop down to get populated with new data. Here is a fiddle with some simple experiments, try each function one at a time to see the difference.
If you're doing something like this, a select drop down probably isnt going to be the UI element of choice.
I would recommend changing to a jQuery UI Autocomplete widget; then you can simply serve items based on the query the user entered.
In addition, you can attach to the keyup event (or the focus event), and show a set of items at that point (as if the 'drop down' was clicked on) http://jqueryui.com/demos/autocomplete/#maxheight

Categories

Resources