Dynamically Set onExecute callback function in DOJO Confirm Dialog

Question

I have two html buttons in my jsp. One is Add and another is Remove. Now If ony of the button is clicked then one dojo confirm dialog would be displayed. On click of 'Ok' in the dialog either Add or Remove Functionality will be executed. And this Dojo Dialog in present in one of the parent jsp page which will be reused by other jsp pages where Add or Remove functionlity is present. Depening on the Add/Remove button click the confirm message also needs to be changed. Ex. for Add, the message should be 'Do you want to Add' , for Remove the message would be 'Do you want to Remove'. I am able to set the message dynamically in the DOJO Cinfirm Dialog but not able to set the onExecute callback function ie. when Ok will be clicked in teh Dialog. Below id the code.

NB: I am using DOJO 1.10 library

Confirm Dialog Code:

require(["dijit/ConfirmDialog", "dojo/domReady!"], function(ConfirmDialog){
    myDialog = new ConfirmDialog({
        title: "GCLDW - Confirm Dialog",
        content: "",
        style: "width: 300px;",
        onExecute:function(){
            removeCustomer();
        }
    });
});

HTML Button Code:

<button type="button" id="removeCustomerButton"
        onclick="myDialog.set('content', 'Do you want to remove the selected item ?<br><br>');myDialog.show();">
                                <SPAN class=grey><EM><s:message
                                    code="customer.removeCustomer" text="" /></EM>
                                </SPAN>
</button>

<button type="button" id="addCustomerButton"
        onclick="myDialog.set('content', 'Do you want to Add the selected item ?<br><br>');myDialog.show();">
                                <SPAN class=grey><EM><s:message
                                    code="customer.addCustomer" text=""/></EM>
                                </SPAN>
</button>

Now how to set the onExecute call back function depending on the button click, either it would be addCustomer() or removeCustomer() , and whichever page is using this dialog will have their own implementation of these two method.

Answer 1

In /dojo-release-1.10.4-src/dijit/_DialogMixin.js, the comments state:

execute: function(/*Object*/ /*===== formContents =====*/){
// summary:
//      Callback when the user hits the submit button.
//      Override this method to handle Dialog execution.

I implemented a ConfirmDialog like so:

var confirmDialog = new ConfirmDialog({
    title: core.confirm
});
confirmDialog.startup();

function confirmAction(text, callbackFn) {
    confirmDialog.set("execute", callbackFn);
    confirmDialog.set("content", text);
    confirmDialog.show();
}

and called it as follows:

lib.confirmAction(core.areyousure, function () {
    markedForDeletion.forEach(function (node) {
        // Do deletion
    });
});

Answer 2

Just set the onExecute block- in the same way- how you are setting the content.

Also a suggestion is- put the JS code seperate from HTML.

Here goes the work-around-

HTML Code-

<button type="button" id="removeCustomerButton">
        <SPAN class=grey><EM>Remove</EM></SPAN>
</button>

<button type="button" id="addCustomerButton">
        <SPAN class=grey><EM>Add</EM></SPAN>
</button>

& the DOJO-

    require(["dijit/ConfirmDialog", "dojo/domReady!"], 
            function(ConfirmDialog){
                var myDialog = new ConfirmDialog({
                    title: "GCLDW - Confirm Dialog",
                    content: "",
                    style: "width: 300px;"
                });

                dojo.query('#removeCustomerButton').onclick( function() {
                    myDialog.set('content', 'Do you want to remove the selected item ?<br><br>');
                    myDialog.set('onExecute', function(){removeCustomer()} );   // cant call it directly- must wrap within a function
                    myDialog.show();
                });

                dojo.query('#addCustomerButton').onclick( function() {
                    myDialog.set('content', 'Do you want to Add the selected item ?<br><br>');
                    myDialog.set('onExecute', function(){addCustomer()} );  // cant call it directly- must wrap within a function
                    myDialog.show();
                });


            });


    function removeCustomer(){
        console.log("removeCustomer called on execute");
    }

    function addCustomer(){
        console.log("addCustomer called on execute");
    }