I have a select dropdown and if a user clicks 'outside' of that select dropdown, I want it to disappear. This is what I currently have:
$(this).html($("<select/>", {
id: 'sel',
change: function() {
selectdone(this, title_id, status_type);
},
blur: function() {
selectdone(this, title_id, status_type);
},
In the above, if I click outside of the dropdown, nothing happens. The only time the function is firing is if I change the value of the select dropdown.
How would I accomplish the above, such that when a user clicks anywhere on the document outside of the select dropdown, it fires this function?
I don't think this is possible. As pointed out in another answer, it appears that the active <select> is prohibiting other input from being accepted.
See my updated fiddle. Notice that when you click the background you get the alert test when the select isn't expanded. When it is expanded and you click off, the alert doesn't fire. This appears to be the default behavior of the browser. It appears to be ignoring all other inputs (mouse movements included) while the select is activated.
I was, however, able to get your event to fire for any selected element by setting the selectedIndex to -1. This way any valid option will result in a change.
Example
$(function(){
var title_id = '', status_type = '';
$('body').html(
$("<select/>", {
id: 'sel',
change: function() {
selectdone(this, title_id, status_type);
},
blur: function() {
selectdone(this, title_id, status_type);
}
})
.append($('<option />', { 'text':'one'}))
.append($('<option />', { 'text':'two'}))
);
$('#sel').prop('selectedIndex', -1);
});
function selectdone(element, titleid, statustype){
$(element).hide().prop('selectedIndex', -1);
}
Related
Upon clicking on my contextmenu menu (right-click custom menu), I have multiple cases set. The snippet below is the one set for renaming the folder (menu li > a value) which hides the link within the <li>...</li> and adds an input field.
$(document).ready(function() {
"use strict";
$(document).on('mousedown', function(e) {
if ($(e.target).parent().hasClass('custom-menu')) {
switch (action) {
case 'rename-folder':
anchor = clicked.find('a').first();
anchor.before($('<input />', {
type: 'text',
value: $(anchor).text(),
'class': 'FolderRenaming',
focusout: function() {
$(this).siblings('a').html($(this).val()).show();
$(this).remove();
$(anchor).parent().removeClass('clicked');
}
})).hide();
break;
}
}
}).on('keyup', 'input.rename', function(e) {
e.preventDefault();
if (e.keyCode === 13) {
$(e.target).focusout();
}
});
});
You right click and choose the option to 'rename'. You've then got to click within this input field and either hit enter or outside of the field for the reverse to take place.
How can I make it so upon clicking to rename, the text within the appended <input> is highlighted and therefore focused in?
You can use the jQuery focus() function on an element to achieve this.
By changing your before() call, to an insertBefore() call, you can chain the focus() method onto the element you are appending.
case 'rename-folder':
anchor = clicked.find('a').first().hide();
$('<input />', {
type: 'text',
value: $(anchor).text(),
'class': 'FolderRenaming',
focusout: function() {
$(this).siblings('a').html($(this).val()).show();
$(this).remove();
$(anchor).parent().removeClass('clicked');
}
}).insertBefore(anchor).focus();
break;
I haven't tested the above, as your code was just a snippet, but have created a basic implementation of the above here:
https://jsfiddle.net/michaelvinall/w6q09rzs/1/
I'm using the bootstrap radio buttons and would like to allow deselection of a radio group. This can be done using an extra button (Fiddle). Instead of an extra button, however, I would like to deselect a selected radio option if the option is clicked when it's active.
I have tried this
$(".btn-group label").on("click", function(e) {
var clickedLabel = $(this);
if ($(clickedLabel).hasClass("active"))
{
// an active option was clicked => deselect it
$(clickedLabel).children("input:radio").prop("checked", false)
$(clickedLabel).removeClass("active");
}
}
)
but there seems to be a race condition: the event of clicking the label that I use seems to be used by bootstrap.js to set the clicked label option to "active". If I introduce a timeout, the class "active" is removed successfully:
$(".btn-group label").on("click", function(e) {
var clickedLabel = $(this);
if ($(clickedLabel).hasClass("active"))
{
setTimeout(function() {
// an active option was clicked => deselect it
$(clickedLabel).children("input:radio").prop("checked", false)
$(clickedLabel).removeClass("active");
}, 500)
}
}
)
How can I toggle a selected option successfully without using a timeout?? Thank you for help.
Instead of using two method's preventDefault & stopPropagation, use return false, will work same.
The difference is that return false; takes things a bit further in
that it also prevents that event from propagating (or "bubbling up")
the DOM. The you-may-not-know-this bit is that whenever an event
happens on an element, that event is triggered on every single parent
element as well.
$(".btn-group label").on("click", function(e) {
var clickedLabel = $(this);
if ($(clickedLabel).hasClass("active"))
{
// an active option was clicked => deselect it
$(clickedLabel).children("input:radio").prop("checked", false)
$(clickedLabel).removeClass("active");
return false;
}
});
After messing with your code in jsfiddle for a while I figured out that a combination of preventDefault() and stopPropagation() does the trick.
Here's a fiddle
and the code:
$(".btn-group label").on("click", function(e) {
var clickedLabel = $(this);
if ($(clickedLabel).hasClass("active"))
{
// an active option was clicked => deselect it
$(clickedLabel).children("input:radio").prop("checked", false)
$(clickedLabel).removeClass("active");
e.preventDefault();
e.stopPropagation();
}
}
);
A user makes a change in a textarea. When this change occurs and another condition is true (in this particular case, the condition is that a text field contains "yes"), I show a bootstrap popover.
showPopover = function() {
return $(this).popover("show");
};
hidePopover = function() {
return $(this).popover("hide");
};
var cond = true;
$("textarea").on("change keyup", function (e) {
var pt = $("#user_user_profile_attributes_title").val();
if (cond&&pt=="yes") {
$("[rel=next-popover]").popover({
placement: "right",
trigger: "manual"
})
.hover(showPopover, hidePopover).click(showPopover);
}
else {
$("[rel=next-popover]").popover({
placement: "right",
trigger: "manual"
})
.hover(hidePopover, hidePopover).click(hidePopover);
}
});
Steps to reproduce:
1) Go to http://jsfiddle.net/bpjavascript/KscL5/
2) type yes in the text field
3) make a change in the text area & see the popover when click/hover
4) change yes to something else & make a change in the text field, no popover
5) change text field back to yes & make a change in the text field - now you should see a brief popover flash. Why is this? I want it show as in step 3.
You are binding multiple events of the same type to the popover.
Instead, in your conditional logic you should bind one event if the condition is met or unbind the event if not.
So in your else statement you should have something like:
else {
$("[rel=next-popover]").popover({
placement: "right",
trigger: "manual"
})
.off( "mouseenter mouseleave" ).off("click");
}
Fiddle here.
For an autosuggest
i have one div for the input tag and another for the suggestions div...i want the suggestions div to disappear after either
1) an element is selected in the suggestions div
or
2) when an area outside the two divs is clicked
The question is where to add an "onblur" event right now i have
<input type = "text" name= "target" value = "" id="target" style="width:150px" onblur ="setTimeout('removeSuggestions()', 20);" onkeyup ="getSuggestions(this.value);"/>
<div id ="suggestions"></div>
and
function getSuggestions(value){
if (value !=""){
$.post("target.php", {targPart:value}, function(data) {
$("#suggestions").html(data);
if(value.length>2){
doCSS();
}
});
} else {
removeSuggestions();
}
}
function removeSuggestions(){
$("#suggestions").html("");
undoCSS();
}
function addText(value){
$("#target").val(value);
}
function doCSS(){
$("#suggestions").css({
'border' : 'solid',
'border-width': '1px'
});
}
function undoCSS(){
$("#suggestions").css({
'border' : '',
'border-width': ''
});
}
But everytime I try to click a suggestion the suggestions div goes away because once i go out of the input field remove suggestions is called. The timeout is supposed to help but isn't. How can i fix this?
Perhaps something like this will solve your problem. We only need to monitor the blur of search box because clicking out of it (even on suggestions) will trigger the hide event.
http://jsfiddle.net/9Yt9L/3/
$('#search').focus(function() {
$('#suggestions').slideDown();
});
$('#search').blur(function() {
$('#suggestions').slideUp();
});
$('#suggestions div').click( function() {
$('#search').val($(this).html());
});
As IE 7 does not support the disabled attribute, I am using jQuery to add an event handler to the change event which checks if there is a disabled attribute on the select and setting the css color to grey on the disabled option.
However, as soon I click on the dropdown its closes my dropdown first then re-draw the new one with the grey color.
Here is my code:
(function($) {
$('select').change(function() {
if (this.options[this.selectedIndex].disabled) {
if (this.options.length == 0) {
this.selectedIndex = -1;
} else {
this.selectedIndex--;
}
//$(this).trigger('change');
}
});
$('select').each(function(it) {
if (this.options[this.selectedIndex].disabled) {
this.onchange();
}
});
$('select').click(function(e) {
//e.stopPropagation();
$(this).find('option[disabled]').css({
'color': '#cccccc'
});
});
})(jQuery);
Check out this example I've made for you:
http://jsfiddle.net/auNVE/
It should give you enough information for further development!
Good luck!
Edit
Update after having more information
http://jsfiddle.net/auNVE/1/
Edit
Now with mousedown instead of click
http://jsfiddle.net/auNVE/2/