Boostrap 5 popover only works for the first three rows

Boostrap 5 popover only works for the first three rows

Rawland_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

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();
        },

    });

});

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

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

    Colin

  • Rawland_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

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

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited April 2022 Answer ✓

    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_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

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

Sign In or Register to comment.