How to add Confirmation Message ASP button click

Question

I need to add confirmation when I click a button.

My ASPX code as follows,

<script>
    function ConfirmMessage() {
        confirmDialog('Delete TEST', "Are you sure you want to delete");
    }
</script>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:Panel ID="Panel1" runat="server">
        <div class="service-display-order">
            <div class="row">
                <div class="col-xs-12 text-right">
                    <button id="serviceBack" class="btn btn-default" onclick="onLinkClick('ServicesAdmin.aspx');return false;" ><i class="fa fa-arrow-left" aria-hidden="true" ></i>&nbsp;Back</button>
                    <button id="btnSaveDisplayOrder" runat="server" onserverclick="btnSaveDisplayOrder_Click" class="btn btn-default"><i class="fa fa-user-plus" aria-hidden="true"></i>&nbsp;Save</button>
                    <asp:HiddenField ID="hdnDisplayOrderSaveData" runat="server" Value="" />
                </div>
            </div>
        </div>
    </asp:Panel>
</asp:Content>

I already have JS function for confirm Dialog, which as follows,

function confirmDialog(title, message, callbackOnYes, callbackOnNo, callbackOnClose, callbackXClose) {
    var this$ = this.$;
    this$.modal.close();
    this$('#confirm').modal({
        closeHTML: "<a href='#' id='modalClose' title='Close' class='modal-close'>x</a>",
        overlayId: 'simplemodal-overlay',
        containerId: 'simplemodal-container',
        onShow: function (dialog) {
            this$('#simplemodal-container').css({ 'width': 'auto', 'height': 'auto', 'padding-bottom': '5px' });
            this$('.message').css("display", "block");
            this$('.message', dialog.data[0]).append(message);
            this$('.title', dialog.data[0]).append(title ? title : 'Confirm');
            var tmpW = this$('#simplemodal-container').width() / 2
            var tmpH = this$('#simplemodal-container').height() / 2
            this$('#simplemodal-container').css({ 'margin-left': tmpW * -1, 'margin-top': tmpH * -1 })
            if (!this$.isFunction(callbackOnYes)) {
                this$('.yesbutton', dialog.data[0]).css("display", "none");
                this$('.nobutton', dialog.data[0]).css("display", "none");
            } else {
                this$('.closebutton', dialog.data[0]).css("display", "none");
            }

            // if the user clicks "yes"
            this$('.yesbutton', dialog.data[0]).click(function () {
                // call the callback
                if (this$.isFunction(callbackOnYes)) {
                    callbackOnYes();
                }
                // close the dialog
                this$.modal.close();
            });

            // if the user clicks "no"
            this$('.nobutton', dialog.data[0]).click(function () {
                // call the callback
                if (this$.isFunction(callbackOnNo)) {
                    callbackOnNo();
                }
                // close the dialog
                this$.modal.close();
            });

            // if the user clicks "close"
            this$('.closebutton', dialog.data[0]).click(function () {
                // close the dialog
                this$.modal.close();
            });

            $("#modalClose").click(function () {
                if (this$.isFunction(callbackXClose)) {
                    callbackXClose();
                }
            });
        },
        onClose: function () { this$.modal.close(); if (this$.isFunction(callbackOnClose)) callbackOnClose(); }
    });
}

I tried to add OnClientClick to the button, but it does not working,

<button id="btnSaveDisplayOrder" runat="server" OnClientClick="ConfirmMessage() return false;" onserverclick="btnSaveDisplayOrder_Click" class="btn btn-default"><i class="fa fa-user-plus" aria-hidden="true"></i>&nbsp;Save</button>

And also trying to call it from Code-behind,

protected void btnSaveDisplayOrder_Click(object sender, EventArgs e)
{
    //ClientScript.RegisterStartupScript(typeof(Page), "Popup", "ConfirmMessage()", true);
}

But its not also working, How can I add confirmation popup.please help me

Answer 1

Have you tried setting a simple

alert('message')

? Just to check if the code is working.

When adding a function to a OnClientClick i usually don't need to do anything but to add the name of the function, unless i am sending parameters.:

OnClientClick="ConfirmMessage()"

You post the function but where do you have it? If it's on an external file then you need to specify where you have it.

From code behind you can add an alert as well, just add a new controller on your event.