Detect click event to prevent autocomplete list from closing jQuery - javascript

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

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?

Reload the page if i click on outside the multiple dropdown box using javascript

I have a small query, I have a multiple dropdown box in my form. after selecting multiple value, if I click on outside the multiple drop down box page should reload. How can I make it happen using javascript. I have used "onmouseout(reload.form)" option but it is not working. Please help me on this.
Thanks
Ranjith
In this scenario, you might need click event rather mouseout(which is not on click but when mouse loses the focus).
For more details about click outside the element refer the below link
Javascript Detect Click event outside of div
So once you capture the click out event, you can just trigger the page load using
window.location.reload(true) or window.location.reload(false)
true or false depends on you need to load from cache or server.
Hope it helps!!
Seems like you should really connect to the change() signal on the select box instead. By depending on the mouse event, you will prevent people form using your form with the keyboard only, for instance. onmouseout will also not work on mobile devices

JQuery FullCalendar freezing after removing an event

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.

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/

jQuery click event for document but ignore a div

I have a online Slide Show I'm working on using jQuery. I have use $(document).click event to detect when a user clicks on the page to know when to show the next bullet point in the slide or to move to the next page.
The problem I'm running into is my job had me insert a comment box on the bottom of the page and when ever someone clicks on the comment box or the save comment button it also fires the click event for the page.
Is there a way I can have the click event for the entire page but ignore it when someone clicks in the DIV the Comment box/Save button are in?
You will most likely need to stop the propagation of events in your Comments div using the event object's stopPropagation() method:
$('#comments').click(function(e) {
e.stopPropagation();
});
if that doesn't work try using preventDefault():
e.preventDefault();

Categories

Resources