I have a jquery dialog window where the user can provision a new server with different requirements. Now, when the user clicks 'Save' we want a confirmation window to open up to confirm that the user wants to do this.
My main concern is that this is a dialog box within a dialog box.
Here is the code for the dialog box
$('#newenvironment').dialog({
autoOpen: false,
buttons: {
'Save': function() {
var url = "./environment/new/";
// There is code here that processes the fields
// code to send the data to the server
// URL gets built
c.post(url);
$('#newenvironment').dialog('close');
},
'Cancel': function() {
$('#newenvironment').dialog('close');
}
},
modal: true,
width: 640
});
Thanks :)
You could do something like along these lines:
HTML:
<div id="mainDialog">
<div id="area">
<h2>Server requirements </h2>
Enter something: <input type="text" name="yada"/>
<div>
</div>
<div id="confirmDialog">Are you sure?</div>
Javascript:
$("#confirmDialog").dialog({
height: 250,
modal: true,
autoOpen: false,
buttons: {
"Yes": function() {
$(this).dialog("close");
// show some sort of busy indicator here
var url = "./environment/new";
// code to process inputs from main dialog
//c.post(url);
// clear busy indicator here
},
"No": function() {
$(this).dialog("close");
$("#mainDialog").dialog("open");
}
}
});
$("#mainDialog").dialog({
height:350,
modal: true,
autoOPen: false,
buttons: {
"Save": function() {
$(this).dialog("close");
$("#confirmDialog").dialog("open");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
This will close the main dialog while the confirmation dialog is being displayed, and reopen it if you don't confirm. Alternatively, you could leave the main dialog open while the confirmation dialog is open. In that case, the main dialog will be blocked until the user exits the confirmation dialog.
Related
My page has two jquery dialogs. There is no issue if both open in different time. The issue only comes when two dialog opens together. In my case first dialog opens by user action and second dialog open by system(this dialog will trigger when session timeout happened). Now first open by user and immediately second dialog opened now I need restrict user to click anything on dialog 1. Basically we should restrict user to do any action dialog one.
I tried with resizable: false, draggable: false But these not helped. Is there any way to fix this issue.
Dialog 1
$('.status-dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
closeOnEscape: false,
buttons: [{
text: yes,
click: fun1
},
{
text: no,
click: fun2
}]
});
Dialog 2
$('body').append('<div title="Timeout" id="timeout-dialog">' expired </div>');
$('#sessionTimeout-dialog').dialog({
autoOpen: false,
resizable: false,
draggable: false,
width: 400,
modal: true,
closeOnEscape: false,
open: function () { $(".ui-dialog").hide(); },
buttons: {
"Continue": function () {
$(this).dialog('close');
}
}
});
Maybe have your code to close all other dialogs right before the system triggers one for itself? You can certainly add this condition somewhere between your codes where the dialog will be triggered system-wise.
I am dynamically appending a <div> to the body of my webpage. This <div> does not exist on my .html page.
Within this <div> I am creating a Jquery UI YES NO box. Quite simply, it will 'do something' and close the box when YES, and just close the box when NO.
I have a working piece of code to create this box. However, frequently it takes two clicks of the YES button to work, which is very confusing. You'll see I have used a variety of methods to close the box.
$(function () {
$('body').append('<div id="dialog-confirm"></div>').click(function (e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
$("#dialog-confirm").dialog({
autoOpen: true,
height: 200,
width: 200,
modal: true,
title: 'Choose item?',
buttons:
{
'YES': function () {
$(this).dialog("close");
//$("#dialog-confirm").dialog("close");
//$('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
},
'NO': function () {
$(this).dialog("close");
//$("#dialog-confirm").dialog("close");
//$('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
}
}
});
});
The problem is that there is a race condition between your adding the div and attaching the click handler. Sometimes it happens before, sometimes after. That's why you get inconsistent click behavior. Try the following:
$(function() {
$('body').append('<div id="dialog-confirm"></div>');
$("#dialog-confirm").dialog({
autoOpen : true,
height : 200,
width : 200,
modal : true,
title : 'Choose item?',
buttons : {
'YES' : function() {
$(this).dialog("close");
// $("#dialog-confirm").dialog("close");
// $('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
},
'NO' : function() {
$(this).dialog("close");
// $("#dialog-confirm").dialog("close");
// $('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
}
}
});
$('#dialog-confirm').click(function(e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
});
I have the following simple dialog:
function confirmDialog(message, title) {
var returnvalue;
if ($("#confirmDialog").length == 0)
$('body').append('<div id="confirmDialog"></div>');
var dlg = $("#confirmDialog")
.html(message)
.dialog({
autoOpen: false,
minHeight: 50,
title: title,
show: {
effect: "explode",
duration: 250
},
hide: {
effect: "explode",
duration: 250
},
buttons: {
"OK": {
text: "OK",
class: "",
click: function () { returnvalue = true; $("#confirmDialog").dialog("close"); }
},
"Cancel": {
text: "Cancel",
class: "",
click: function () { returnvalue = false; $("#confirmDialog").dialog("close"); }
}
},
modal: true
});
$('#confirmDialog').dialog("open");
return returnvalue;
}
very simple implementation. My problem is that when I run through the script, at the end, when it returns the variable returnvalue is undefined, meaning, it did not set it to either true or false depending on which button was clicked.
I have tried setting it to var returnvalue = false; but it never gets a different value no matter which button I click.
Any help is appreciated!! Thank you!
EDIT:
I believe I noticed why the variable doesn't get set. I am calling this dialog from the click event from another dialog, after the user clicks on the "Save" button of the parent dialog, this one pops up. Now, since it is contained in a function, it does not wait for my input, meaning, it doesn't "see" that I clicked either "OK" or "Cancel". How can I fix this?
jQuery dialogs do not block execution like the built in javascript confirm() function. I can suggest two possible solutions:
Pass "ok" and "cancel" callbacks into your confirmDialog function.
Have your confirmDialog function return a promise object that you resolve after a button is clicked and have the calling function wait for that to resolve.
I prefer option 2.
I would have the button clicks trigger an event before they close the dialog, then I would listen for that event to happen in the parent process.
parent dialog opens
user clicks save
opens confirmation dialog
user closes confirmation dialog
confirmation dialog triggers "ok" or "canceled" event depending
parent dialog is listening for "ok" or "canceled" event
parent dialog reacts accordingly
confirmation dialog buttons
buttons: {
"OK": {
text: "OK",
class: "",
click: function () { $(this).trigger("ok"); $("#confirmDialog").dialog("close"); }
},
"Cancel": {
text: "Cancel",
class: "",
click: function () { $(this).trigger("cancel"); $("#confirmDialog").dialog("close"); }
}
}
parent dialog, or document.ready()
$("#confirmDialog").on({
"ok":function(event,ui){
//save work
},
"cancel":function(event,ui){
// cancel work
}
},null,null);
I am using Jquery UI Dialog to display a popup box
I have a page with a grid on. Each row has an icon to open a dialog box
If there are lots of rows and you need to scroll down and click a row at the bottom, then when the dialog box opens it also scrolls the page to the top again
Is there any way to prevent this happening?
I just want the dialog box to be opened and the scroll position of the page to be maintained
$('#AmendLineDialogBox').dialog({
autoOpen: true,
modal: true,
closeOnEscape: true,
buttons:
{
'Ok': function () {
// ...snip
$(this).dialog("close");
},
'Cancel': function () {
$(this).dialog("close");
}
},
position: 'center',
title: 'Amendment'
});
You can do chaining like this:
$('#AmendLineDialogBox').click(function(e){
e.preventDefault(); //<--------------^-------prevent the default behaviour
}).dialog({
autoOpen: true,
modal: true,
closeOnEscape: true,
buttons:
{
'Ok': function () {
// ...snip
$(this).dialog("close");
},
'Cancel': function () {
$(this).dialog("close");
}
},
position: 'center',
title: 'Amendment'
});
I have a jQuery UI dialog which is initialized
$('#jqDialog').dialog({
autoOpen: false,
modal: true,
resizable: false,
buttons: { 'Ok': function () { $(this).dialog('close'); } },
});
and then I want to change the buttons programatically w/o re-initializing the plugin instance.
$('#jqDialog')
.dialog('options',
{
buttons: {
'Ok': function () {
$(this).dialog('close');
store(id);
},
'Cancel': function () { $(this).dialog('close'); }
}
})
.dialog('open');
When the dialog window is opened it still have the original button. With the Button plugin you have to call .button("refresh"). Is there a similar method that needs to be called with the Dialog plugin?
What you have just needs a tweak, the method name is 'option' (no s) like this:
.dialog('option',
This works even when the dialog's open, you can test it out here.
You could destroy the dialog first by calling $dlg.dialog('destory'). and reevaluate the dialog you want.
The only wrong thing in your code is the use of the word options instead of option as in the following code
$("jqDialog").dialog("option", "buttons",
{
"Ok": function() {
$(this).dialog("close");
}
});