I have a textbox on my asp.net MVC view which shows a JQuery UIi dialog on focus. On this dialog, I want to make sure that when OK button is clicked, the same textbox on parent page should get focus which showed popup. I tried to use JQuery focus after and before close like this:
$(this).dialog("close");
$("#DefaultCallFrom1").focus();
but It is not working. Please suggest a solution to this.
When initializing the dialog, use the close event to set the focus when the dialog is closed :
$(this).dialog({
close: function( event, ui ) {
$("#DefaultCallFrom1").focus();
}
});
jQuery UI Dialog Docs for the close event.
EDIT
If you're trying to apply focus after a button in the dialog is clicked, that should be as simple as :
$( "#dialog" ).dialog({
autoOpen: true,
buttons: [
{
text: "Ok", click: function() {
$( this ).dialog( "close" );
$('#DefaultCallFrom1').focus();
}
}
]
});
FIDDLE
Related
So I have some jQuery UI Dialogs and for user usability I think it would be best if users would be able to close the dialog box when clicking outside the box instead of having to click the small close button on the dialog box.
jQuery Code:
$(document).ready(function() {
var dlg=$('#createTeam').dialog({
title: 'Create a Team',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:600,
height:285,
clickOutside: true, // clicking outside the dialog will close it
clickOutsideTrigger: "#addEngineer",
close: function(event, ui) {
location.reload();
}
});
$('#createTeamLink').click(function(e) {
dlg.load('admin/addTeam.php');
e.preventDefault();
dlg.dialog('open');
});
});
Can anyone advise on what I need to add to the code above to be able to close the dialog box on mouse click outside of the box?
I'm not sure why the clickOutside : true property isn't working though I can provide a simple workaround. On the page with the modal, you can catch body click events like so:
$(document).click(function() {
dlg.dialog('close');
});
However, this will be ANY click event on the page, so we have to exclude clicking on the modal from firing this event handler. It seems you have already done this with e.preventDefault() however, so add the above code and it should work. A better solution would be to include a modal backdrop in your modal HTML, and catch click events on that. If you provide your HTML I'll give you an example of this.
I have text input field that will disable the "Set" button if the number entered is not between 45 and 105. When the dialog box is first opened, the button disable does not work, but when closed and reopened, it works all subsequent times. I am stumped. Any help would definitely be appreciated.
$("#dialog-2").dialog({
autoOpen: false,
modal: true,
buttons: {
"Set": function(){
$("#NumberEntry").on("input", function(){
if(errorCheck === false){
$(".ui-dialog-buttonpane button:contains('Set')").button("enable");
}
else {
$(".ui-dialog-buttonpane button:contains('Set')").button("disable");
}
});
$(this).dialog("close");
},
Cancel: function(){
$( this ).dialog( "close" );
}
}
});
I see the problem now. I had the button disable code block within the button itself, so that it didn't execute until I pressed the button, which is why it worked when the dialog box was re-opened (I was closing it with the "Set" button). I moved the code outside of the button and it works now. Thanks for your comments and time!
I am using jquery ui dialog. In the dialog i have 1 save button, when user click on the save button in the callback of the save button i am disabling it. My code :
$("#Form1").dialog({
width: 500, autoOpen: false, modal: true, resizable: false, draggable: false,
buttons: {
"Save": function (event, ui) {
$(event.currentTarget).button({ disabled: true });
... .
....
}
}
, beforeClose: function () {
//here how can i enable the save button
}
});
Now my problem is that when user open the dialog again the save button still disabled so thats why i want to enable the button at dialog beforeClose event. How can i do this?
The element you invoke the dialog on gets wrapped in a parent so title bar, buttons etc can be added. All the buttons have class ui-button
This should do what you need
beforeClose:function(){
$(this).parent().find('.ui-button').button({ disabled: false });
}
You might find it easier to enable and disable the button in the following way:
btn_save = $('#Form1').parent().find(':button:contains("save")');
//disable the save button
$(btn_save).prop('disabled', true).addClass('ui-state-disabled');
//enable the save button
$(btn_save).prop('disabled', false).removeClass('ui-state-disabled');
The added css class will give the button it's disabled css styling. Also note that the :contains selector is case sensitive.
I have a confirmation dialog in jquery that pops up and show some confirmation details. What I'm trying to do is that if the user clicks YES, I want to use THE SAME confirmation dialog box but with a smaller text like "Please wait..." or something. For that, I would want to ajust my dialog dimensions accordingly (meaning, after the user clicks YES, I want my dialog to be smaller since there will only be a small text inside of it). How do I achieve something like this? How do I change the size of my dialog after the user has clicked YES?
Also, I know in javascript confirmation box, if the user clicks OK, TRUE is return, else false is return. Is it the same for jquery modal confirmation boxex? How do I know if the user hit YES or CANCEL?
Thank you
I think this is what you are looking for. You can change the height of your confirmation box:
$( "#dialog-confirm" ).dialog({
width : 100,
height:100
});
And can add buttons to it and track the clicks:
$( "#dialog-confirm" ).dialog({
width : 100,
height:100,
modal: true,
buttons: {
"Ok": function() {
alert('ok');
$( this ).dialog( "close" );
},
Cancel: function() {
alert('cancel');
$( this ).dialog( "close" );
}
}
});
In addition to it, the documentation is way too in detail here. http://jqueryui.com/demos/dialog/
Demo : http://jsfiddle.net/zgN2X/2/
I want to disable the ESC key in an HTML page. How can I do this?
I have a form which is appearing as jQuery UI Dialog. Here if I click the ESC key, the form will close. I want to disable that.
Browsers (Firefox, Chrome...) normally bind the Esc key to the "stop loading current page" action. Any other behaviour needs to be specifically coded with JavaScript.
The jQuery UI Dialog has a closeOnEscape setting. Just set it to false:
Initialize a dialog with the closeOnEscape option specified:
$( ".selector" ).dialog({ closeOnEscape: false });
Get or set the closeOnEscape option, after init:
//getter
var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
//setter
$( ".selector" ).dialog( "option", "closeOnEscape", false );
$(document).keydown(function(e) {
if (e.keyCode == 27) return false;
});
*thanks Johan
The best way to do this is to figure out which dialog library you are using (colorbox? jquery ui? shadowbox) and disable the esc key (for example, in Colorbox you can set the escKey option to false).