Geek Answers Handbook

Bootstrap Popover does not work on boot using Ajax

When I load the contents of the Bootstrap popper using ajax, the popover does not appear.

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 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 put the HTML response above directly into the <body id="body"></body> code, popover works fine. I don’t understand what is going on here.

+7
javascript jquery html ajax twitter-bootstrap
source share
3 answers

The problem is that you are setting up popover inside the $ () function. Instead

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

It should be easy

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

Or maybe better

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

The reason is that any function inside $ () is launched when the document ends first, when the "ready for document" event occurs. When this code is pasted inside the source HTML, it works because it is present when the document finishes loading.

When this is the response from an AJAX call, it will not be fired inside $ (), because the "ready ready" event was already fired some time ago.

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

Add this to the end of what you download with ajax. You should already have this somewhere to enter the tooltip, but drop it again to reinitialize the tooltip.

+5
source share

with jQuery you can initialize all the things you need to initialize using

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

inspired by olaf diet

+2
source share

More articles:


All Articles