Search code examples
javascriptdialogdojodijit.dialog

Dojo ConfirmDialog hiding cancel button


I have a dojo ConfirmDialog as below:

this.myDialog = new ConfirmDialog({
                   title: "My Dialog",
                   content: "Do you want to continue?",
                   class: "confirmDialog",
                   closable: false
                });

// change button labels
this.myDialog.set("buttonOk","Yes");
this.myDialog.set("buttonCancel","No");

// register events
this.myDialog.on("execute", function() { 
                              self.continueSomething() 
                            });

Later on based on some condition, I am updating the ConfirmDialog dynamically as below:

this.myDialog.set("title", "New Title");
this.myDialog.set("content", "Its too late. Press ok to re-route.");
this.myDialog.set("buttonOk","Ok");

At this stage, I do not have any function for the Cancel button. How do I hide it?

None of the following work:

this.myDialog.cancelButton.hide();
//or
this.myDialog.cancelButton.set("display", "none");
//or 
this.myDialog.cancelButton.set("display", none);

I am able to disable it as:

this.myDialog.cancelButton.set("disabled", true);

But that does not look correct. I want to hide the Cancel button completely.

How can I do it?


Solution

  • The cancelButton is a button Dijit , if you want to hide / show this last , you've to access it's domNode by smply typing this.myDialog.cancelButton.domNode and use the dojo/dom-style to hide /show as below

    let cancelBtnDom = this.myDialog.cancelButton.domNode;
    domStyle.set(cancelBtnDom, 'display', 'none');
    

    see below working wnippet (disable enable using external button )

    require(["dijit/ConfirmDialog", "dojo/dom-style", "dojo/domReady!"], function(ConfirmDialog, domStyle){
        myDialog = new ConfirmDialog({
            title: "My ConfirmDialog",
            content: "Test content.",
            style: "width: 300px"
        },"dialog");
        
        let cancelBtn = myDialog.cancelButton.domNode;
        
        let switchBtn = document.getElementById("switch");
        
        switchBtn.addEventListener("click",function(){
         let display = domStyle.get(cancelBtn, "display") !== "none" ?  "none" : "";
         console.log(display);
          domStyle.set(myDialog.cancelButton.domNode, 'display', display);
        });
        
    });
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" rel="stylesheet" />
    
    <body class="claro">
      <div class="dialog"></div>
      <button onclick="myDialog.show();">show</button>
      <button id="switch" >enable/Disable cancel button</button>
    </body>