XPages - Bootstrap popover

Question

I have an icon, which when you hover, pops up some extra information in a bootstrap popover

This works as expected, however, if I then click on any field on the page, which then does a partial refresh of a div containing the icon, it then loses the hover functionality.

Icon code:

<!--INFO BUTTON START-->
                    <xp:text escape="false" id="computedField4">
                        <xp:this.value><![CDATA[#{javascript:try{
    var text = @DbLookup(@DbName(), "LookupKeywordLists", "Info"+compositeData.fieldName, "Members");
    return "&nbsp;<i class='fa fa-info-circle' data-container='body' data-toggle='popover' data-trigger='hover' data-placement='right' data-content='"+text+"'></i>"
}catch(e){
    openLogBean.addError(e,this.getParent());
}

}]]></xp:this.value>
                        <xp:this.rendered><![CDATA[#{javascript:try{
    return compositeData.showInfoIcon;
}catch(e){
    openLogBean.addError(e,this.getParent());
}}]]></xp:this.rendered>
                    </xp:text>

                    <!--INFO BUTTON END-->

Script block on the page:

<xp:scriptBlock id="scriptBlock1">
            <xp:this.value><![CDATA[$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        trigger: 'hover',
        title: 'Information'
    });
});]]></xp:this.value>
        </xp:scriptBlock>

The script block is currently outside the div that the partial refresh "refreshes" however I tried putting it within the div, which didn't resolve the issue. Any ideas? Thanks

Answer 1

You need to add the popover when the partial refresh occurs. In order to do so you use Dojo to subscribe to the partialrefresh-complete event.

This answer can help you: https://stackoverflow.com/a/49014247/785061.