Alertify dialog disappeared before confirming

Question

I was just writing some code and I met a problem like this:

alertify.dialog("confirm").set(
{
    'labels':
    {
        ok: 'Personal',
        cancel: 'Share'
    },
    'message': 'Select target:',
    'onok': function()
    {
        alertify.confirm($("#dir_select_user").get(0), function()
        {
            var i = $("#dir_select_user .dir_selector").val();
            t.find(".move_des").val(i);
            t.find(".move_verify").val("1");
            t.submit();
        }).set('labels',
        {
            ok: alertify.defaults.glossary.ok,
            cancel: alertify.defaults.glossary.cancel
        });
    },
    'oncancel': function()
    {
        alertify.confirm($("#dir_select_share").get(0), function()
        {
            var i = $("#dir_select_share .dir_selector").val();
            t.find(".move_des").val(i);
            t.find(".move_verify").val("1");
            t.submit();
        }).set('labels',
        {
            ok: alertify.defaults.glossary.ok,
            cancel: alertify.defaults.glossary.cancel
        });
    }
})   }).show();

I use the alertifyjs library from http://alertifyjs.com (not from http://fabien-d.github.io/alertify.js/).

If you try this code, you'll find that 'onok' and 'oncancel' dialogs quickly disappear after choosing personal or share.

What's the problem here? How can I solve it?

Answer 1

The source of your problem is that you are trying to show the same dialog again while its being closed. The default AlertifyJS dialogs are all singletons (one instance at all times).

You have 2 solutions for this:

1. Delay showing the second confirm until the first confirm is actually closed.

   alertify.confirm("confirm ? ", 
       function onOk() {
           //delay showing the confirm again 
           //till the first confirm is actually closed.
           setTimeout(function () {
               alertify.confirm("confirm another time ?");
           }, 100);
       },
       function onCancel() {
           //no delay, this will fail to show!
           alertify.confirm("this will not be shown!");
       }
   );
   

2. Create your own transient (multi-instance) confirm, simply inherit from the existing one.

   // transient (multi-instance)
   alertify.dialog('myConfirm', function factory(){ return {};},true,'confirm');
   alertify.myConfirm("confirm ? ", function(){
       alertify.myConfirm("confirm another time ?");
   });
   

   Note: be careful with this, as each call to a transient dialog will create a new instance, you may save references to launched instances and re-use them!

See demo here.