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/
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 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
I am new to jQuery but have already implemented successfully several modal dialogs using the jqueryUI dialog widget. In trying to implement another one, the modal dialog opens, but the code continues on to execute without stopping for user input. Using jQuery 1.7.1 and jquery-ui-1.8.16.
Here is the definition of a "prototype" of the dialog (it is a "prototype" because it doesn't take the actions on the "OK" selection that would be needed to meet requirements):
var $confirm = $('#confirm');
$confirm.dialog(
{
autoOpen:false,
width:440,
modal:true,
buttons:
{
OK: function()
{
$( this ).dialog( 'close' );
},
Cancel: function()
{
$( this ).dialog( 'close' );
}
}
});
Here is some test code that opens the dialog:
[ some javascript that does error checking]
alert('stop1');
$('#confirm').dialog('open');
alert('stop2');
[ more javascript including submitting the form]
What happens is the the first alert displays. Upon clicking on it the dialog opens along with the second alert, indicating that the dialog is not waiting for user input. The second alert is modal and prevents the dialog from being accessed. When it is clicked on, the form submits. This sequence shows that the dialog is not waiting for user input.
I have looked and looked at my other successfully implemented modal dialogs and do not see what might be causing this one to fail.
The dialog won't wait. Instead you'll want to use this as a point to decide what you want to happen. So instead of including additional code that you may or may not want to run after the dialog modal, let that be the last part of the function.
Then, with your OK or Cancel functions, make the call there to continue on with the workflow if they chose ok, or just hide and do whatever cancel stuff needs to be done with the cancel.
In short, the modal dialog will not pause execution of the javascript, it will just run the code to open the modal and keep on going.
You should use a promise:
function deferredConfirm(message) {
$('<div></div>').html(message).dialog({
dialogClass: 'confirmDialog',
buttons:
[{
text: buttonText,
click: function () {
$(this).dialog("close");
defer.resolve();
}
},
{
text: buttonText2,
click: function () {
$(this).dialog("close");
defer.reject();
}
}],
close: function () {
$(this).remove();
}
});
return defer.promise();
}
And to call it:
deferredConfirm("Oh No!").then(function() {
//do something if dialog confirmed
});
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).