How to hide a button from jQuery dialog UI?
I am trying to hide a button from a jQuery UI dialog button when opening a dialog. Then I want to show this if the condition is met.
I wrote some code in method open
that will add css code to disable the button. I also tried calling methods .show()
and .hide()
, but it still didn't work.
I'm not sure how I can hide / show a button in jQuery
Here is my code
function initializeDialog(){
//initialize the dialog box
$(".ICWSinboundDialog").dialog({
resizable: true,
width: 500,
modal: true,
autoOpen: false,
stack: false,
open: function(){
$('#btnAnswerAndShow').css("display","none");
},
buttons: [
{
id: "btnAnswerAndShow",
text: "Answer - Display",
click: function(e) {
//do something
}
},
{
id: "btnAnswer",
text: "Answer",
click: function(e) {
//do something
}
},
{
id: "btnVM",
text: "Send to Voice Mail",
click: function(e) {
//do something
}
},
{
id: "btnHold",
text: "Hold",
click: function(e) {
//do something
}
}
]
});
}
DIV for dialogs is created on the fly like so
var prefix = 'ICWS_';
var interactionId = '123456';
var dialogID = '#' + prefix + interactionId;
//create a dialog box if one does not already exists
if( $(dialogID).length == 0) {
$('#ICWSDialogs').append('<div class="ICWSinboundDialog icwsDialogWrapper" id="'+ prefix + interactionId +'" style="display: none;"></div>');
}
//initialize the dialog after creating the new dialog
initializeDialog();
And then by code I can open this dialog like so:
if( $(dialogID).length > 0) {
$(dialogID).dialog('open');
}
this is my HTML markup
<div id="ICWSDialogs"></div>
source to share
In the context you gave, I think the problem is that you are not opening a dialog with .dialog( "open" )
and therefore the event open
will not be fired. So if you add .dialog( "open" )
at the end of the initialization process, everything should work fine (with all the ways to show or hide an element).
I'm also not sure why you are adding style="display: none;"
to yours icwsDialogWrapper
. You may have good reasons for doing this, but in this context it is not necessary, and it may even cause problems in yours. Therefore, you can try to remove it.
Here's a script for your example with a dialog that should work the way you want (also check the function of the answer button). See if this helps you: https://jsfiddle.net/ad7f6ryv/
source to share