Develop Reference

How to remove the focusin event listener from modal in Bootstrap 5

I have a legacy app with a modal that is unfortunately using a kendo dropdown list element (bound to an ajax call and with filtering etc - i dont want to rewrite this if i dont have too). So when the modal opens, and you focus on the dropdown list, the modal assumes you are clicking outside it, and takes the focus off the dropdown list - cuasing it to close as soon as you open it... I had fixed it in Boostrap 4 with this code:
$("#theModalId").on('shown.bs.modal',function () {
$(document).off('focusin');
})
However that is no longer working in bootstrap 5. I think possibly because the focusin event might no longer be on the document element itself? I can see bootstrap is adding a focusin event - but i dont know which element it is adding it too as the above code no longer works. I also tried removing it from the theModal element but that didnt work either.
Any help greatly appreciated!

Ok, so I found if you remove the filter option from the dropdown it fixes this issue, but then you might as well just use a regular select.
Or you can keep the filter and fix the issue by apply the following suggestion provided by some Levi dude in this thread: https://www.telerik.com/forums/dropdownlist-closes-when-setting-filter-option (Thanks Levi)
Nothing else seemed to work for me! Here is Levi's implementation:
// Popup extension.
// Sets up kendo popups (used in all sorts of widgets) to check if the widget
// is being included in a bootstrap modal. If so, the popup should append to
// the modal instead of the page body.
//
// For the most part, popups work fine without this. However, DropdownList with
// a filter option does not. This is because the filter attempts to focus on
// filter input, which is outside the modal By default, Bootstrap modal will
// block this. It has an option to allow, but then it must be remembered to add
// everywhere.
//
// This allows filtered dropdownlists to 'just work'.
//
// http://www.telerik.com/forums/dropdownlist-closes-when-setting-filter-option
//
// See for alternate solutions:
// http://www.telerik.com/forums/dropdownlist-with-server-filtering-on-bootstrap-modal
// http://stackoverflow.com/a/28471072/246561
//
(function ($, kendo) {
var
_init = kendo.ui.Popup.fn.init;
var Popup = kendo.ui.Popup.extend({
init: function (element, options) {
// Only set appendTo if nothing was manually set in the options.
if (options.appendTo === undefined) {
// Find the nearest parent bootstrap modal, if any.
var parentModal = $(options.anchor).closest('.modal');
// Found one!
if (parentModal.length > 0) {
options.appendTo = parentModal[0];
}
}
// Call the base constructor.
_init.call(this, element, options);
}
});
kendo.ui.plugin(Popup);
}(window.kendo.jQuery, window.kendo));

Make a check mark appear when colorbox is closed

I've added colorbox to a site that contains product attributes. When a user has selected the attributes and closed the popup I either want to change the background colour of the button used to open the popup, or display a marker so that they know they have chosen the options for that product out of the grid layout.
I have got a close event firing ok on colorbox. I tested it with alert("closed"), so i know that it is activating correctly.
So i added:
$(document).bind('cbox_closed', function(){
document.getElementById('.inline').style.backgroundColor = "#f3f3f3";
});
but it didn't change the background colour of the "inline" class.
What am i doing wrong?
If i decide to go with a check mark that is hidden with display:none; what is the process for overriding the display:none; css?
Thanks

There are a couple problems I see here:
A. You're incorrectly accessing a class name "by id". Switch to jQuery CSS selector and css() method to change the BG color:
$(document).bind('cbox_closed', function(){
$('.inline').css({backgroundColor: "#f3f3f3"});
});
B. You may want to add your event listener directly in the colorbox options in the constructor, rather than on the document, which ought to perform better, and will kill the listener when the colorbox is destroyed (no memory leaks):
$('#my_colorbox').colorbox({
// options
onClosed: function() {
$('.inline').css({backgroundColor: "#f3f3f3"});
}
});

You can't access the class with document.getElementById(). Use document.querySelectorAll('.inline') instead.
or use jquery way
$('.inline').css('backgroundColor', '#f3f3f3');
Use
$(document).bind('cbox_closed', function(){
document.querySelectorAll('.inline').style.backgroundColor = "#f3f3f3";
});

onclick dropdown menu with a form, click outside to close

