bootbox.confirm() not working properly

StackOverflow https://stackoverflow.com/questions/23357356

Question

What is the problem with bootbox.confirm()? This is my code:

var record = bootbox.confirm("Are you sure you want to delete", function (res) {
    if (res == true) {
        return true;
    } else {
        return false;
    }
}
});

It doesn't wait for confirmation and return true by default. if is use return false at the end to stop it from disappearing

var record = bootbox.confirm("Are you sure you want to delete", 
    function (res) {
        if(res == true)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
});
return false;

then it doesn't show any action against of clicking of "OK" or "cancel"

if i use any simple alert in true section to check behaviour it enters in true section and show simple alert and show required value of clicked button but if use return true in same section but it doesnt work 

var record = bootbox.confirm("Are you sure you want to delete", function (res) {
    if (res == true)
        alert('true');
    else
        alert('false')
}
});
return false;
Was it helpful?

Solution

I got the solution , bootstrap.confirm() is asynchronous in behaviour so we can't stop its flow but we can change our logic to use it like

first of all we have to stop its default behaviour and then use it as our requirment

whatever we want to do place it under the true section of the code 

         e.preventDefault();// used to stop its default behaviour 
             bootbox.confirm(Are you sure you want to delete ? , function (confirmed) {
                 if (confirmed == true) {
                  // place here what we want to do
                     __doPostBack('btnDelete', 'OnClick');
                 } 
                  else 
                  {

                   }
             });

OTHER TIPS

There is a extra flower braces in your code just remove it.

 var record = bootbox.confirm("Are you sure you want to delete", function (res) {
     if (res == true) {
         return true;
     } else {
         return false;
     }
     //}   // invalid closing brace
 });

this could be one of the issue for your confirm box to not work.

Happy Coding :)

Might be easier to understand... We split client side and server side event. Upon confirm, we trigger server-side click event... Just in case you don't like 

__doPostBack('btnDelete', 'OnClick')

Server side is omitted... 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<style>
    .hidden{
        display:none;
    }
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.0.0.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/bootbox.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="btnTest" runat="server" Text="Confirm 1" OnClientClick="return confirmClick(this);" />
            <asp:Button ID="btnReal" runat="server" Text="Actual 1" CssClass="real-button hidden"  OnClick="btnTest_Click" />
        </div>

        <div>
            <asp:Button ID="btnTest2" runat="server" Text="Confirm 2" OnClientClick="return confirmClick(this);" />
            <asp:Button ID="btnReal2" runat="server" Text="Actual 2" CssClass="real-button hidden"  OnClick="btnTest_Click" />
        </div>

        <div>
            <asp:Button ID="btnTest3" runat="server" Text="Confirm 3" OnClientClick="return confirmClick(this);" />
            <asp:Button ID="btnReal3" runat="server" Text="Actual 3" CssClass="real-button hidden"  OnClick="btnTest_Click" />
        </div>

    </form>
</body>
</html>

<script>
    function confirmClick(e) {

        var result = bootbox.confirm({
            message: "This is a confirm with custom button text and color! Do you like it?",
            buttons: {
                confirm: {
                    label: 'Yes',
                    className: 'btn-success'
                },
                cancel: {
                    label: 'No',
                    className: 'btn-danger'
                }
            },
            callback: function (result) {
                var real = $(e).parent().find('.real-button');
                if (result && real)
                {
                    console.log('This was logged in the callback: ' + result + real.val());
                    real.click();
                }
            }
        });

        return true;
    }
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top