We Keep Coding

How to capture selection event in jQueryUI selectable?

I have a few links on a webpage. They open a similar dialog window and load equal content via $.load(). Content has ul list and it use $.selectable() plugin:
$('.select-dialog-cities > ul').selectable({filter: 'li'});
I would like to handle the selectableselected event. As I have three links, I need to separate the events. Is it possible without global flags? Something like this:
$("#dialog_id .select-dialog-cities > ul").on("selectableselected", function(event, ui){});

Depending on what you're trying to achieve, you might also just query which elements are actually selected, like this:
$("#selectable").on("selectableselected", function(event, ui){
$('.ui-selected').each(function(){
console.log($(this).text());
});
});
Example on JSFiddle
If you're doing this on different dialog windows, you will probably need to bind to the event every time you create a new dialog window.

To capture that event you should provide a function to the selected property of the object you initialise selectable with. Try this:
$('.select-dialog-cities > ul').selectable({
filter: 'li',
selected: function(e, ui) {
console.log('You chose something!');
}
});
You can get information about the element that raised the event via the selected property of the ui parameter passed to the function.
More info in the jQueryUI Docs

As I sad:
load equal content via $.load(). Content has ul list
I could not assign event this way:
$("#dialog_id .select-dialog-cities > ul").on("selectableselected", function(event, ui){});
Because I forget about one moment from documentation $.on():
Event handlers are bound only to the currently selected elements; they
must exist at the time your code makes the call to .on().
So the solution was very easy:
$("#dialog_id").on("selectableselected", ".select-dialog-cities > ul", function(event, ui){});

jquery blur not working on "exiting" text input even though "click" does

I'm trying to make a custom dropdown be able to be "tabbed into" using jquery. That is, it is made of a ul, and I want the text input directly above it, when tabbed out of give some sort of focus to the ul. But for some reason this
var input = $("ul.dropdown_ul").prev("input");
$("#container").on("blur", input, function(){
alert("test");
});
does not work. With click as the event, the alert fires. But blur is not working.
JSBIN
Any ideas on why this doesn't work? Thanks.

