Search code examples
javascriptjqueryasp.net-mvcpartial-viewsbootstrap-confirmation

bootstrap confirmation is not working in partial view


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');
});

Solution

  • $('[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>