Bootstrap Popover Not Working When Loaded With Ajax

javascript jquery html ajax twitter-bootstrap

11,971

Solution 1

The problem is that you're setting up the popover inside of the function $(). Rather than

$(function ()  
{ $("#example").popover();  
});

It should be just

$("#example").popover();

Or perhaps better

$(document).ajaxComplete(function() {
  $("#example").popover();
});

The reason being that any function inside of $() is run when the document is first finished loading, when the "document ready" event is fired. When that code is pasted inside of the original HTML, it works because it's present when the document finishes loading.

When it's the response from an AJAX call, it won't run inside of $(), because the "document ready" event already fired some time ago.

Solution 2

with the help of jQuery you can initialize all things that needs to be initialized using

$(document).ajaxSuccess(function () {
    $("[data-toggle=popover]").popover();
    $("[data-toggle=tooltip]").tooltip();
    // any other code
});

inspired from Olaf Dietsche answer

Solution 3

<script>$(function () {  $('[data-toggle="tooltip"]').tooltip()});</script>

Add this at the end of whatever you are loading in with ajax. You should already have this somewhere to opt-in to the tooltip, but put it again to re-initialize the tooltip.

11,971

Author by

Admin

Updated on July 27, 2022

Comments

Admin almost 2 years

When I load Bootstrap popver content with ajax, the popover is not showing.

Javascript:

var id = 1;
$.post("load.php?pageid",
        {
          pageid:id;
        },
        function(data,status){
         document.getElementById("body").innerHTML=data;
        });

HTML response:

<a href="#" id="example" class="btn btn-danger" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
<script>  
$(function ()  
{ $("#example").popover();  
});  
</script>

When I place the HTML response above directly in the <body id="body"></body> code, the popover works fine. I dont understand what is going wrong here.