ive got a drop down menu with form elements. the menu element gets set to
display:none
when anything outside the element is clicked ... or at least so i thought.
Here's my little function
$(function(){
$('#loginAcc').click( function(event){
event.stopPropagation();
//show
$('#auth-menu').css('display', 'block');
});
$(document).click( function(){
//hide when click anywhere out the menu
$('#auth-menu').hide();
});
})
the problem i have is that it also closes when i click inside the element, which makes it very difficult, pretty much impossible to complete a form.
#loginAcc
is a horizontal list item that gets clicked, and
#auth-menu
is
if i were to hazard a guess, i would like to think that .toggle() is the culprit, but that's a sheer guess and i wouldn't even know where to start if i were to reimplement it (a little bird told me that it's getting taken out of the spec anyway).
what i would like to happen is that when you click on the #loginAcc list item, the #auth-menu gets set to display:block, and can only be closed if you reclick #loginAcc or anywhere else outside of #auth-menu.
any help would be amazing. thanks

Use a not() selector to exclude the menu:
$(document).not('#auth-menu').click( function(){
//hide when click anywhere out the menu
$('#auth-menu').hide();
});

Add DISPLAY: NONE to span via jQuery when: mouse-click outside span, OR click EXIT button, etc+

What I want is really simple, but every time I try to add the functionality I want, the more I'd mess things up, so I decided to ask help and stick with the working basic script I have now.
I already have a script in progress, that I would like to develop to work almost exactly like this:
https://stackoverflow.com/a/7133084/1399030 { http://jsfiddle.net/Paulpro/YpeeR/25/ } (by: PaulP.R.O.)
Open a hidden span
Hide a hidden span
Span has "CLOSE" button to exit span
Hide currently opened span when another span is triggered
Think... Image Gallery Preview functionality... Kind of.
"Preview" spans are triggered when either .popCover or a.thumbnail is clicked on the webpage, this hidden span will appear based on its specified unique id, by jQuery inserting display: block; to its css.
This is inside a loop with multiple items.
I've gotten this far and this is the working script that I use:
$(document).ready(function() {
$('.popCover').click(function(){
divID = $(this).attr('id');
$("#tooltip-"+divID).fadeIn('5000', function() {
$("#tooltip-"+divID).css("display", "block");
});
});
$("a.thumbnail").click(function() {
dvID = $(this).attr('id');
$("#tooltip-"+dvID).fadeIn('5000', function() {
$("#tooltip-"+dvID).css("display", "block");
});
});
});
But now, I need to add to these functions the trigger to make the span disappear again, (by inserting display: none; to its css.
I'd want the CURRENT SPAN to disappear when:
01. Mouse click is made outside of the span element
02. An exit or X button is clicked INSIDE the span. (like on image galleries, when they preview an image, and exit it by either clicking outside the element or an exit button provided within the preview)
03. .popCover or a.thumbnail is re-clicked (probably to trigger another span of a different ID to show.)
NOTES:
Currently, I can click as many anchors on the page and all these spans with different IDs just accumulate and stack up over each other on the page.
I don't really want that. I don't want more than 1 span to be open at one time, so I was hoping to add functionality that would make the current opened span exit itself when another anchor click is made.
I really did try to do this myself, but... I can't get the methods I've tried to work. It was too complicated to add all these functions together since I'm no jQuery expert. I could get one to work and then ruin it by trying to work in another.
Also, I was thinking of using this similar way of exiting the span:
$(".the_span").fadeOut("5000").css("display", "none");
The only reason I'm not willing to just use some plugin and uncomplicate things for me is, I already really like my "Preview" span css, I have it all ready. I just need the jquery part to work:
To display: block a span when triggered, and display: none it if mentioned conditions are met.
Hoping for assistance, and will be very grateful for each single one! Thank you.

You have to try to add a class on the opened / active element and then bind all the events to close it. Binds have to be done on elements with class .active for example, when closed, .active class have to be removed.

I've finally gotten this to work! :o)
By using if ($("span.the_span").is(":visible")) to check if span with class="the_span" was currently visible / open / or has display: block in its CSS, and if so, to:
- hide the currently open span, before proceeding to show the new span. -
Here's my working finished product that addresses all the functionality I wanted:
$(document).ready(function() {
// When clicks on either ".popCover" or "a.thumbnail" is made,
// Funcion clickPOP is triggered:
var clickPOP = function() {
divID = $(this).attr('id');
// Checks if "span.the_span" is already currently open:
if ($("span.the_span").is(":visible")) {
$("span.the_span").css("display", "none"); // If open, this is where it closes it..
$("#tooltip-"+divID).fadeIn('200', function() { // Then, proceeds to open the new clicked span here.
$("span.the_span #tooltip-"+divID).css("display", "block"); });
}
// But if no "span.the_span" is currently open:
// No need to close anything, it will directly open the new span...
else {
$("#tooltip-"+divID).fadeIn('5000', function() {
$("span.the_span #tooltip-"+divID).css("display", "block"); });
}
} // End of Function. Added functionality starts below...
// Exits "span.the_span" when mouse clicks outside of element
// ... ("Outside of element" means: outside of "span.the_span")
$(document).click(function(){
$("span.the_span").css("display", "none");
});
// Exit Button : Exits "span.the_span" when exit button is clicked
$('span.exitme').css('cursor', 'pointer').click(function(e){
$("span.the_span").css("display", "none");
e.stopPropagation();
});
// This makes sure that clicks inside "span.the_span" continue to work
$('span.the_span').click(function(e){
e.stopPropagation();
});
// This makes sure that clicks on ".popCover" continue to work
$(".popCover").click(function(e){
e.stopPropagation();
});
// This makes sure that clicks on "a.thumbnail" continue to work
$("a.thumbnail").click(function(e){
e.stopPropagation();
});
// Clicks on both ".popCover" & "a.thumbnail"
// ... will trigger actions specified on function: clickPOP.
$(".popCover").click(clickPOP);
$("a.thumbnail").click(clickPOP);
});
As you can see, I've also added the $(document).click(function() etc. to get my original desired functionality of hiding the span when mouse clicks outside of the element, but making sure that clicks can still be made if they are done on .popCover (div) or a.thumbnail (link) on the webpage.
Also, I wouldn't have been able to complete writing this method without the tips from these posts:
* Running same function / different triggers: https://stackoverflow.com/a/1191837/1399030
* Fix clicking inside element (including exit button): https://stackoverflow.com/a/4660691/1399030
* How to check if something is hidden or visible: https://stackoverflow.com/a/178450/1399030
I especially found the last post VERY helpful (and basically it made me understand what I was doing), because poster: Tsvetomir Tsonev included in his code comments:
// Checks for display:[none|block], ignores visible:[true|false]"
I didn't really initially understand that jQuery was able to check or connect with CSS that wasn't inline (being a jQuery noob myself), so that post was indeed very enlightening.
Of course, if there is a better, more efficient way to do this, I would be very happy to be enlightened some more! jQuery is still a learning curve for me, and I'm a very eager student!

check for ('div')mouseenter on ('a')mouseleave

my problem is following:
I got a trigger(a) and a popup(div). The div doesn't lie nested inside the anchor.
When I hover over a, I want the div to show up.
When I go from a to the div, I want it to stay visible.
When I leave the div, I want it to close.
When I hover over a and leave without entering the div, I want the div to close.
I got most of that figured out, but now I'm struggeling with requierement no. 2.
When checking for mouseleave on a, I check if there is a mouseenter on the div. If it is, I want to abort the mouseleave. If not, I want to close the div.
What am I doing wrong? Is this even the right way to do this?
Here's the markup:
<a href="#" class="popup_toggle" style='display:block;width:50px;height:50px;border:1px solid red;position:relative;'>Toggle</a>
<div class="popup_div" style='position:absolute;top:50px;left:0px;border:1px solid blue;display:none;'>Popup</div>
Here's the jQuery:
$('.popup_toggle').mouseenter(function() {
var element = $(this).next('.popup_div');
$.data(this, 'timer', setTimeout(function() {
element.show(100);
}, 500));
});
$('.popup_toggle').mouseleave(function() {
clearTimeout($.data(this, 'timer'));
if($('.popup_div').mouseenter==true)
{
return false;
}
else
{
$('.popup_div').hide(100)
};
});

What you're trying to do is fairly simple. When entering the trigger, identify the panel (layer, popup, whatever), save reference to each other using .data() and have the event handlers check if the related targets are either the trigger (from the panel view) or the panel (from the trigger view). I threw something together. Have a look at the console log to see how this works… http://jsfiddle.net/rodneyrehm/X5uRD/

That will most likely not work...no. I would suggest that you add a mouseenter and mouseleave callback to you <div> element as well and have them set a global variable that tells your other callbacks how to handle their events, i.e. "if global variable is true, don't hide the popup on mouseleave, otherwise hide popup" or something like this.
The other approach would be to check whether the mouse is inside the popup when the mouseleave callback tries to hide the popup. That might be much more work than it is worth though.

I believe the problem with your implementation is that the mouseenter on the div will fire shortly after the mouseleave from the a.
This would give you something like:
$('.popup_toggle').mouseenter(function() {
// Clear any pending "hide" timer
// Set a show timer
});
$('.popup_toggle').mouseleave(function() {
// Clear any pending "show" timer
// Set a hide timer
});
$('.popup_div').mouseenter(function() {
// Clear any pending "hide" timer
});
Note that you'll have to make sure that you access the same timer from both the .popup_toggle event and the .popup_div event. You may want to consider using Ben Alman's doTimeout plugin to help with this. It (usually) results in much clearer code than manually working with setTimeout/clearTimeout.