How to return true or false from jQuery noty confirmation dialog

Question

I have a link button inside a repeater like this:

<asp:LinkButton ID="lnkDelete" runat="server" CommandName="delete" OnClientClick='javascript:return showConfirm("Are you sure you want to delete?")'
                                    CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ReasonId") %>'>Delete</asp:LinkButton>

and I use jQuery noty plugin to show confirmation when user click on delete.

The showConfirm() function is like this:

function showConfirm(message) {
    var n = noty({
        text: message, //'Are you sure?',
        type: 'confirm',
        dismissQueue: false,
        layout: 'center',
        theme: 'defaultTheme'
        , buttons:
            [{
                addClass: 'btn btn-primary', text: 'Ok', onClick: function ($noty) {
                    $noty.close(); return true;
                }
            },
            {
                addClass: 'btn btn-danger', text: 'Cancel', onClick: function ($noty) {
                    $noty.close(); return false
                }
            }]
    })

}

But it won' t return true or false. How can I return true or false when clicking on ok or cancel button.?

Answer 1

You can not return true or false the way you wish, because actually this is not a "real modal dialog" thats makes the browser, or any other window to wait for return.

The only browser dialog that can do that, using javascript is the confirm dialog.

The dialog you use is actually one div thats open on your page and show a message, unable to hold the post back from your input control. Alternative you may design it as to open, and in the case of Yes, to redirect to the page you wish, but the link that is calling it must only open it.

Answer 2

use Jquery $.Deferred.

var status = false;
var defer = new $.deferred();
defer.progress(function(status) {
  status = status;
  if ( status != undefined ) {
    defer.resolver();
    if ( !status ) {
      return false;
    } else {
      return true;
    }
  }
});
var confirm = showConfirm("Are you sure you want to delete?", defer);

and.. noty function

function showConfirm(message, defer) {
var _self = this;
var status = undefined;
var n = noty({
    text: message, //'Are you sure?',
    type: 'confirm',
    dismissQueue: false,
    layout: 'center',
    theme: 'defaultTheme'
    , modal: true
    , buttons:
        [{
            addClass: 'btn btn-primary', text: 'Ok', onClick: function ($noty) {
                _self.status = true;
                $noty.close();
                // return true;
                defer.notify(_self.status);
            }
        },
        {
            addClass: 'btn btn-danger', text: 'Cancel', onClick: function ($noty) {

                $noty.close();
                // return false
                defer.notify(_self.status);
            }
        }]
    })
}

end;

Answer 3

Similar to the first answer, but managing the deferred slightly differently, which is a bit more intuitive to me.

function showConfirm(msg) {
        var self = this;
        self.dfd = $.Deferred();
        var n = noty({
            text: msg,
            type: 'confirm',
            dismissQueue: false,
            layout: 'center',
            theme: 'defaultTheme'
            , modal: true
            , buttons:
                [{
                    addClass: 'btn btn-primary', text: 'Ok', onClick: function ($noty) {                            
                        $noty.close();
                        self.dfd.resolve(true);
                    }
                },
                {
                    addClass: 'btn btn-danger', text: 'Cancel', onClick: function ($noty) {
                        $noty.close();
                        self.dfd.resolve(false);
                    }
                }]
        })

        return self.dfd.promise();
    }

Then we can use...

showConfirm("Confirm your action?").then(function (status) {
            // status is true or false
        });

Answer 4

Here's a couple little useful functions i wrote for noty. this version expect the usage of animate.css library and foundation framework, however it will work with bootstrap as long as you replace the button css classes with those for bootstrap. Keep in mind, this function is designed to work with global namespace functions, since they are technically just methods of the window object. if you need to use functions of a custom object, change window to the name of your object in the line that says "heres where the magic happens"

//shows a noty alert message. _m is the message to display, _t is the type(error etc)
function alertHandle(_m,_t){
    noty({
        text: _m,
        type:_t,
        layout:'topCenter',
        animation: {
        open: 'animated pulse',
        close: 'animated flipOutX',
    }
    });
}

//noty confirm dialogue with callback function.
/*
_text = text of message to display 
confirmCB = callback function to call if user clicks continue.
args = args to pass to callback function . could be whatever you want it to be.
*/
function confirmModal(_text,confirmCB,args){
    noty({
        text: _text,
        layout: 'center',
        buttons: [
            {addClass: 'button success tiny radius no-margin', text: 'Continue', onClick: function($noty) {
                    $noty.close();
                    window[confirmCB].call(false,args); // heres where the magic happens.
                }
            },
            {addClass: 'button alert tiny radius no-margin', text: 'Cancel', onClick: function($noty) {
                    $noty.close();
                    alertHandle('the action was cancelled','information');
                }
            }
        ]
    });
}

Answer 5

function deleteFinance(ItemID, btn) {
            noty({
                text: 'are you sure of delete Item?', buttons: [{
                    addClass: 'btn btn-primary', text: 'yes',
                    onClick: function ($noty) {
                        $noty.close();
                        deleteFinance2(ItemID, btn);
                    }
                }, {
                    addClass: 'btn btn-danger', text: 'Cancel',
                    onClick: function ($noty) {
                        $noty.close();
                    }
                }]
               , layout: 'center'
            });
        }