Develop Reference

Opening a modal in a function call instead of .click()

I have this jquery function that opens up a modal anytime a button is pressed of type 'btnClr'
$(document).ready(function () {
$('#[id*=btnClr]').onload(function () {
$dialog.dialog('open');
});
var $dialog = $("#trUI").dialog({
autoOpen: false,
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function (e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function (e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
});
I'm trying to move it into a function so that it's opened anytime the function is called instead of any time the button is clicked.
I was able to achieve this with this code
function modalOpen() {
var $dialog = $("#trUI")
.dialog({
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function(e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function(e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
}
However, any one of the buttons will only work once.
Does anybody have any recommendations for how to do this?

I believe your issue is that you also are not "opening" the dialog. Move $dialog.dialog('open'); into the new function you wrote, so whenever it is called it will open it.

I was able to get it working. It was a TINY change in code. All I had to change was the call to dialog("open")
// some function{
$("#trUI").dialog('open'); //instead of $dialog.dialog("open")
}
$(document).ready(function () {
$("#trUI").dialog({
autoOpen: false,
title: "Edit Configurations",
width: "auto",
buttons: {
"Submit": function (e) {
AddKeyValue();
$(this).dialog('close');
},
"Cancel": function (e) {
ClearKeyVal();
$(this).dialog('close');
}
}
});
});

Jquery UI box - Takes more than 1 click to run

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");
});
});

How to pass the button name as variable in jquery dialogue box

I want to call the default action of dialogue box button, so please tell me how to pass the variable in side the dialogue box initialization. Here is my try for that :
Calling the dialogue box with default function of 'Yes' button
$( "#confirmComplete" ).dialog( "option", "buttons:Yes");
$( "#confirmComplete" ).dialog({
autoOpen: false,
resizable: false,
modal: true,
async:false,
position: 'top',
buttons: {
"Yes": function() {
//SOME FUNCTIOANLITY
}
}
})

Put the code in a named function, call the function:
function doYes() {
// some functionality
}
$("#confirmComplete").dialog({
autoOpen: false,
resizable: false,
modal: true,
async: false,
position: "top",
buttons: {
"Yes": doYes
},
});
doYes(); // Call the default button action

You could do:
buttons: {
"Yes": function() {
$(this).dialog("close");
return true;
}
}
You could also have a No button that closes dialog and return false;
Based on the true/false returned, you can take further actions.

Problems with appear confirm window when closing dialog?

When I add the card to the in box. Then it is possible to double click on the card, and dialog pop up. In the dialog I have Tow buttons (Save) and (Cancel). When I press Cancel buttons a confirm window pop-ups.
I want when I press the close in the right corner, that confirm window pop-ups. I tried by this part of code to fix it, but not succeeded:
close: function () {
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
YES: function () {
$(this).dialog("close");
$('#modalDialog').dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
The issue is when I'm doing it in that way, the dialog window first close, then the confirm window pop-up. I don't want that, but I want the opposite.
JQuery:
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
$('<label>Title</label><br/>').appendTo($div);
$('<input/>', { "type": "text","class":"ctb"}).appendTo($div);
$('<input/>', { "type": "text","class":"date"}).appendTo($div);
var cnt =0,$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id","div"+cnt);
$('#userAddedCard').append($newDiv);
// alert($('#userAddedCard').find("div.sortable-div").length);
});
// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
$currentTarget = $(e.target);
$('#modalDialog').dialog({
modal: true,
height: 600,
width: 500,
position: 'center',
buttons: {
Save: function () { //submit
var val = $("#customTextBox").val();
$currentTarget.find(".ctb").val(val);
$currentTarget.find(".date").val($("#datepicker").val());
$('#modalDialog').dialog("close");
},
Cancel: function () { //cancel
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
YES: function () {
$(this).dialog("close");
$('#modalDialog').dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
},
close: function () {
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
YES: function () {
$(this).dialog("close");
$('#modalDialog').dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
});
});
$("#datepicker").datepicker({showWeek:true, firstDay:1});
});
Maybe I'm wrong, in that way I'm doing. Any idea how to fix it?
Live Demo

You may try use the beforeClose for the confirm window, and if confirmed then close the dialog.

Passing a value into a jQuery UI dialog box with a function

This is my document.ready code:
$(document).ready(function() {
$("#dialogbox").dialog({
open: function(event, ui) {$("a.ui-dialog-titlebar-close").remove();},
bgiframe: true,autoOpen: false,closeOnEscape: false,draggable: false,
show: "drop",hide: "drop",zIndex: 10000,modal: true,
buttons: {'Ok': function() {$(this).dialog("close");processEmp();}}
});
});
I have the following JavaScript code that takes one parameter:
function test(pEmp)
{
var a = pEmp.value);
$('#dialogbox').dialog('open');
}
My question is, based on the value that I pass into my test function, which in turn calls my jQuery UI dialog ('#dialogbox'), when the user presses the 'Ok' button in the dialog, I need to somehow (which is what I am not sure how to do), pass the the variable "a" which holds my pEmp.value, into my other function processEmp(a?), which I have attached to my 'Ok' button.
I basically need this value when the user acknowledges the dialog box.

You may pass custom option to dialog before opening it:
$(function () {
$("#dialog").dialog({
open: function (event, ui) { $("a.ui-dialog-titlebar-close").remove(); },
bgiframe: true,
autoOpen: false,
closeOnEscape: false,
draggable: false,
show: "drop",
hide: "drop",
zIndex: 10000,
modal: true,
buttons: { 'Ok': function () {
$(this).dialog("close");
processEmp($(this).data("pEmpValue"));
}
}
});
});
function processEmp(a) {
alert(a);
}
function test(pEmp) {
$("#dialog").data("pEmpValue", pEmp.value).dialog("open");
}
Or even the simplest solution is to declare a variable in scope of the window:
var a = null;
$(function () {
$("#dialog").dialog({
open: function (event, ui) { $("a.ui-dialog-titlebar-close").remove(); },
bgiframe: true,
autoOpen: false,
closeOnEscape: false,
draggable: false,
show: "drop",
hide: "drop",
zIndex: 10000,
modal: true,
buttons: { 'Ok': function () {
$(this).dialog("close");
processEmp(a);
}
}
});
});
function processEmp(a) {
alert(a);
}
function test(pEmp) {
a = pEmp.value;
$("#dialog").dialog("open");
}

You can achieve this by adding an event handler for 'close'. Something like this:
$("#dialogbox").bind("dialogclose", function(event, ui) { processEmp(a); });