I do get that we easily can set the Close button text to a variable, using closeText option
$("#dialog").dialog({
autoOpen: false,
modal: true,
closeText: btnCancel, // <-----
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
but how about a custom name?
this does not work :(
var btnResetMapping = 'Reset Mapping';
$("#dialog").dialog({
autoOpen: false,
modal: true,
closeText: btnCancel,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
Close: function() {
$(this).dialog('close');
},
btnResetMapping: function() { // <-----
// logic here
},
}
});
This can be seen as weird question, but my variable, in the code is:
var btnResetMapping = '<%= Resources.PARbuttons.btnResetMapping %>';
witch is loaded correctly from the Global Resources file, with the correct sentence for the applied localization.
it works fine using:
$("#dialog").dialog({
autoOpen: false,
modal: true,
closeText: btnCancel,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
Close: function() {
$(this).dialog('close');
},
'<%= Resources.PARbuttons.btnResetMapping %>': function() { // <-----
// logic here
},
}
});
But I'm refactoring this as place the javascript file in it's own place (alone file), and I want to, not only do this way (separate HTML from Javascript - It's a Business Web Aplication that is always loaded from the INTRANET, never using Internet btw) but to understand it.
Thank you.
You can use bracket notation, like this:
var myButtons = { Close: function() { $(this).dialog('close'); } };
myButtons[btnResetMapping] = function() { ...logic here... };
$("#dialog").dialog({
autoOpen: false,
modal: true,
closeText: btnCancel,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: myButtons
});
Just make sure btnResetMapping is defined before this code runs and you're all set :)
Related
I have a Jquery dialog where I want to display button based on a condition.
I tried using this solution to extend the button set but it's not displaying the dynamic button: Add a button to a dialog box dynamically
https://jsfiddle.net/q3u0xebz/
function showActionDialog(title, content, actionMessage, actionCallback) {
var actionDialog = $("<div id='action-dialog'></div>").html(content).dialog({
dialogClass: 'no-close',
title: title,
resizable: false,
height: 'auto',
width: 'auto',
modal: true,
buttons: [{
text: 'Okay',
click: function() {
$(this).dialog('close');
$("action-dialog").remove();
}
}]
});
if (actionCallback != '') {
var buttons = actionDialog.dialog("option", "buttons"); // getter
$.extend(buttons, {
text: actionMessage,
click: function() {
eval(actionCallback).call();
$(this).dialog('close');
$("action-dialog").remove();
}
});
actionDialog.dialog("option", "buttons", buttons); // setter
}
}
Following is my JS:
ShowHoverServerImageModalWindow: function () {
$("#divSettings").dialog({
width: 200,
height: 200,
modal: false,
title: "Server Image",
autoOpen: false,
closeOnEscape: true,
draggable: false,
resizeable: false,
/*position: "my position!!", */
buttons: [
{
text: "Close",
click: function () { $(this).dialog("close"); }
},
]
});
//Show the dialog
$("#divSettings").dialog('open');
},
I want the modal to be opened where my curser is at
How can i do that?
source: http://jqueryui.com/demos/dialog/ and http://docs.jquery.com/Tutorials:Mouse_Position
$("#divSettings").dialog({
... //your previous code
position: [e.pageX, e.pageY]
});
Easily found on google.
or just before you trigger the pop-up:
EDIT: now include the trigger.
$(document).click(function (e) {
$("#divSettings").dialog('option', 'position', [e.pageX, e.pageY]);
$("#divSettings").dialog('open');
});
I want to be able to close this dialog box and have it transfer to an object
I've tried using this... not luck
close: function() {
$(this).effect( 'transfer', { to: "#smpb_info_btn", className: "ui-effects-transfer" }, 500 );$(this).remove();
}
Now I'm tring this... still no luck
$PMinfo_Dialog.dialog({
autoOpen: true,
height: 250,
width: 600,
modal: false,
draggable: false,
resizable: false,
hide:{
effect:"transfer",
options:{from: "#smpb_info_btn", className: "ui-effects-transfer"},
speed:500
} ,
close: function() { $(this).remove();},
});
$PMinfo_Dialog.dialog( "open" );
This working jsFiddle demo should be what you need:
HTML:
<div id="PMinfo">Hello</div>
<button id="smpb_info_btn">Info</button>
CSS:
.ui-effects-transfer { border: 2px dotted gray; }
JS:
$("#PMinfo").dialog({
autoOpen: true,
height: 250,
width: 600,
modal: false,
draggable: false,
resizable: false,
beforeClose: function() {
var $this = $(this);
$this
.dialog("widget")
.effect("transfer", {
to: "#smpb_info_btn",
className: "ui-effects-transfer"
}, 500, function() {
$this.remove();
});
}
});
Does anyone know how to create a jQuery Dialog in a function? I can't find an attribute to set the message... In every example I found, the dialog has been statically written into the code in a div-tag. However, I want to create it dinamically, so I need to know how to create a dialog in a function.
It is no problem to set the title:
<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$( "#opener" ).click(function() {
//$( "#dialog" ).dialog( "open" );
$( this ).dialog({ title: 'Please confirm deletion!' });
return false;
});
});
</script>
</head>
<body>
I have the documentation and some examples here.
Thanks for helping out guys.
Cheers,
doonot
============================= [SOLUTION]=====================================
Thanks for all who answered this questions. This is how i wanted it:
function createDialog(title, text) {
return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
.dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Confirm": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
}
And it can be called for example like this (clicking on an image):
<img src="delete.png" onClick="createDialog('Confirm deletion!', 'Do you really want to delete this package?')">
function createDialog(title, text, options) {
return $("<div class='dialog' title='" + title + "'><p>" + text + "</p></div>")
.dialog(options);
}
Here is a simple example:
function openDialog(message) {
if ($('#dialog').length == 0) {
$(document.body).append('<div id="dialog">'+message+'</div>');
} else {
$('#dialog').html(message);
}
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$( "#dialog" ).dialog("open");
}
I used this with additionally jQuery tmpl plugin.
var confirmTemplate = jQuery.template("<div class='dialog' title='${title}'><p>${text}</p></div>");
function showDialog(options) {
if (options && options.data && options.dialog) {
var dialogOptions = jQuery.extend({}, { modal: true, resizable: false, draggable: false }, options.dialog);
return jQuery.tmpl(confirmTemplate, options.data).dialog(dialogOptions);
}
}
function hideDialog (item) {
if (!item.jQuery) item = $(item);
item.dialog("close").dialog("destroy").remove();
}
usage:
showDialog({
data: {
title: "My Title",
text: "my Text"
}
dialog: {
myDialog: "options"
}
});
I'm creating a Web interface for a table in Mysql and want to use jQuery dialog for input and edit. I have the following code to start from:
$("#content_new").dialog({
autoOpen: false,
height: 350,
width: 300,
modal: true,
buttons: {
'Create an account': function() {
alert('add this product');
},
Cancel: function() {
$(this).dialog('close');
$.validationEngine.closePrompt(".formError",true);
}
},
closeText: "Sluiten",
title: "Voeg een nieuw product toe",
open: function(ev, ui) { /* get the id and fill in the boxes */ },
close: function(ev, ui) { $.validationEngine.closePrompt(".formError",true); }
});
$("#newproduct").click(function(){
$("#content_new").dialog('open');
});
$(".editproduct").click(function(){
var test = this.id;
alert("id = " + test);
});
So when a link with the class 'editproduct' is clicked it gets the id from that product and I want it to get to the open function of my dialog.
Am I on the right track and can someone help me getting that variable there.
Thanks in advance.
Set a variable eg the_id on top of everything in your script and try this code:
$("#newproduct").click(function(){
$("#" + the_id).dialog('open');
});
$(".editproduct").click(function(){
the_id = this.id;
});
Thanks Sarfraz you were right about the variable. For others interest the full code is now:
$(document).ready(function() {
var id = 0;
$("#content_new").dialog({
autoOpen: false,
height: 350,
width: 300,
modal: true,
buttons: {
'Create an account': function() {
alert('add this product');
},
Cancel: function() {
$(this).dialog('close');
$.validationEngine.closePrompt(".formError",true);
}
},
closeText: "Sluiten",
title: "Voeg een nieuw product toe",
open: function(ev, ui) { alert(id); },
close: function(ev, ui) { $.validationEngine.closePrompt(".formError",true); }
});
$("#newproduct").click(function(){
$("#content_new").dialog('open');
});
$(".editproduct").click(function(){
id = this.id;
$("#content_new").dialog('open');
});
$("#new").validationEngine();});
And on the opening of the modal dialog box i get the correct ID.