Trying to implement Bootstrap Confirmation on asp.net web page

Question

I am trying to implement Bootstrap Confirmation (http://ethaizone.github.io/Bootstrap-Confirmation/#top) on an asp.net web page (C#) but I'm running into issues.

Master Page Refs

<asp:ScriptReference Path="Scripts/jquery-1.11.2.js" />
<asp:ScriptReference Path="Scripts/bootstrap.js" />
<asp:ScriptReference Path="Scripts/bootstrap-datepicker.js" />
<asp:ScriptReference Path="Scripts/jquery.validate.min.js"/>
<asp:ScriptReference Path="Scripts/bootstrap-confirmation.js"/>

Button

<asp:Button ID="btnCancel" data-toggle="confirmation-singleton" data-placement="left" CssClass="btn btn-danger" runat="server" Text="Cancel" OnClick="btnCancel_Click" />

jQuery

 $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="confirmation-singleton"]').confirmation('show');

Code behind button

 protected void btnCancel_Click(object sender, EventArgs e)
        {                
            Response.Redirect("blabla.aspx");
        }

When I click on button I get redirected to page , no confirmation box :-(

Checked the console on Chrome and no errors. When I run the jQuery from console I get

<input type="submit" name="ctl00$ContentSection$btnCancel" value="Cancel" id="ctl00_ContentSection_btnCancel" class="btn btn-danger" data-toggle="confirmation-singleton" data-placement="left" data-original-title="" title="">

Any ideas ? Thanks in advance for your help

this might help http://stackoverflow.com/questions/19139747/stopping-onclick-from-firing-when-onclientclick-is-false — Tjaart van der Walt, May 12 '15 at 14:28

Dean · Accepted Answer · 2015-05-12T17:00:16.197

I tried your code and confirmed that it didn't work even though it should. It's because this plug-in is out of date and doesn't support Bootstrap 3:

https://github.com/ethaizone/Bootstrap-Confirmation/issues/5

There is a fork of that project that somebody else built that has Bootstrap 3 support:

https://github.com/tavicu/bs-confirmation

I was able to get the confirmation working using that updated fork. Here's my page:

<h1>Hello, world!</h1>

<form runat="server">
    <!-- The script manager is already probably in your master page so you don't have to worry about this, 
        but it is important to note because it will detect that we have a ClientScriptGetPostBackEvenReference
        and make sure we have access to __doPostBack. -->
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div class="container">
        <asp:Button ID="btnCancel" data-toggle="confirmation-singleton" data-placement="right" CssClass="btn btn-danger" runat="server" Text="Cancel" OnClick="btnCancel_Click" />
    </div>
</form>

<!-- I am linking to bootstrap.css in my head but omitted that here for brevity -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-confirmation.js"></script>

<script>
    $('[data-toggle="confirmation-singleton"]').confirmation({
        singleton: true,
        // On confirm, call our btnCancel postback...
        onConfirm: function () {
            <%=Page.ClientScript.GetPostBackEventReference(btnCancel, string.Empty)%>;
        }
    });
</script>

... which produces this:

Hello World

The callback for onConfirm will fire our cancel button postback.

Hope this helps!

Hi Dean, made the changes to reflect the above, but when I click on the options it is not doing the post back for the redirect code ? Any idea on how to get that working ? Thanks for your help so far — Key-eat, May 12 '15 at 16:29
Sure - I'll update the answer with this second question. You just need an onConfirm callback function. Right now, it is set to `onConfirm function function(){}` which is the default. And it does nothing. — Dean, May 12 '15 at 16:54
OK... I edited it to include an example of how you could use `onConfirm` to actually DO something and fire your postback... — Dean, May 12 '15 at 17:00

Trying to implement Bootstrap Confirmation on asp.net web page

1 Answers1