Develop Reference

Show/Hide print button in JQuery?

I was wondering is there any way to show print button based on the argument passed in the function. Here is my code that creates dialog box:
alertInfo: function (message, title, height, width, print) {
$("<div></div>").dialog( {
buttons: {
"Ok": function () {
$(this).dialog("close");
},
//show/hide button if argument 'print' equals to 'Yes'
"Print": function() {
$(this).dialog().printArea();
},
},
close: function (event, ui) { $(this).remove(); },
resizable: false,
title: title,
modal: true,
width: height,
height: width,
overflow:'auto',
position: {
my: "center",
at: "center",
of: window
}
}).html(message);
}
This is the code where I'm passing the arguments in alerInfo() function:
$.alertInfo(infoTable,'User Info',800,600,'Yes');
I still did not get this to work and If I tried to put if statement around Print button error occurred. If anyone can help please let me know.

alertInfo: function(message, title, height, width, print) {
var buttons = {
"Ok": function() {
$(this).dialog("close");
}
};
if (print) buttons.print = function() {
$(this).dialog().printArea();
};
$("<div></div>").dialog({
buttons: buttons,
close: function(event, ui) {
$(this).remove();
},
resizable: false,
title: title,
modal: true,
width: height,
height: width,
overflow: 'auto',
position: {
my: "center",
at: "center",
of: window
}
}).html(message);
}
This assumes the print parameter is a boolean
$.alertInfo(infoTable,'User Info',800,600, true); // to show print button
$.alertInfo(infoTable,'User Info',800,600, false); // to not show print button

You're effectively passing an object to the buttons property:
{
"Ok": function () {
$(this).dialog("close");
},
"Print": function() {
$(this).dialog().printArea();
}
}
So what you can do is dynamically create that object based on your conditions and then set the dynamically created object to the property. It might look something like this:
// create the object
var myButtons = {
"Ok": function () {
$(this).dialog("close");
}
};
// conditionally add a "print" button
if (someCondition) {
myButtons.Print = function() {
$(this).dialog().printArea();
}
}
// use the object
$("<div></div>").dialog( {
buttons: myButtons,
close: function (event, ui) { $(this).remove(); },
// etc.
});

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.

controller action execute two times with Ajax.ActionLink and JQuery UI Dialog

I have ajax.actionlink
#Ajax.ActionLink("Click here",//link text
"Insert", // action name
"Projects", // controller
new { poz = item.itemID.ToString() }, // route values
new AjaxOptions() { HttpMethod = "GET", UpdateTargetID = "PrjDiv" OnSuccess = "Initiate_Dialog" }, // ajax options
new { #class = "openDialog", #id = item.idemID.ToString() } //htmlAttributes
)
and jQuery UI dialog
function Initiate_Dialog() {
var itemID= $(this).attr("id").replace("item_", "");
var prjID= $("#m_project").val();
var url = encodeURI("/Projects/Insert?poz=" + itemID+ "&proj=" + prjID);
$("#dialog-edit").dialog({
title: 'Insert',
autoOpen: false,
resizable: false,
height: 'auto',
width: 650,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(this).load(url);
},
close: function (event, ui) {
$(this).dialog('close');
},
buttons: {
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#dialog-edit").dialog('open');
return false;
}
When i click on generated link, my controller action is executed 2 times. Once with parameters sent from ajax.actionlink, and second time, with parameters sent from javascript.
I know that i have 2 calls and that's why is action executed twice. My question is, is there a way around this to execute only call from javascript, and not from actionlink?

Jquery dialog add buttons on open

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

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