Clint Eastwood Clint Eastwood - 2 months ago 22
ASP.NET (C#) Question

Cannot fire bootstrap-confirmation

I created the following popover confirmation using bootstrap-confirmation and want to fire this confirmation onClose event of a Dropdownlist. Although I can get the console log on every close of Dropdownlist, I cannot display the confirmation window onClose as well. Is there a way for manually firing it?

@Html.DropDownListFor(m => m.GroupId, new SelectList(Model.Groups, "Value", "Text"),
"Select", new { data_toggle = "confirmation" })

$('#GroupId').on('select2:close', onClose)

function onClose(evt) {
console.log('close...'); //this line is executed

//I think the problem is related to this part. I might be using it on the wrong section
var Confirmation = require('confirmation-popover');
var confirm = new Confirmation({
rootSelector: '[data-toggle=confirmation]',
// other options
selector: '[data-toggle="confirmation"]',
title: 'Are you sure?',
placement: 'top',
btnOkIcon: 'glyphicon glyphicon-ok',
btnOkClass: 'btn btn-sm btn-success',
btnOkLabel: 'Yes',
btnCancelIcon: 'glyphicon glyphicon-remove',
btnCancelClass: 'btn btn-sm btn-danger',
btnCancelLabel: 'No'
});
confirm.show(el);
}

Answer

DEMO attached: Hope this is what you asking for.

$("select").on("change",function(){
  $('[data-toggle=confirmation]').confirmation();
});
  <link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  
<script src="http://bootstrap-confirmation.js.org/dist/bootstrap-confirmation2/bootstrap-

confirmation.min.js"></script>

<br/>
<br/>
<br/>
<br/><br/><br/><br/>

<select  class="btn btn-large btn-primary" data-toggle="confirmation"
        data-btn-ok-label="Continue" data-btn-ok-icon="glyphicon glyphicon-share-alt"
        data-btn-ok-class="btn-success"
        data-btn-cancel-label="Stoooop!" data-btn-cancel-icon="glyphicon glyphicon-ban-circle"
        data-btn-cancel-class="btn-danger"
        data-title="Is it ok?" data-content="This might be dangerous">
  <option value="volvo">Option 1</option>
  <option value="saab">Option 2</option>
  <option value="vw">Option 3</option>
  <option value="audi" selected>Option 4</option>
</select>