(Note I have not yet tested this in IE FF or Safari, I'm hoping there is some setting on the autocomplete to make this work...)
In Chrome, when I type some text into a box that triggers a jQuery UI autocomplete dropdown to appear, the dropdown disappears when I switch focus to another application (my programming app Visual Studio).
Is there a setting to make the autocomplete drop down menu "stick" and remain visible when the browser loses focus in the operating system?
When you switch to another application an onblur event will be fired by the browser which is what hides the autocomplete menu. Your best bet to accomplish this "sticky" behavior is to attach an onfocus event handler to the window and open the autocomplete menu then.
$(function() {
var autocomplete = $( 'whatever' ).autocomplete();
$( window ).on( 'focus', function() {
autocomplete.autocomplete( 'search' );
});
});
I have a live example of this here - http://jsfiddle.net/RmALY/1/show/.
Related
Selection of words in an autocomplete input field (within a dialog) is not working properly when using JQuery UI in combination with Touch Punch. It seems to work if the autocomplete field is directly on the HTML page, but not in a dialog.
Note that selection by mouse is working perfectly in all cases, but selection by touch (i.e. on mobile device) not.
I have reduced the whole case to a few lines of HTML and JavaScript code.
Once with JQuery UI Touch Punch, once without JQuery UI Touch Punch.
I am able to reproduce the error with all combinations of browser and OS, e.g. Chrome on an iPhone, Chrome on an Android mobile as well as with Safari on an iPad,
Would be nice if somebody knows a workaround.
I think this behavior is a result of the fact that on one the one hand Touch Punch developers are not that smart and on the other hand jQuery UI seems to be not very cooperative with Touch Punch.
There are two ways how mouse event might be triggered:
browser might simulate click events after touch events
some library might simulate click events after touch events
Your example without Touch Punch works because mobile browsers currently simulate click events.
So how Touch Punch works and how it messes things up? If you look at the source code https://github.com/furf/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js you'll see that it wraps $.ui.mouse.prototype._mouseInit with its own code and the main intention is to attach various touch-related listeners for all widgets that inherit $.ui.mouse. So far so good. But what exactly those listeners do? The _touchStart handler runs a check using $.ui.mouse internal API:
self._mouseCapture(event.originalEvent.changedTouches[0])
to check if it needs to simulate mouse events. The logic is: if there is no click handler in the widget, there is no need to simulate click. It looks OK at the first glance but what's going wrong? The autocomplete widget puts its dropdown menu to the outside context of the containing dialog and thus touch events on the menu items actually hit listeners registered by touch-punch for the dialog (or rather for its draggable and resizable sub-components). But the dialog subcomponents have no click listeners and thus events are not simulated by the library. Moreover, draggable in your version (see https://github.com/jquery/jquery-ui/blob/1-11-stable/ui/draggable.js) calls
this._blurActiveElement( event );
unconditionally and this seems to stop browser from generating mouse events. So now neither browser nor library simulate click event.
It seems that in the development branch of jQuery UI the bug is fixed https://github.com/jquery/jquery-ui/commit/8c66934434214ab92cbcf46240beb739154fdfbf but for a bit different reason. This fix seems to be available in the jQuery UI 1.12.1 but not in your 1.12.0
So the simplest solution seems to be to upgrade jQuery UI to 1.12.1
See working demo with jQuery UI 1.12.1 at https://jsfiddle.net/cjvgv102/1/ and http://jsfiddle.net/cjvgv102/1/embedded/result/
Ugly hack (stop here unless you really have to)
If for some reasons you can't upgrade jQuery UI, you can do a hack by explicitly creating a fake mouse object on the dropdown and calling its _mouseInit so event will not be handled by dialog's sub-components.
$( "#demoDlg" ).dialog({
autoOpen: false,
modal: true,
buttons: {
"Close": function() {
$( this ).dialog( "close" );
}
},
open: function(event, ui) {
$( "#words" ).autocomplete({
source: ["these", "are", "some", "words"]
});
// super-hack
$( "#words" ).autocomplete("instance").menu.element.mouse().mouse("instance")._mouseInit();
}
});
See full demo at
https://jsfiddle.net/3ptgks3t/1/
I am trying to do something similar to what this page is doing.
The only difference is that the jQuery UI dialog I use is modal.
I tried editing the script in the page to make the jQuery UI dialog modal.
$("#dialog-modal").dialog(
{
modal: true, // added this line to make dialog modal
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
maxHeight: 300,
initCallback: function()
{
this.code.set('<p>Lorem...</p>');
}
});
}
});
I then clicked on the insert link button(the 3rd button from the right in the toolbar). This shows another jQuery UI modal dialog with a form.
I noticed that I cannot get the focus of the text fields. I cannot type anything into them.
The code works fine if I don't make the the first dialog modal.
Any idea how to circumvent this?
I ran into the same problem. This behavior is a result of jQuery UI handling focusin.dialog event on the document, and putting the focus back to the last jQuery UI dialog in the stack (using selector ".ui-dialog:visible:last"). I solved the problem by calling this code right after my modal dialog was created:
setTimeout(function() {
$(document).unbind("focusin.dialog");
}, 100);
I used setTimeout, because jQuery UI also uses setTimeout to bind this event. I was able to fix it thanks to this answer: jQuery UI Focus Stealing. I also tried upgrading to jQuery UI 1.11.4 but that does not solve the problem.
I'm developing jQuery Mobile (jQm) app.
I wanna utilize taphold event to some crucial elements, such as remove button, to assure, that this element is secured from unwanted trigger.
I created Remove button on jQm popup and aded some JS to it, but I cannot force default action to quit, not with event.preventDefault() and event.stopImmediatePropagation(), nor with return false.
I prepared jsFiddle as duplicate of my code. The popup there contains simple progress bar as indicator of holded tap. You can try it here: jsFiddle (note: HTML5 data tag taphold="true" is not jQm default)
As a workaround, I'm currently replacing <a href="#" data-role="button"...></a> with <div>styled like button. This works well, since it doesn't have any default action, but I'm curious why the "proper" solution doesn't work?
$("a:jqmData(taphold='true')").bind("vmousedown vmouseup", function(event) {
event.preventDefault();
event.stopImmediatePropagation();
The event.preventDefault(); and event.stopImmediatePropagation(); used in the above piece of code, refer to the vmousedown and vmouseup events and not to every event which is bound to the selected element(s).
This means that the default behaviour for the click event still exists. So when you click the remove button, the click event is triggered and that's why the pop up closes immediately.
I hope this helps.
I set up the tooltip and dialog like so:
$(document).ready(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$( document ).tooltip();
but when i open the dialog later its close tooltip always appears on opening, NOT just on hovering over close as expected. Has anyone else seen this behaviour/knows why it occurs?
Setting the items option to exclude the dialog's titlebar close widget seems to work well for me in jQueryUI 1.9+
$( document ).tooltip({
items: '*:not(.ui-dialog-titlebar-close)'
});
Found a solution:
$( "*" ).tooltip();
$('.ui-dialog-titlebar-close').tooltip('disable')
works in place of the above
Tooltip appears because a button automatically gets focus when a dialog opens (this is a strange behavior). You need to add an attribute "tabindex" to any element in the dialog to avoid this.
For example:
<table tabindex="1">
According to dialog's documentation:
Upon opening a dialog, focus is automatically moved to the first item
that matches the following:
The first element within the dialog with the autofocus attribute
The first :tabbable element within the dialog's content
The first :tabbable element within the dialog's buttonpane
The dialog's close button
The dialog itself
So my solution was to add autofocus to an empty div at the top of the form I was using in my dialog:
<form action="" method="post" accept-charset="utf-8">
<div class="stealFocus" autofocus></div>
Good solution for me with 1.11.3 jQuery and 1.10.4 jUI
$.ui.dialog.prototype._focusTabbable = function(){};
It will desactivate autofocus and dont see auto popup anymore
I use :
$( ".selector" ).dialog({ closeText: "" });
I am using the splitview plugin of jQuery.mobile jQuery Mobile - Splitview . I am using jQuery.mobile popups as context menus which are fired on taphold event. Right now I am opening popus by
$("#myPopup").click();
where myPopup is popup defined in HTML.
In this way I can open popup, but I can not position the popup to the position of tap. Does anyone have an idea?
Something like
$( ".selector" ).popup( "open", {x:event.pageX, y: event.pageY} );
does not work because of splitview plugin. Without this plugin it works perfectly.
(and of coarse, I know, that taphold event does not contain information about position, that was just an example. I tried it also with pure numbers and it does not work either)
Well, my solution is not beautiful, but it works. In HTML file I defined new DIV and before opening context menu I position it.
$("#contextDiv").css({
position: "absolute",
top: contextMenuTapY,
left: contextMenuTapX
});
Then I open the context menu relatively to this DIV
HTML:
JS:
$("#aPopupElement").click();