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); });
Related
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.
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.
I have got a jquery dialog with autoOpen set to false:
$(document).ready(function() {
$('#test').text("hello!").dialog({
autoOpen: false,
resizable: false,
modal: true,
});
});
I trigger the dialog like this:
$('x').click(function() {$('#test').dialog('open');});
I want to add buttons with some functionality on open, something like this:
$('x').click(function() {$('#test').dialog('open', 'option', 'buttons', {
'Ok': function() {
myFunction();
$(this).dialog('close');
}
});
});
But no luck so far, any help?
Change the third part like :
open: function (type, data) {
$(this).parent().appendTo("form");
},
buttons: { "Ok": function() { $(this).dialog("close"); } }
Hi all I have a div in my page which represents a popup window. I have a button inside the window. On click of the button, I need to call a javascript function.(I need to do this only in client side, not in server). If the validation is successful, the popup can close. If not, it should display an alert message and STAY THERE INSTEAD OF CLOSING. I need to close my popup only if validation is successful. Else, it should display an alert and just stay. How do I make it stay? The following are my codes.
Div structure:
<script type="text/javascript">
$(function () {
$("#dialog:ui-dialog").dialog("destroy");
$('#TimeslotGroup').dialog({
autoOpen: false,
draggable: false,
resizable: false,
bgiframe: false,
modal: true,
width: 700,
title: "Timeslot Group Entry",
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});
function showDialog(id) {
$('#' + id).dialog("open");
}
function closeDialog(id) {
$('#' + id).dialog("close");
$("#dialog:ui-dialog").dialog("destroy");
}
//getter
var modal = $(".selector").dialog("option", "modal");
//setter
$(".selector").dialog("option", "modal", true);
</script>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (evt, args) {
$('#TimeslotGroup').dialog({
autoOpen: false,
draggable: false,
resizable: false,
bgiframe: false,
modal: true,
width: 500,
title: "Timeslot Group Entry",
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});
</script><div id="TimeslotGroup" class="ui-widget-overlay" style="overflow-y: scroll;">
Use the beforeClose event
$( "#dialog" ).dialog({
beforeClose: function(e, ui){
if(!valid){
return false;
}
}
});
I am using jquery ui dialog. I have initialized a dialog at document.ready event.
$("#globalConfirm").dialog({
width: 500, autoOpen: false, resizable: false, draggable: false,
modal: false
});
This dialog is for confirmation. Now later i want to add a buttons options and there callback functions like :
$("#globalConfirm").dialog("option", "buttons", '{
"Confirm": function (event, ui) {
//jquery code
},
"Cancle": function (event, ui) {
$(this).dialog("close");
}'
);
Is this write way to initialize the buttons option of jquery ui dialog after initializing dialog ?
Yes, just pass the option as an object, not a string.
$("#globalConfirm").dialog("option", "buttons", {
"Confirm": function (event, ui) {
//jQuery code
},
"Cancel": function (event, ui) {
$(this).dialog("close");
}
);