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?
Related
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.
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 });
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: "" });
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);