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();
});
Related
How can I set a callback function to be ran when a modal dialog is closing, without the click of a button or close (x) icon?
you can also try,
$( ".selector" ).dialog({
beforeClose: function(event, ui) { ... }
});
This event is triggered when a dialog attempts to close. If the beforeClose event handler (callback function) returns false, the close will be prevented.
Why dont you try the event close of jQuery UI dialog?
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) {
...
});
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');
});
I wang to use jQuery UI to implement a delete confirmation. I want to use a link to trigger the dialog. Here's my code:
delete
<script type="text/javascript">
$(function(){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
autoOpen: false,
buttons: {
"Okay": function() {
$( this ).dialog( "close" );
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
return false;
}
}
});
$( ".delete" ).click(function() {
$( "#dialog-confirm" ).dialog( "open" );
return false;
});
});
</script>
What I want to do is, when the user click on cancel, it does nothing. But when the user click on okay, then it will continue to go to www.google.com.
However, no matter okay or cancel I click, it remains nothing happens. Any idea?
Even if you do this:
$("a.delete").trigger("click");
You still won't get to google, because after it calls handlers, jQuery triggers an event on the object. It only calls native handlers for click events if the element is not a link.
You could do something like this:
window.location.href = $("a.delete").attr("href");
Or, you could have a hidden link on the page, like this:
delete
Then, on the click of the "Open" button, you could do this:
$("a.hiddenDelete").trigger("click");
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) {
...
});