How can I disable the tooltip of the Jquery UI dialog's close button?
For example check it here: jquery ui dialog demo
You should stay with mouse on the close button, and a very annoying Close tooltip will appear.
Thank you!
See api reference
$( "#dialog" ).dialog( "option", "closeText", false );
or
$( "#dialog" ).dialog({ closeText: false });
see jsfiddle
I found above code seems to show "FALSE" as a tooltip in my application.
I solved the issue by changing it to:
$( "#dialog" ).dialog({ closeText: "" });
This will not bring up the tooltip. Would love to hear if anyone feels I got it incorrectly...
This code will only replace the word "Close" with the word "False" in current versions of JQuery UI.
$( "#dialog" ).dialog({ closeText: false });
The correct way to handle this is as follows (according to Damien's comment):
$( "#dialog" ).dialog({ closeText: null });
Related
I'm trying launch a datepicker in dialog mode via clicking on some text.
<input type='hidden' id='datepicker'>
<div onclick="getdate()">
Click on me to launch DatePicker dialog
</div>
where
function getdate() {
$( "#datepicker" ).datepicker("dialog", "10/12/2013", function(){alert("wibble");},{dateFormat: "dd/mm/yy"},[20,20]);
}
Default dialog behaviour (no position) is fine (pops up centre screen), apart from Firefox which goes for top centre. Specifying position as Number[2] works fine as well.
The JQueryUI api documentation says:
pos
Type: Number[2] or MouseEvent
The position of the top/left of the dialog as [x, y] or a MouseEvent that contains
the coordinates. If not specified the dialog is centered on the screen.
Unfortunately, they have no example of using a MouseEvent and I fear that I am reaching the limits of my ability in this area. I tried various formats such as:
$( "#datepicker" ).datepicker("dialog", "10/12/2013", function(){alert("wibble");},{dateFormat: "dd/mm/yy"},$.Event("mouseclick"));
to no avail. Googling for datapicker dialog method seems to bring up a plethora of websites happy to parrot the api documentation without expanding on it.
How does one pass in a MouseEvent to this method?
Update
Based on j08691's answer, this is the syntax that I was looking for:
$( "#datepicker" ).datepicker(
"dialog",
"10/12/2013",
function(){alert("wibble");},
{dateFormat: "dd/mm/yy"},
event
);
Update 2
A bit more diddling on another computer with different versions of some browsers and a bit more research has led me to the following as my final answer:
<input type='hidden' id='datepicker'>
<div onclick="getdate(event)">
Click on me to launch DatePicker dialog
</div>
function getdate(e) {
e = e || window.event;
$( "#datepicker" ).datepicker(
"dialog",
"10/12/2013",
function(date){changeDate(date);},
{dateFormat: "dd/mm/yy"},
e
);
}
(where changeDate is another function)
It looks like the reason that there's not much on the web about this is that the only semi-useful, cross-browser event object mouse properties that you would use are event.pageX and event.pageY.
For example:
function getdate() {
$("#datepicker").datepicker("dialog", "10/12/2013", function () {
alert("wibble");
}, {
dateFormat: "dd/mm/yy"
}, [event.pageX, event.pageY]);
}
See this jsFiddle example and click on the grey div. The datepicker will be placed at the coordinates of where the mouse clicks on the div.
Try this :
<div onclick="getdate()">
<input type='hidden' id='datepicker'>
Click on me to launch DatePicker dialog
</div>
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 working on a rotator using jquery ui and can get it to pause on hover with this:
$(document).ready(function(){
$("#rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#rotator").hover(
function() {
$("#rotator").tabs("rotate",0,true);
},
function() {
$("#rotator").tabs("rotate",5000,true);
}
);
});
This only problem is that it stops on the last item in the list and won't rotate through the first item unless I make it:
$(document).ready(function(){
$("#rotator > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#rotator").hover(
function() {
$("#rotator").tabs("rotate",0,true);
},
function() {
$("#rotator").tabs("rotate",5000,true);
}
);
});
but then the hover doesn't work.
Any ideas how to get it to cycle through the list and pause on hover?
For some reason I had a really old version of jquery and jquery ui. I updated to the version we are running on our site (1.7.2 and jquery ui 1.82). Could run the newest versions, but we have too many issues with legacy code.
guys!
I just commited an extension to make Pause on Hover for jQuery UI Tabs
jQuery UI Tabs Rotate: Pause on Hover
Enjoy it!
how can focus on first input in active content when it changed ?
$( ".selector" ).accordion({
activate: function(event, ui) {
$(ui.newPanel).find("input:first").focus();
}
});
Originally answer was based on the jQuery Accordion Demo, but the API has changed in the meantime.
I'm working with JQuery UI control and I had a trouble with focusing the first input of my page. Here is the solution:
setTimeout(function () { $("#dvCreateItem").find("input:first").focus(); }, 1000);
I am using a modal dialog (provided by jQuery UI). Now on the dialog box there are input text boxes with class date. I want to bind Datepicker with these inputs. I've written
`$(".date").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
showOn: 'button',
yearRange: '1970:2015',
buttonImage: '../../Content/calendar.gif',
buttonImageOnly: true
});
in ready function. The problem is datepicker is opening in the disabled page behind the modal dialog. How can I overcome this problem?
Have you tried z-index or rearranging your DOM?