Bootstrap .popover() with ajax loaded data

I have the following setup, which makes the popover appear on the second hover event, since it is not yet been created. The data is called via ajax, and I need to somehow create the .popover() before this, yet activate it successfully afterwards.

$('.entry').on('mouseenter', function () {
    var achievementId = $(this).attr('data-entry-achievement-id');
    var entry = this;

    var entryData = function(response) {
        var result = response;
        $(entry).popover({
            html: true,
            placement: 'top',
            trigger: 'hover',
            title: result.data.definition,
            content: result.data.achieved_at
        }, "show");
    }
    $.ajax({
        type: "GET",
        url: 'href here..',
        datatype: "json",
        success: entryData,
    });
});

How can I achieve this?

1 thought on “Bootstrap .popover() with ajax loaded data”

  1. This works, but then, due to server response or whatever reason, I get the following error:

    $('.entry').popover();
    $('.entry').on('mouseenter', function () {
        var achievementId = $(this).attr('data-entry-achievement-id');
        var entry = this;
    
        var entryData = function(response) {
            var result = response;
    
            $(entry).popover('destroy').popover({
                html: true,
                placement: 'top',
                trigger: 'hover',
                title: result.data.definition,
                content: result.data.achieved_at
            });
    
            $(entry).popover("show");
        }
        $.ajax({
            type: "GET",
            url: 'href here...',
            datatype: "json",
            success: entryData,
        });
    });
    
    // Error shown in console:
    
    tooltip.js:380 Uncaught TypeError: Cannot read property 'trigger' of null
    at HTMLDivElement.complete (tooltip.js:380)
    at HTMLDivElement.fn (jquery.js:4496)
    at HTMLDivElement.handle (transition.js:54)
    at HTMLDivElement.dispatch (jquery.js:4737)
    at HTMLDivElement.elemData.handle (jquery.js:4549)
    at Object.trigger (jquery.js:7807)
    at HTMLDivElement.<anonymous> (jquery.js:7875)
    at Function.each (jquery.js:365)
    at jQuery.fn.init.each (jquery.js:137)
    at jQuery.fn.init.trigger (jquery.js:7874)
    
    Reply

Leave a Comment