I am working in one project with ASP.NET MVC having bootstrap, jquery and I have one main page inside that I have bind one partial view.
I have used bootstrap.confirmation in my application and it is working fine in all the main pages but when I try to implement in partial view html, it is not working.
My Code:
HTML
<a class="tooltips deleteOrg" data-container="body" data-placement="bottom" data-toggle="confirmation" data-original-title="Delete organization" data-id="@organization.Id">
<i class="fa fa-trash"></i>
</a>
JavaScript
$(document.body).on('confirmed.bs.confirmation', '.deleteOrg', function () {
var id = $(this).data('id');
});
$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
onConfirm: function() {
var id= $(this).data('id');
alert(id);
},
buttons: [
{
class: 'btn btn-primary',
label:"yes",
icon:"glyphicon glyphicon-ok"
},
{
class: 'btn btn-danger',
label:"no",
icon: 'glyphicon glyphicon-remove',
}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mistic100-Bootstrap-Confirmation/2.4.0/bootstrap-confirmation.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<a class="tooltips deleteOrg" data-container="body" data-placement="bottom" data-toggle="confirmation" data-original-title="Delete organization" data-id="test">
Click
</a>