Boostrap 5 popover only works for the first three rows

Rawland_Hustle

Link to test case: http://themeadow.se/ntjperrors/
Debugger code (debug.datatables.net):
Error messages shown: No error message shown.
Description of problem:
I've spent hours trying to figure out how to implement Bootstrap 5 popovers. I almost got it to work but only for the first three rows. What's going on?

$(document).ready(function(){

    var table = $('#errorTable').DataTable( {
        "ajax": {
           "url": "http://themeadow.se/ntjperrors/ErrorCalls.php",
           "dataSrc": ""
        },
        "dom": "P<'myfilter'f>rlBptip",
        "pageLength": 100,
        "fixedHeader": true,
        "order": [[ "1", "asc" ]],
        "buttons": [
            'excel', 'print'
        ],
        "columns": [
            {"data": "ServiceConsumerHsaId"},
            {"data": "ServiceConsumerDescription"},
            {"data": "ServiceContract"},
            {"data": "LogicalAddress"},
            {"data": "LogicalAddressDescription"},
            {"data": "ErrorCode"},
            {"data": "ServiceProducerHsaId"},
            {"data": "ServiceProducerDescription"},
            {"data": "EndpointUrl"},
            {"data": "SnapshotTime"},
            {"data": "Requests"},
        ],
        "columnDefs": [
            { "width": "15%", "targets": 1 },
            { "width": "15%", "targets": 4 },
            { "width": "15%", "targets": 7 },
            {
                "targets": [  9 ],
                "visible": false,
                "searchable": false
            },
            {
                "targets": 2,
                "data": "ServiceContract",
                "render": function ( data, type, row, meta ) {

                    if (data === 'null') {
                        return data;
                    } else {
                        data = data.split( ':' );
                        data = data[ data.length - 2 ];
                        let substringToRemove = "Responder";
                        data = data.slice(0,-(substringToRemove.length));
                        return data;
                    }

                }
            },
            {
                "targets": 8,
                "data": "ServiceContract",
                "render": function ( data, type, row, meta ) {

                    if (data === 'null') {
                        return "";
                    } else {
                        return '<a href="#0" data-toggle="popover" title="Anropsadress" data-content="' + data + '" data-trigger="focus">popover</a>';
                    }

                }
            },
            {
                "searchPanes": {
                    "show": true
                },
                "targets": [1, 2, 4, 5, 7]
            },
            {
                "searchPanes": {
                    "show": false
                },
                "targets": [0, 3, 6, 8, 9, 10]
            }
        ],
        "rowGroup": {
            "dataSrc": "ServiceConsumerDescription"
        },
        "language": {
            "decimal":        "",
            "emptyTable":     "Ingen data tillgänglig i tabellen",
            "info":           "Visar _START_ till _END_ av _TOTAL_ rader",
            "infoEmpty":      "Visar 0 till 0 av 0 rader",
            "infoFiltered":   "(filtrerat från _MAX_ rader)",
            "infoPostFix":    "",
            "thousands":      ",",
            "lengthMenu":     "Visa _MENU_ rader",
            "loadingRecords": "Laddar...",
            "processing":     "Bearbetar...",
            "search":         "Sök:",
            "zeroRecords":    "Inga matchningar",
            "paginate": {
                "first":      "Första",
                "last":       "Sista",
                "next":       "Nästa",
                "previous":   "Föregående"
            },
            "aria": {
                "sortAscending":  ": Aktivera för att sortera stigande",
                "sortDescending": ": Aktivera för att sortera fallande"
            },
            "searchPanes": {
                "loadMessage": 'Laddar filtreringspaneler...',
                "title": {
                    _: '%d filter valda',
                    0: 'Inga filter valda',
                    1: 'Ett filter valt'
                },
                "collapseMessage": 'Fäll in',
                "showMessage": 'Visa',
                "clearMessage": 'Rensa'
            }
        },
        "drawCallback": function() {
            $('[data-toggle="popover"]').popover();
        },

    });

});

colin

I'm not familiar with BS5 popovers - what is you're trying to do?

Colin

Rawland_Hustle

I want to have popovers in the cells within one of my columns. They should display data that takes up too much space in the column.

allan

There is nothing obvious that stands out in the code above that would cause an issue that I can see. So I went to look at your page but it gets stuck at "Laddar...". It appears that there is a CORS error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://themeadow.se/ntjperrors/ErrorCalls.php?_=1649669853914. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

If that can be resolved, I'll take another look at the page and see if I can spot what is going wrong.

Thanks,
Allan

Rawland_Hustle

@allan Yeah, that part is solved now. Please visit https://themeadow.se/ntjperrors/.

The code is in https://themeadow.se/ntjperrors/main.js

kthorngren

The only table rows in the DOM are the rows displayed on the current page. I haven't used the BS popover either but it looks like you can configure a delegated selector option for dynamically shown elements. I would look at using this and use createdRow or rowCallback (if the data changes) to look at the length and apply the popover attributes if needed.

Kevin

Rawland_Hustle

I think my problem was that I used Bootstrap 4 cdn and Bootstrap 5 syntax