I need to change the value of the input buttons created in the jQuery UI dialog modal to present them in the language of the user.
I don't see how to do it.
var $dialog = $('<div><div style="padding:10px;text-align:left">'
+'New name'
+'</div>'
+'<div style="padding:0 10px 10px 10px;text-align:left;">'
+'<input id="dialogInput" style="width:370px" type="text"/>'
+'</div></div>')
.dialog({
modal: true,
title: 'title',
width: 400,
buttons: {
**'Ok'**: function() {
$(this).dialog('close');
return true;
},
**'Cancel'**: function() {
$(this).dialog('close');
return true;
}
}
});
Thanks!
Found a solution
var $dialog = $('<div><div style="padding:10px;text-align:left">'
+'New name'
+'</div>'
+'<div style="padding:0 10px 10px 10px;text-align:left;">'
+'<input id="dialogInput" style="width:370px" type="text"/>'
+'</div></div>')
.dialog({
modal: true,
title: 'title',
width: 400,
buttons: {
**'Ok'**: function() {
$(this).dialog('close');
return true;
},
**'Cancel'**: function() {
$(this).dialog('close');
return true;
}
}
});
// i was missing the parent() traversing needed since the form is embedded in the dialog popup
$dialog.parent().find('button:contains("Ok")').text('New Ok text');
$dialog.parent().find('button:contains("Cancel")').text('New cancel text');
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
}
}
I am playing with Jquery UI
I create a dialog on the fly from a DIV, i gave this DIV and ID and a button to call a closeDialog Function
It works fine as shown on this example
http://jsbin.com/ubovej
The problem I am having, is that if I d load a page THAT contains the BUTTON. The button will not work
as in:
$("<div id='mydialog1'>").dialog({
autoOpen: false,
modal: false,
width: 740,
height: 840,
title: 'Dialog1 = dynamic',
open: function(e, ui){
$(this).load(myUrl);
}
});
If this is the button Click Event code then
autoOpen: false,
should be
autoOpen: true,
EDIT: If you don't want it opened til you click the button then:
Do this when you want the dialog created.
var $dialog = $("<div id='mydialog1'>").dialog({
autoOpen: false,
modal: false,
width: 740,
height: 840,
title: 'Dialog1 = dynamic',
open: function(e, ui){
$(this).load(myUrl);
}
});
and do this after they click the button (only after the dialog is created)
$("button_selector").click(function () {
$dialog.dialog("open");
});
EDIT: Try changing
function closeDialog1(){
alert('closing Dialog1');
window.parent.$('#mydialog1').dialog('close');
return false;
}
to
function closeDialog1(){
alert('closing Dialog1');
$('#mydialog1').dialog('close');
return false;
}
Or a better way to do this might be
$("<div id='mydialog1'>").dialog({
autoOpen: false,
modal: false,
width: 740,
height: 840,
title: 'Dialog1 = dynamic',
open: function(e, ui){
$(this).load('dialogtest1a.html');
},
buttons: {
"Close" : function () {
$(this).dialog("close");
}
}
});
Does the button that closes the dialog HAVE TO be in the page you are loading?
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();
});
}
});
I open modal dialog twice,
the textbox is locked in the first dialog(parent dialog) after the second dialog closed
Why? How to resolve the problem? I am new user,so I can't post the image
Any answer will be appreciated, thank you
Html:
<XMP>
<input id="btnDlg" type="button" value="open dialog" />
<div id="dlg1"><%=Html.TextBox("txtName","can not edit") %><input id="btnShowDlg" type="button" value="dialog again" /></div>
<div id="dlg2"><div>the second dialog</div><%=Html.TextBox("txtName2") %></div>
</XMP>
jquery:
$("#dlg1").dialog({
autoOpen: false,
height: 350,
width: 300,
title: "The first dialog!",
bgiframe: true,
modal: true,
resizable: false,
buttons: {
'Cancel': function() {
$(this).dialog('close');
},
'OK': function() {
$(this).dialog('close');
}
}
})
$("#dlg2").dialog({
autoOpen: false,
height: 200,
width: 300,
title: "This is the second dialog!",
bgiframe: true,
modal: true,
resizable: false,
buttons: {
'Cancel': function() {
$(this).dialog('close');
},
'OK': function() {
$(this).dialog('close');
}
}
})
$("#btnDlg").click(function() {
$("#dlg1").dialog("open");
})
$("#btnShowDlg").click(function() {
$("#dlg2").dialog("open");
})
buttons: {
"Save": function () {
//validate
if (typeof (Page_ClientValidate) == 'function') {
Page_ClientValidate(newValGroup);
}
if (Page_IsValid) {
gettHTML(divID, PriceID);
}
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function (ev, ui) {
$(this).dialog("destroy");
}
});
$("#" + divID).dialog('open');
return false;
Yes divid can you try Making Modal : false. it will work..
let me know..
Thanks
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.