Your #container is a div. Typically blur is used on inputs, thats why it not working. The following works fine.
$("#container input").on("blur", function () {
alert("test");
});`
Update Regarding Comment:
If your looking to have a specific element have the on blur event. Just make sure you select it properly and apply the listener to it. I think this is what you're trying to accomplish.
var $input = $("ul.dropdown_ul").prev('input')
$input.on("blur", function () {
alert("test");
});
Example

Preventing select menu from opening

Possibly a silly question, but how do I prevent a select element in a form from showing its drop down menu when it's clicked on? I tried the following:
$('select').click (function (e) {
console.log (e);
return false;
});
and
$('select').click (function (e) {
e.preventDefault ();
console.log (e);
});
But neither worked.
What am I doing wrong?
EDIT: The reason I need to know is for a jquery enhanced select element that needs to degrade gracefully. The idea is the select, when clicked, opens a jquery UI dialog with a nicely maked up list that the user makes their selection from (clicking a list item causes the select's value to update). If JS is disabled then the select should just operate as normally.
The problem is that as well as the dialog opening, the dropdown also appears, which is not what I want. I can't just disable the control, as its value needs to be submitted along with the rest of the form.

This should work:-
$('#select').on('mousedown', function(e) {
e.preventDefault();
this.blur();
window.focus();
});

The problem is that you're using the wrong event.
<select onmousedown="(function(e){ e.preventDefault(); })(event, this)">
<option>Some Option</option>
</select>
JsFiddle

From my experience, if i need to disable something, the easiest way to have another invisible element on it (use absolute positioning). When you want to allow default behavior again, you just hide absolute element.

I believe the best solution would be to replace the select element with something else to click on (a button or a link).
BTW, you may want to look into the CSS 3 property appearance, which theoretically allows you to let that replacement element look like a dropdown. Support is however currently very limited:
http://css-infos.net/property/-webkit-appearance
https://developer.mozilla.org/en/CSS/-moz-appearance

You can, the trick is to cancel the mousedown event, not the click. The event chain is made in such a way that click and mouseup cannot occur if mousedown was cancelled:
function cancelDropDown(ev) {
ev.preventDefault();
}
document.getElementById("selectElement").addEventListener("mousedown", cancelDropDown, false);

Hide the select options on page load (if Javascript enabled). They will not display when the select box is clicked, but the text of the first option ("Select an option", or whatever) will still appear in the select field.
$(document).ready(function() {
$('#idOfSelect option').css('display', 'none');
});
Updated Solution:
$(document).ready(function() {
$('#idOfSelect').focusin(function() {
$(this).css('display', 'none');
$('body').click(function(event) {
$(this).unbind(event);
$('#idOfSelect').css('display', 'block');
});
});
});

I just solved this exact problem, by manipulating the 'size' attribute of select. Not very elegant, but worked. Hope its of some help to you.
<!-- Example select dropdown -->
<select id="select" onclick="tackleDropdown()">
</select>
<!-- The JS function -->
<script>
function tackleDropdown(){
document.getElementById('select').setAttribute('size', 0);
// your code for displaying the jQuery UI dialog (is it colorbox???)
// re-enabling the drop down
document.getElementById('select').setAttribute('size', document.getElementById('select').options.length);
}
</script>

Use disabled
$(this).attr("disabled","disabled");

Some good answers here. But still I had to make some additions.
$(document).on('keydown mousedown touchstart', 'select.disabled', function (e) {
e.preventDefault();
})

A simple solution based on CSS is this small fragment:
select:read-only * {
display: none;
}
This will make the options not available when the select is selected. This action mimics the behavior of the "readonly" attribute of the input.

Disable doubleclick event for an element in Opera

Is there a way to disable (with CSS, JS or jQuery) double-click for a given element?
The problem with Opera is that it displays a menu when I click on an element too fast. Note that I know how to disable this for me. I'd like to be able to disable this for all user that use the script.
The buttons in question are "next"/"previous" buttons and I use input type image for them, but the same happens with "a".

It turended out I need this:
/**
Disable text selection by Chris Barr, of chris-barr.com
*/
$.fn.disableTextSelect = function() {
return this.each(function(){
if($.browser.mozilla){//Firefox
$(this).css('MozUserSelect','none');
}else if($.browser.msie){//IE
$(this).bind('selectstart',function(){return false;});
}else{//Opera, etc.
$(this).mousedown(function(){return false;});
}
});
}
And then I could disable text selection on my button elements like this:
$(function(){ $('input[type=image]').disableTextSelect(); });
And now I can click buttons fast as hell and all works fine :-).

You cannot have a click and dblclick event handler attached on the same element because when you dblclick both the events are going to be triggered. In order to make it work there are few work arounds.
This might help you
Need to cancel click/mouseup events when double-click event detected
Looking at your problem there is a simple solution. In the click event handler once it is clicked set a disabled attribute or some class name(disabled). In the handler before exectuing your code checck for this attribute or class name. If it exists then dont do anything. After sometime remove this attribtue or class name. Try this
$("selector").click(function(){
var $this = $(this);
if(!$this.hasClass("disabled")){
//Do you stuff here
$this.addClass("disabled");
setTimeout(function(){
$this.removeClass("disabled");
}, 200);
}
});

JavaScript would do that for you.
DOMElement.ondblclick = (function () {return false;})();

how to make the menu close if it is clicked out

i have an menu with some values and i got someting hidden and while click on more button it shows like google more menu... if it is clicked out it is not hiding till the more menu is clicked once again
More<small>▼</small><div class="more list" id="one" style="display:none">test <span style="color:#329">|</span> test1 <span style="color:#169">|</span> test4</div></div>
Script:
function toggle(one)
{
var o=document.getElementById(one);
o.style.display=(o.style.display=='none')?'block':'none';
}
how to make it close while the mosuse clicks on any other place other than the menus

Try using the onblur event.

I see you've tagged this with jQuery, if that is an option, you can clear up the link a bit, like this:
More<small>▼</small>
And use unobtrusive script combined with event bubbling to your advantage, like this:
$(function() {
$(".more_link").click(function(e) {
$(this).next(".more").toggle();
e.stopPropagation();
});​​
$(".more").click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$(".more").hide();
});​
});
You can test it out here, this only closes the menu if you clicked neither the menu of the toggle, e.g. clicking one of the test links will not close it. If you want it to, just remove the $(".more").click(function(e) { e.stopPropagation(); }); portion.
It uses event.stopPropagation() to stop the click from bubbling up to document, which if happens (and would if you clicked anything else) triggers its click handler, closing all the .more elements.

I wouldn't use onBlur because it's not a good accessibility approach (for example if the user is using tab to navigate the page).
Look at this solution instead:
jQuery click event for document but ignore a div

Typically, I let the event bubble up to the 'body' or 'html' doc and check if the target is what i want (and/or isn't contained within what i want). If the event target is not contained within your menu, then perform your desired operation (in this case, hide the div).
i.e.
jQuery(document).ready(function(){
jQuery("html").bind("click", function(evt){
var $target = jQuery(evt.target);
var shouldShowMenu = $target.hasClass("menu_toggle");
shouldShowMenu |= $target.parents(".menu_toggle, .more_list").length;
if(!shouldShowMenu)jQuery(".more_list").hide();
});
});
NOTE: your markup would needs to be extended such that the "more" href becomes has a class attribute, class="menu_toggle"