CODEWITHSUNDEEP
bootstrap-4bootstrap-popoverpopper.js
HAREESH PONNAM
HAREESH PONNAM

Reputation: 21

bootstrap4 popover is not working with html

I have updated bootstrap with 4.6.0 all of sudden my previously working popover is stopped working. I have placed popper.min.js also, but still not able to fix my issue.

<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/jquery-migrate-3.3.2.min.js"></script>
<script src="~/Scripts/Tooltip/jquery.tooltipster.js"></script>   
<script src="~/Scripts/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

<a class="btn btn-primary btn-xs" tabindex="0" id="btnUploadCOI" data-html="true" data-container="body" data-toggle="popover" data-placement="bottom" data-content="And here's some amazing content. It's very engaging. Right?" style="display: inline-block;">Upload COI</a>    

<div id="divUploadCOI" style="display:none">
</div>

Js code

I'm able to see data-content value in by inspect Upload COI button but couldn't see popover.

I have spent whole day for this issue fix, please help me

        $(function () {
        $('[data-toggle="popover"]').popover();
    })

    $('html').on('click', function (e) {
        if (typeof $(e.target).data('content') == 'undefined' &&
           !$(e.target).parents().is('.popover.in')) {
            $('[data-content]').popover('hide');
            $('#btnUploadCOI').attr("disabled", false);
        }
    });


    $(document).on("click", "#btnUploadCOI", function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        $('#btnUploadCOI').attr("disabled", true);
            var url = '@Url.Action("GetProjectsByProviderID", "ServiceProviders")' + '?providerIDEN=' + $('#Provider_ID_EN').val();
            $('#divUploadCOI').load(url, function (response, status) {
                $("#btnUploadCOI").attr('data-content', response);
                $('#btnUploadCOI').popover('show');
                $('#btnUploadCOI').attr("disabled", true);
            });
    });

Upvotes: 0

Views: 1346

Answers (3)

KDev
KDev

Reputation: 11

Please see whitelist table inside popover

I came across this issue when upgrading to Bootstrap 4 from Bootstrap 3 and all of my popovers quit working. If you have to leave sanitize enabled, you can whitelist specific HTML tags like so: $(document).ready(function () { $.fn.popover.Constructor.Default.whiteList.table = []; $.fn.popover.Constructor.Default.whiteList.tr = []; $.fn.popover.Constructor.Default.whiteList.td = []; $.fn.popover.Constructor.Default.whiteList.th = []; $.fn.popover.Constructor.Default.whiteList.div = []; $.fn.popover.Constructor.Default.whiteList.tbody = []; $.fn.popover.Constructor.Default.whiteList.thead = [];

Upvotes: 0

HAREESH PONNAM
HAREESH PONNAM

Reputation: 21

By placing sanitize: false in popover initialization - displaying popover.

$('[data-toggle="popover"]').popover({
  sanitize: false
});

Upvotes: 1

Wynn Teo
Wynn Teo

Reputation: 190

Try using bootstrap bundle, it contains the popper already.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


<html>
<head>

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.3.2/jquery-migrate.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
    $(function () {
        $('[data-toggle="popover"]').popover();
    })

    $('html').on('click', function (e) {
        if (typeof $(e.target).data('content') == 'undefined' &&
           !$(e.target).parents().is('.popover.in')) {
            $('[data-content]').popover('hide');
            $('#btnUploadCOI').attr("disabled", false);
        }
    });


    $(document).on("click", "#btnUploadCOI", function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        $('#btnUploadCOI').attr("disabled", true);
            var url = '@Url.Action("GetProjectsByProviderID", "ServiceProviders")' + '?providerIDEN=' + $('#Provider_ID_EN').val();
           // $('#divUploadCOI').load(url, function (response, status) {
                $("#btnUploadCOI").attr('data-content', "hello world");
                $('#btnUploadCOI').popover('show');
                $('#btnUploadCOI').attr("disabled", true);
           // });
    });
</script>
    </head>
  <body>

<a class="btn btn-primary btn-xs" tabindex="0" id="btnUploadCOI" data-html="true" data-container="body" data-toggle="popover" data-placement="bottom" data-content="And here's some amazing content. It's very engaging. Right?" style="display: inline-block;">Upload COI</a>    

<div id="divUploadCOI" style="display:none">
</div>

</body>
</html>

Upvotes: 0

Related Questions