I want to display an jquery UI dialog when a user focues a certain input box. It works the problem is, that the input box won't get the focus after closing the dialog, meaning user clicks into input box, dialog is opened. User closes dialog -> input box does not have focus.
The only way to actually focus the input box is ti click into it a second time while the dialog is already displayed. This is pretty annoying. i would like the inputbox to have focus after closing the dialog.
$(function() {
$( "#identifiersDialog" ).dialog({autoOpen: false});
});
$('#identifiers').focus(function(event) {
$( "#identifiersDialog" ).dialog('open');
});
You could use
$(function(){
InitiliseInput();
});
function InitiliseInput(){
$('#identifiers').bind('focus', function() {
$('#identifiersDialog').dialog({ close: function() {
$('#identifiers').unbind('focus').focus().blur(function(){ InitiliseInput()});
}});
});
}
Working example here http://jsfiddle.net/RCBQs/1/
The blur function then resets the dialog once the focus has moved away from the input, so that refocusing opens the dialog again.
This should help.
$(function() {
$( "#identifiersDialog" ).dialog({autoOpen: false, close: function() { $('#identifiers').focus() }});
});
$('#identifiers').focus(function(event) {
$( "#identifiersDialog" ).dialog('open');
});
Related
So I have a jQuery UI dialog with some buttons inside (full example here => http://jsfiddle.net/VLr5G/3/):
<div id="test">
<button>Btn 1</button>
<button>Btn 2</button>
<button>Btn 3</button>
</div>
What I want to do is force the focus on the "Close" button - I have tried applying the following code when the dialog opens:
open: function() {
$(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();
}
Unfortunately the focus always keeps getting on the first button inside the dialog. Is this a bug, or am I missing something ?
Thanks a lot in advance for your help !
UPDATE
Okay so the answer from Stanley works fine with my first example... But try to change the version of jQuery UI => http://jsfiddle.net/VLr5G/10/
From what I could find so far, it worked until jQuery UI 1.10.0.
You are not getting the close button correctly.
You should do this instead:
$(document).ready(function() {
$('#test').dialog({
buttons: {
'Close': function() {$(this).dialog('close');}
},
open: function() {
$(this).parent().find('.ui-dialog-buttonpane button:eq(0)').focus();
}
});
});
Working jsfiddle: http://jsfiddle.net/GG7EP/2/
UPDATE
To make it work with jQuery 1.10.0 or above, call the button's focus function in focus event
$(document).ready(function() {
$('#test').dialog({
buttons: {
'Close': function() {$(this).dialog('close');}
},
focus: function() {
$(this).parent().find('.ui-dialog-buttonpane button:eq(0)').focus();
}
});
});
JsFiddle: http://jsfiddle.net/V3P4t/
If I load a JQuery UI Dialog without loading external content, the dialog can be closed with the "Close" button and the dialog can be re-opened multiple times. If I load content in, neither of these two capabilities works. Code below. Any hints?? Thanks in advance!!
$(document).ready(function() {
$('#viewdonationsdialog').dialog({
autoOpen:false,
modal:'true',
width:600,
height:400,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
$('#viewdonationslink').click(openDonationsDialog);
});
var openDonationsDialog = function(){
/* Including the next line causes failure.
Removing it results in success (except, of course, that my page content isn't loaded!! */
$('#viewdonationsdialog').load('/donationsdata');
/* And then there's the rest... */
$('#viewdonationsdialog').dialog('open');
return false;
};
I am using a jQuery-UI dialog box that has three fields on it together with an 'Update' and 'Cancel' buttons.
When the dialog is opened, I would like to have the focus set to the first field in that dialog, say it was calle 'ID' but from the looks of it, the focus is set to my 'Cancel' button.
How can I override this and have the focus set to 'ID' field when opened?
here the open function is called after the dialog box open happens.
$( ".selector" ).dialog({
open: function(event, ui) {
$('#yourText').focus();
}
});
To set default focus on cancel button pass the index of the button. The default focus is on first button ie index 0. To set focus on second element you can use following code
$(this).parents('.ui-dialog-buttonpane button:eq(1)').focus();
Source code to create a dialog with two buttons and set focus on a button
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog" ).dialog({
modal: true,
minHeight:200,
minWidth:190,
buttons: {
Delete: function() {
// do something
},
Cancel: function() {
$( this ).dialog("close");
}
}
});
//to set focus on cancel button
$(this).parents('.ui-dialog-buttonpane button:eq(1)').focus();
});
I want to hide the close button in the title bar of the dialog box. I want the user strictly complete the steps in dialog, so restrict the ways of hiding the dialog.
Try this:
$(".ui-dialog-titlebar-close").hide();
You can hide close button on dialog's open event.
Ref : http://jqueryui.com/demos/dialog/#event-open
This event is triggered when dialog is opened.
Code examples
Supply a callback function to handle the open event as an init option.
$( ".selector" ).dialog({
open: function(event, ui) { ... }
});
Bind to the open event by type: dialogopen.
$( ".selector" ).bind( "dialogopen", function(event, ui) {
...
});
Even better, use CSS...
.ui-dialog-titlebar-close {
display:none;
}
I am trying to override close method of Jquery Dialog method.
Code :
jQuery.Dialog.close = function() {
alert('my close');
}
But its not working. Please help.
There is an event called beforeClose which would allow you to do what you want, I think. When it fires, you can hide the dialog, then return false, which would prevent the dialog from actually closing.
$( ".selector" ).dialog({
beforeClose: function(event, ui) {
$(this).hide();
return false;
}
});
Reference: http://jqueryui.com/demos/dialog/ under the Events tab below the example
You're setting it up wrong. Check this out to see how to do it correctly.
Ok, so that link doesn't take you where I thought it would. Here's the relevant bit from jqueryui.com.
closeType:dialogclose
This event is triggered when the dialog is closed.
Code examples
Supply a callback function to handle the close event as an init option.
$('.selector').dialog({
close: function(event, ui) { ... }
});
Bind to the close event by type: dialogclose.
$('.selector').bind('dialogclose', function(event, ui) {
...
});