I am unable to load remote html data using bootstrap popover. Below is my code. I tried this from below
Load a Bootstrap popover content with AJAX. Is this possible?
<a href="#" id="oneData" class="divAnchor" rel="popover"
load-remote-data="TestGetJson.htm">Bootstrap popover with ajax data</a>
Below code is inside script tag. When I debug using firebug i get response from server But it is not shown in the screen.
$(document).ready(function() {
$('#oneData').bind('click',function(){
var e=$(this);
//e.unbind('click');
$.get(e.attr('load-remote-data'),function(data){
e.popover({content: data, placement:'bottom', html:true}).popover('show');
});
});
});
Response from server
<div class="popover fade bottom in" ><div class="arrow"></div><h3 class="popover-title">pop Over Title</h3><div class="popover-content">Data From Server</div></div>
used below imports in my code
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<link href="css/bootstrap-popover.min.css" rel="stylesheet" media="screen"/>
<script type="text/javascript" src="js/bootstrap-popover.min.js"></script>