1

I currently have this:

            $('form#uwbhandler').on('click', function(e){
            e.preventDefault();
            alertify.confirm("Mode 1",
              function(){
                alertify.success('Sent: Success Something');
                socket.emit('send command', {data: 'acommand'});
              },
              function(){
                alertify.success('Sent: Something');
                socket.emit('send command', {data: 'bcommand'});
              }).setHeader('<em>Select Mode</em> ').setting('labels',{'ok':'Mode 1', 'cancel': 'Mode 2'}).set({onshow:null, onclose:function(){ alertify.message('confirm was closed.')}});;
        });

Which is mostly taken from the example on the alertify.js page. However, I want to customize the cancel button action separate from the onclose button. However, closing with the "x" button for the dialog fires the cancel event event after setting a separate onclose function.

Kenny Powers
  • 1,254
  • 2
  • 15
  • 25
  • From a UX standpoint, if a dialog does something *different* when I click the [X] vs. when I click [Cancel], I'm going to be a confused and unhappy user. – T.J. Crowder May 03 '16 at 04:23
  • Understood, the idea would be that this button is not a "cancel" button to be exact. Trying to have more than two buttons on an alertify.js dialog, and thus far this is all I had come up with. – Kenny Powers May 03 '16 at 04:28

1 Answers1

1

I recommend using the Dialog Factory to create your custom dialog.

The confirm dialog definition is set to invoke the cancel action upon closing the dialog.

However, A quick solution would be to inherit from the existing confirm dialog and update its setup to disable invokeOnClose:

alertify.dialog('myCustomDialog', function() {
  return {
    setup: function() {
      return {
        buttons: [{
          text: 'Mode 1',
          key: 13 /*keys.ENTER*/ ,
          className: alertify.defaults.theme.ok,
        }, {
          text: 'Mode 2',
          key: 27 /*keys.ESC*/ ,
          invokeOnClose: false, // <== closing won't invoke this
          className: alertify.defaults.theme.cancel,
        }],
        focus: {
          element: 0,
          select: false
        },
        options: {
          title: '<em>Select Mode</em> ',
          maximizable: false,
          resizable: false
        },
      };
    }
  }
}, false, 'confirm');

Then use a local variable to decide whether to execute the logic inside the onclose callback:

function demo() {
  var modeSelected = false;
  alertify.myCustomDialog("Which mode will it be?",
      function() {
        modeSelected = true;
        alertify.success('Mode 1');
      },
      function() {
        modeSelected = true;
        alertify.success('Mode 2');
      }
    )
    .set({
      onshow: null,
      onclose: function(arg) {
        if (!modeSelected) {
          alertify.message('confirm was closed.');
        }
        modeSelected = false;
      }
    });
}

see live demo

MK.
  • 5,139
  • 1
  • 22
  • 36
  • This answers the question I posted, thanks! I was digging through the dialog factory as well to have a 3 button dialog, but I can't seem to find a way to specify what happens for each of the three buttons? – Kenny Powers May 03 '16 at 16:31
  • Looking at your example, if you create three buttons with the dialog factory, do you just add three functions and they tie to the buttons in the same order? – Kenny Powers May 03 '16 at 16:33
  • 1
    You need handle them in the `callback`, see how the built-in dialogs are implemented (https://github.com/MohammadYounes/AlertifyJS/blob/master/src/js/confirm.js#L155-L176) – MK. May 03 '16 at 20:02