How to change Alerfity.defaults.theme.ok to different style in one function

Question

In order to conveniently change the Alertify style for the different scenario, I wrote a function to do so. This function has one parameter called 'marker'.

This function will change alertify.defaults.theme.ok to differernt style based on the parameter. say if the marker is 'danger', alertify.defaults.theme.ok will be 'btn-danger' (I'm using BS4), if the marker is 'success', alertify.defaults.theme.ok will be 'btn-success', see the function below:

function formatAlertifyStyle(marker){
    alertify.defaults.transition = 'slide';
    alertify.defaults.theme.ok = 'btn btn-success';
    alertify.defaults.theme.cancel = 'btn btn-light';
    alertify.defaults.theme.input = 'form-control';

    if (marker == 'danger') {
       alertify.defaults.theme.ok = 'btn btn-danger';
       alertify.confirm().set('labels', {ok: 'Confirm'});
    }
    if ( marker == 'warning') {
       alertify.defaults.theme.ok = 'btn btn-warning';
       alertify.confirm().set('labels', {ok: 'Ok'});
    }
    if (marker == 'success') {
       alertify.defaults.theme.ok = 'btn btn-success';
       alertify.alert().set('labels', {ok: 'Ok'});
    }
}

Normally, it works fine, but if you invoke it more than once in a function, the second and after it will not work. alertify uses the first alerfity.defaults.theme.ok no matter how many times that you change it to something else. Here is how I use it:

function doDelete(){
    // Change Alertify style to 'btn-danger'
     formatAlertifyStyle('danger');
     alertify.confirm(
         'Confirm',
         'Description......',
         function(){
             $.ajax({
                 url:xxx,
                 data:{},
                 success:function(result){
                     if(result==true){
                         // Change Alertify style to 'btn-success'
                         // and it doesn't work!
                         formatAlertifyStyle('success');
                     }
                  }
             });
          },
          function(){
              alertify.error('Canceled');
          } 
   );
}

I'm not sure if I forgot something or did something wrong, please help. Any kind of help would be appreciated.

Answer 1

As mentioned in the docs, these are global defaults used only prior to component initialization. To reapply them, just call destroy() so the new defaults are reflected on the new instance.

function formatAlertifyStyle(marker){
    alertify.defaults.transition = 'slide';
    alertify.defaults.theme.ok = 'btn btn-success';
    alertify.defaults.theme.cancel = 'btn btn-light';
    alertify.defaults.theme.input = 'form-control';

    if (marker == 'danger') {
       alertify.confirm().destroy();
       alertify.defaults.theme.ok = 'btn btn-danger';
       alertify.confirm().set('labels', {ok: 'Confirm'});
    }
    if ( marker == 'warning') {
       alertify.confirm().destroy();
       alertify.defaults.theme.ok = 'btn btn-warning';
       alertify.confirm().set('labels', {ok: 'Ok'});
    }
    if (marker == 'success') {
       alertify.alert().destroy();
       alertify.defaults.theme.ok = 'btn btn-success';
       alertify.alert().set('labels', {ok: 'Ok'});
    }
}