Bootstrap .popover() with ajax loaded data

by

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?

2 thoughts 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