I wrote a dialog definition, but the name of the buttons depend on the situation.
When I open the dialog, I want to set the buttons name.
I can´t find a solution, how to rename a dialog button after define it.
Here is my Dialog Code:
$( "#neueFrage" ).dialog({
resizable: false,
autoOpen: false,
height: 900,
width: 1100,
modal: true,
closeOnEscape: false,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide()},
buttons : [{
text : 'SAVE',
class : 'dialogbutton',
click : function() {}
},
{
text : 'CANCEL',
class : 'dialogbutton',
click : function() {
}
}
]
});
I call the dialog with this small code sample.
If 'Yes', everything is ok, but if not, I want to rename the button to 'REDO'.
if ($(this).text()=="Yes") {
$( "#neueFrage" ).dialog( "open" );
} else {
//Rename the button 'SAVE' to 'REDO' before open dialog
$( "#neueFrage" ).dialog( "open" );
}
How can I change the button´s name in else?
try this:
buttons : [
{
text : 'SAVE',
class : 'dialogbutton',
click : function() {},
id:"savebtn"
},
{
text : 'CANCEL',
class : 'dialogbutton',
click : function() {
},
id:"cancelbtn"
}
]
});
if($(this).text()=="Yes"){
$( "#neueFrage" ).dialog( "open" );
}else{
$("#savebtn").find("span").text("whatever")
$( "#neueFrage" ).dialog( "open" );
}
Related
I want to display a pop-up box once I click the "Add Component" Link. The first time it's clicked, it will display a proper dialog box, but if I click again and again it will go that URL without the pop-up box, The pop-up box contains another view page. If I close that box, it should say "Closed", and if I click "Add Component" again the pop-up should show. Here is my JavaScript and HTML Code:
<script>
$(document).ready(function () {
$('#lnkCreate').on('click', function (e) {
var url = $(this).attr('href');
$("#dialog-edit").dialog({
title: 'Add Component',
autoOpen: false,
resizable: false,
height: 455,
width: 500,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function () {
$(this).load(url);
alert(url);
},
close: function () {
$(this).dialog('close');
alert("closed view");
}
});
});
</script>
<p style="padding-left:18em;padding-top:1em">
#Html.ActionLink("Add Component", "Create",null, new { id = "lnkCreate" })
</p>
How can I keep event of change of select into dialog that don't fire?
my HTML:
<body>
<div id="dialog_message"></div>
</body>
my JAVASCRIPT:
var titolo = 'my dialog';
var s="<select id=\"MYSEL1\" name=\"MYSEL1\"><option value=\"A\">opt A</option><option value=\"B\">opt B</option></select><br><select id=\"MYSEL2\" name=\"MYSEL2\"></select>";
$( "#dialog_message" ).dialog({
resize: 'auto',
draggable: true,
resizable: false,
closeOnEscape: false,
open: function() { // open event handler
$(this).parent().find(".ui-dialog-titlebar-close").hide();
$(this).html(s);
},
buttons: {
Annulla: function() {
$( this ).dialog( "close" );
}
},
title: titolo
});
$("select").selectmenu();
$("#MYSEL1").on("change", function() {
var n=$(this).attr("id");
var dd = $("option:selected", this);
var d = $(this).val();
alert (d);
$("#MYSEL2").empty(); // remove old options
if (d=='A') {
$("#MYSEL2").append('<option value=\"AA\">opt AA</option><option value=\"AAA\">opt AAA</option>');
} else {
$("#MYSEL2").append('<option value=\"BB\">opt BB</option><option value=\"BBB\">opt BBB</option>');
};
});
You can find in jsfiddle at: https://jsfiddle.net/t0L915po/5/
You will need to add the event to select element after the dialog box opens. Use the below code:
var titolo = 'my dialog';
var s="<select id=\"MYSEL1\" name=\"MYSEL1\"><option value=\"A\">opt A</option><option value=\"B\">opt B</option></select><br><select id=\"MYSEL2\" name=\"MYSEL2\"></select>";
$( "#dialog_message" ).dialog({
resize: 'auto',
draggable: true,
resizable: false,
closeOnEscape: false,
open: function() { // open event handler
$(this).parent().find(".ui-dialog-titlebar-close").hide();
$(this).html(s);
$("#MYSEL1").on("change", function() {
var n=$(this).attr("id");
var dd = $("option:selected", this);
var d = $(this).val();
alert (d);
$("#MYSEL2").empty(); // remove old options
if (d=='A') {
$("#MYSEL2").append('<option value=\"AA\">opt AA</option><option value=\"AAA\">opt AAA</option>');
} else {
$("#MYSEL2").append('<option value=\"BB\">opt BB</option><option value=\"BBB\">opt BBB</option>');
};
});
},
buttons: {
Annulla: function() {
$( this ).dialog( "close" );
}
},
title: titolo
});
$("select").selectmenu();
I need to open a popup window on clicking a button and used jquery dialog for this.
$(document).ready(function(){
$("#dialog-form").dialog({
autoOpen : false,
height : 300,
width : 350,
modal : true,
buttons : {
"Add" : function() {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
},
Cancel : function() {
$(this).dialog("close");
}
},
close : function() {
$("#textArea").val("");
}
});
});
function openWindow(){
$("#dialog-form").dialog("open");
statement1;
statement2;
}
<button id="add" onclick="openWindow()">Add</button>
problem over here is when i click the button dialog box is opened, but before even i enter some text in the dialog box statement1 and statement2 are getting executed and then focus is coming to the dialog box.
How can i make the statement1 and statement2 to execute only after dialog box returns?
I don't want to add the statement1 and statement2 to the "Add" function. The reason for not adding the statements in the "Add" function is because i have multiple buttons and each of these should first open the dialog box and then will execute different set of statements.
Easy fix would be to use the close callback:
$(document).ready(function () {
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
$("#textArea").val("");
//statement1 -- won't fire until dialog is closed
//statement2 -- won't fire until dialog is closed
}
});
});
function openWindow() {
$("#dialog-form").dialog("open");
}
Another thing to consider would be $.Deferred
I have an example for you:
$(".selector").click(function () {
var dialog = $('<div title="Title"></div>').dialog({
open: function (event, ui) {
$.ajax({
url: 'www.google.com.br',
cache: false,
success: function (html) {
$(dialog).html(html);
},
error: function () {
$(dialog).remove();
alert("Some Error MSG");
}
});
},
close: function () {
$(dialog).remove();
},
resizable: false,
width: 500,
modal: true
});
});
In this case, the dialog is receiving the HTML result, only after it opens.
This can be achieved by the following way:-
$('#mydialog').dialog("open");
$('#mydialog').load('serverURL',server_data_variable, function() {
myfunction();
});
This will execute the function once the dialog loading is done.It will register the callback to be executed post dialog done.The variable server_data_variable is optional and is supposed to be used only if user wants to send some data otherwise it can be skipped as.well.
Solution 1: (same as solution from Aaron Blenkush)
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
//statement1 -- will fire only if "add" button is clicked
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
$("#textArea").val("");
//statement1 -- will fire after dialog is closed
}
});
Solution 2 is to make a promise:
const dialogPromise = new Promise(function (resolve, reject) {
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
resolve(true);
},
Cancel: function () {
$(this).dialog("close");
resolve(false);
}
},
close: function () {
$("#textArea").val("");
}
});
});
const addClicked = await dialogPromise;
Call callback function after "open" clause in the dialog setup.
modal: true,
resizable: false,
resize: 'auto',
close: dialogCloseFunction,
**open: function(){if(itemid) {showDailogSides(itemid);}** if(!siteParams[3]) {$(".detailSideClass").hide(); $(".addToChartinDialog").hide();}},
//hide: {effect: "fadeOut", duration: 5000}
show: { effect: "fade", duration: 1000 } //drop blind fade fold slide clip
i have code like this:
The dialog does not open when i use this.
else if (json.score == -3) {
$("#dialog-unauthenticated").dialog('open');
}
but does when i use this! I have it initialized with autopen false above too.
else if (json.score == -3) {
$("#dialog-unauthenticated").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
}
what is wrong?
close does not work either.
initialized with:
$("#dialog-unauthenticated").dialog({
autoOpen: false,
resizable: false,
height: 140,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
Not sure if this helps, but im invoking this in response to a jquery post.
you need to initiate the dialog first.
then you can do actions after.
so e.g.
$('<div id="dialog" />')
.dialog({
modal:true,
buttons:{
cancel:function(){
$(this).dialog('close');
}
}
});//init dialog
$('#open').click(function (){
$('#dialog').dialog('open');
});
$('#close').click(function (){
$('#dialog').dialog('close');
});
As you are trying to open the dialog when its not initiated. therefore the dialog does not exist so it cnt be opened
jquery ui.dialog
after open a modal dialog, if I will open another modal dialog again and close it, the textbox is lock in the parent dialog. I can not resolve this problem.
if I open a non-modal dialog , it works fine,
but the parent dialog can be closed ,How to resolve it , thanks , waiting online
html:(dotnet mvc2)
<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>
jquery:
//first modal dialog
$("#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');
}
}
})
//second modal dialog
$("#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');
}
}
})
//show the first modal dialog
$("#btnDlg").click(function() {
$("#dlg1").dialog("open");
})
//show the second modal dialog
$("#btnShowDlg").click(function() {
$("#dlg1").dialog("options", "hide",true);
$("#
dlg2").dialog("open");
})
I just figured it out, just in case sb ever needs an answer and doesn't find one
One needs to change the z-index in CSS file of #btnShowDlg to this (not exactly)# 638746and then the fields within the modal preview are editable.. No need to change anything else :)
Just go to your css file, locate #btnShowDlg and either change or set z-index:638746;