Currently I am using a Jquery ui autocomplete, and after someone selects an option from a Jquery ui autocomplete, I am removing the focus from the textbox.
I would like to add the following functionality -
When someone clicks into the textbox again, I would like to leave the option that was previously selected in the text box, but highlight it (as if the text was double clicked), and redisplay all the choices.
How can this be done?
CURRENT CODE -
$(function () {
var availableItems = ['item1', 'item2', 'item3'];
$("#myTextBox").autocomplete({
source: availableItems,
minLength: 0,
select: function(event, ui) {
$('#myTextBox').blur();
}
}).focus(function () {
$(this).autocomplete("search");
}); ;
});
Did you try to put
$(this).select();
in the focus function()?
Also try
$(this).autocomplete("search", "");
to enhance an empty search
I'm dragging sortables from a grey ul list (parent group) to two yellow lists underneath. I am trying to have a hidden button in the grey sortable list appear when dragged into the yellow sortable lists.
I'm using a stupid method of display none and using a mouseUp event handler to make the hidden button appear. It's not achieving the desired effect.
it is also important that the hidden button only appear in the bottom yellow boxes and not appear in the grey sortable lists.
Any help would be much appreciated. Thanks.
http://jsfiddle.net/equiroga/4At6J/4/
//Show js
$(function(){
$(document).mouseup(function(){
$('.button, .button2, .button3, .button4, .button5').show();
});
});
//Sortable js
$(function () {
$("#sortable1").sortable({
helper: "clone",
connectWith: ".sortable",
start: function (event, ui) {
$(ui.item).show();
clone = $(ui.item).clone();
before = $(ui.item).prev();
position = $(ui.item).index();
},
beforeStop: function (event, ui) {
if ($(ui.item).closest('ul#sortable1').length > 0) $(this).sortable('cancel');
},
stop: function (event, ui) {
if (position == 0) $("#sortable1").prepend(clone);
else before.after(clone);
}
});
$(".sortable").sortable({connectWith: ".sortable:not('#sortable1')"});
});
Remove the top code and add this in the stop function:
ui.item.children('.button').show();
EDIT
I added a bt common class to all the buttons and then:
ui.item.children('.bt').show();
http://jsfiddle.net/stevemarvell/4At6J/6/
is there a way to manually open close the jquery ui tooltip? I just want it to react to a click event toggling on/off. You can unbind all mouse events and it will rebind them when calling .tooltip('open'), even though that should not initialize or set events imo, since if you try to run .tooltip('open') without initializing, it complains loudly about not being initialized.
jltwoo, can I suggest to use two different boolean switches to enable auto-open and auto-close? With this change your code will look like this:
(function( $ ) {
$.widget( "custom.tooltipX", $.ui.tooltip, {
options: {
autoShow: true,
autoHide: true
},
_create: function() {
this._super();
if(!this.options.autoShow){
this._off(this.element, "mouseover focusin");
}
},
_open: function( event, target, content ) {
this._superApply(arguments);
if(!this.options.autoHide){
this._off(target, "mouseleave focusout");
}
}
});
}( jQuery ) );
In this way, initializing the tooltip as:
$(someDOM).tooltipX({ autoHide:false });
it shows by itself when the mouse is over the element but you have to manually close it.
If you want to manually control both open and close actions, you can simply use:
$(someDOM).tooltipX({ autoShow:false, autoHide:false });
If you want to just unbind the events and woudn't like to make your own custom tooltip.
$("#some-id").tooltip(tooltip_settings)
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
$("#some-id").attr("title", "Message");
$("#some-id").tooltip("open");
mouseout blocks the tooltop disappearing by moving the mouse cursor
focusout blocks the tooltop disappearing by keyboard navigation
The tooltip have a disable option. Well i used it and here is the code:
$('a').tooltip({
disabled: true
}).click(function(){
if($(this).tooltip('option', 'disabled'))
$(this).tooltip('option', {disabled: false}).tooltip('open');
else
$(this).tooltip('option', {disabled: true}).tooltip('close');
}).hover(function(){
$(this).tooltip('option', {disabled: true}).tooltip('close');
}, function(){
$(this).tooltip('option', {disabled: true}).tooltip('close');
});
Related to my other comment, I looked into the original code and achieved manual open/close by extending the widget and adding a autoHide option with version JQuery-UI v1.10.3. Basically I just remove the mouse listeners that were added in _create and the internal _open call.
Edit: Separated autoHide and autoShow as two separate flags as suggested by #MscG
Demo Here:
http://jsfiddle.net/BfSz3/
(function( $ ) {
$.widget( "custom.tooltipX", $.ui.tooltip, {
options: {
autoHide:true,
autoShow: true
},
_create: function() {
this._super();
if(!this.options.autoShow){
this._off(this.element, "mouseover focusin");
}
},
_open: function( event, target, content ) {
this._superApply(arguments);
if(!this.options.autoHide){
this._off(target, "mouseleave focusout");
}
}
});
}( jQuery ) );
Now when you initialize you can set the tooltip to manually show or hide by setting autoHide : false:
$(someDOM).tooltipX({ autoHide:false });
And just directly perform standard open/close calls in your code as needed elsewhere
$(someDOM).tooltipX("open"); // displays tooltip
$(someDOM).tooltipX("close"); // closes tooltip
A simple hotfix, until I have the time to do official pull request, this will have to do.
Some compilation from other SO questions.
Example
Show tooltip on hint click, and hide tooltip on elsevere click
$(document).on('click', '.hint', function(){ //init new tooltip on click
$(this).tooltip({
position: { my: 'left+15 center', at: 'center right' },
show: false,
hide: false
}).tooltip('open'); // show new tooltip
}).on('click', function(event){ // click everywhere
if(!$(event.target).hasClass('hint'))
$(".hint").each(function(){
var $element = $(this);
if($element.data('ui-tooltip')) { // remove tooltip only from initialized elements
$element.tooltip('destroy');
}
})
});
$('.hint').on('mouseout focusout', function(event) { // prevent auto hide tooltip
event.stopImmediatePropagation();
});
I am trying to add a 'blur' event to a jQuery combobox using the code below, but its always not firing. What would be the right way of attaching a 'blur' event to a jQuery combobox?
$(document).ready(function() {
$("#dropdown_sel").combobox();
$($('.ui-combobox-input')[0]).css('width', '500px');
$("#toggle").click(function() {
$("#dropdown_sel").toggle();
});
$("#dropdown_sel").blur(function() {
alert('on blur of combo');
});
});
I even tried the code below but it fails to fire, where I use focusout event rather than blur event. I am using IE 8.x.
$("#dropdown_sel").focusout(function () { alert('on blur of combo'); });
You can test the code at this link, where I already have combobox code set up for focusout event: http://jsfiddle.net/vZwRk/79/
Try using event-change:
$( "#dropdown_sel" ).bind( "autocompletechange", function(event, ui) {
alert('on blur of combo');
});
I am using the UI jquery sortable plugin and have found some code that I am going to use but there is one part I don't understand. It is "onChange: "function(serialized) { widgets_positions(); }"
onChange doesn't appear in the documentation. Widgets_positions is a function that I understand about which tracks the positions of the objects being moved around. But I need to understand the 'onChange: function(serialized)' part.
$('#col').Sortable(
{
accept: 'widget',
opacity: 0.5,
helperclass: 'helper',
onChange: function(serialized) { widgets_positions(); },
handle: '.widget_title_bar'
}
);
I would imagine that is supposed to be change:
$( ".selector" ).sortable({
change: function(event, ui) { ... }
});
I have used the change event before when the order of the list is changed. ui gives you access to the dom element changed.
You could put your function call in the change event.