3

I am using Alertify js 1.6.1 to show dialog box when user leaves a page. Apart from Ok and Cancel, I need to add one extra button "continue" in alertify js confirm dialog box. Is there a way to add custom button functionality? Let me know if you have any ideas on it. Thanks

user596502
  • 417
  • 3
  • 10
  • 22

1 Answers1

5

You can build your own or extend the existing confirm:

    alertify.dialog('myConfirm', function() {
      var settings;
      return {
        setup: function() {
          var settings = alertify.confirm().settings;
          for (var prop in settings)
            this.settings[prop] = settings[prop];
          var setup = alertify.confirm().setup();
          setup.buttons.push({ 
            text: '<u>C</u>ontinue',
            key: 67 /*c*/ ,
            scope: 'auxiliary',
          });
          return setup;
        },
        settings: {
          oncontinue: null
        },
        callback: function(closeEvent) {
          if (closeEvent.index == 2) {
            if (typeof this.get('oncontinue') === 'function') {
              returnValue = this.get('oncontinue').call(this, closeEvent);
              if (typeof returnValue !== 'undefined') {
                closeEvent.cancel = !returnValue;
              }
            }
          } else {
            alertify.confirm().callback.call(this, closeEvent);
          }
        }
      };
    }, false, 'confirm');

see example

Phát
  • 29
  • 7
MK.
  • 5,139
  • 1
  • 22
  • 36
  • Thanks a lot for this response, Actually i had earlier tried to extend confirm dialog in alertify js itself and the custom button was displayed properly. However one problem i found is: when i click on continue, the dialog box does not close and if i click second time on continue, then only the box is closed. I tried alertify.closeall(), alertify.confirm.close () on cal back of continue function but did not work . – user596502 Mar 16 '16 at 08:37
  • I don't see such problem in the example I provided! – MK. Mar 16 '16 at 08:47
  • Yes, that was bit weird, i tried with your example and it works perfectly. But instead of warning, i have to do some processing inside callback of oncontinue function. Then the box does not close. 'oncontinue': function() { // alertify.warning('continue'); location.hash = '#' + 'id:'+someResourceId; // works but dialog does not closes }, – user596502 Mar 16 '16 at 08:53
  • It might be something else! can you provide an online example? – MK. Mar 16 '16 at 09:27
  • Yeah i also think it may be something to do it with my processing code on continue function. I have found a workaround for now. Thanks anyways for the feedback :) – user596502 Mar 16 '16 at 09:30