We Keep Coding

Show and hide a popover on click of div's

Here is my jsfiddle: My fiddle
After drag n drop of "rule/event" class into "layout" class, how to create a popover with HTML form on-click or double-click of the dropped components?
$('[rel="popover"]').popover({
alert("hi");
container: 'body',
html: true,
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
}).click(function(e) {
e.preventDefault();
});

Boostrap - Popover only being fired after second click

I addClass/removeClass a CSS class called SiteClass dynamically (see this question for background). I bind a bootstrap popover to these like so:
$(document).ready(function(){
$("#SiteList").on('click','a.SiteClass', function(e){
alert('clicked');
e.preventDefault();
e.stopPropagation();
var strcontent = $(this).html();
var strTitle = 'Title for ' + strcontent;
var strMessage = 'Foo <b>Bar</b> Baz';
$(this).popover({
html: true,
title: strTitle,
content: strMessage
});
});
});
The first time I click I get the alert box 'clicked', but no popover. Subsequent clicks and the popover works.
Any clue as to why this is happening and to get the popover to fire from click 1?

$().popover(options) simply initializes your popover. You can trigger the display of the popover with:
$(this).popover('show');
If you would like to toggle the popover on click instead, try:
$(this).popover('toggle');
I think the reason it works only after the first click in your case is that with the first click the popover is initialized with the default trigger 'click', so that subsequent clicks (but not the first click) will trigger it.

after a lot of tries finally I have found out this solution and working fine:
<script>
$(document).ready(function () {
$(document).on("click", '#add-new', function (e) {
e.preventDefault();
$('#add-new').popover({
placement: 'right',
html: true,
container: 'body',
trigger: 'manual',
content: function () {
return $('#popover_content_wrapper').html();
},
});
$(this).popover('toggle');
});
});
</script>

Bootstrap 3.1.1 Popover Delegated OK Function

I have a table and last column has a button generated Dynamically.
<button id="popover-row' + row + '" rel="popover">' + docAccessText + ' ' + fileAccessText + '</Button>;
I am creating a Dynamic Popover on click of the Above Button.
// initialize the Popover
var popOverSettings = {
placement: 'bottom',
container: 'body',
html: true,
selector: '[rel="popover"]',
content: $('#permissionPopover').html()
}
// bind the popover on body
$("body").popover(popOverSettings).parent().delegate('button.btn_permission_ok', 'click', function(event) {
// Do something on click of OK
$("[rel=popover]").popover("destroy");
$(".popover").remove();
}
}).on("show.bs.popover", function(e) {
// hide all other popovers before showing the current popover
$("[rel=popover]").not(e.target).popover("destroy");
$(".popover").remove();
}).on("shown.bs.popover", function(e) {
// Do something after showing the popover
});
// click on cancel button removes the popover
$("body").popover(popOverSettings).parent().delegate('div.btn_permission_cancel', 'click', function() {
$("[rel=popover]").popover("destroy");
$(".popover").remove();
});
Everything works as expected, but only the first time. When i open this view again, things start duplicating. Popover functions start executing twice. If I close the view again, now popover functions start executing thrice.
I believe that when I am destroying the PopOver on Click of Delegated OK, The events are still there. I tried the below line of code to undelegate the event, but it's not working.
$(event.target).parent().undelegate('button.btn_permission_ok', 'click');
Please suggest.

Not a complete answer, but if you would like one popover per button to be triggered on the button, try using some code like this.
var popOverSettings = {
trigger: 'manual',
placement: 'bottom',
container: 'body',
html: true,
content: $('#permissionPopover').html()
};
$(document).on("click", "button[rel='popover']", function(e) {
var $btn = $(this);
$btn.popover(popoverOptions);
$btn.popover("show");
});

Draggabilly not adding event to newly added element

I'm using desandro draggabilly and I'm having a problem when inserting a new element. It seems that the event is not firing on the new element that was added.
Here's a jsfiddle.
Here's the code as well.
HTML
<div class="box draggable">1</div>
CSS
.box {
width: 200px;
height: 200px;
border: 1px solid red;
display: block;
}
JQUERY
$(document).ready(function () {
$.bridget('draggabilly', Draggabilly);
var $draggable = $('.draggable').draggabilly({
axis: 'x'
});
$draggable.on('dragEnd', function(e, p) {
$(this).parent().prepend('<div class="box draggable">2</div>');
$(this).prev().addClass('draggable')
$(this).remove();
});
});
On the code below when I dragged div 1, on dragEnd it will insert div 2 that has a class of draggable then remove div 1. The problem here is that div 2 is not being draggable even though it has a class of draggable.

You need to re-initialize it after prepending since it is added to DOM dynamically and event draggabilly will not be attached to it. So below will fix the issue:
$draggable.on('dragEnd', function(e, p) {
$(this).parent().prepend('<div class="box draggable">2</div>');
$('.draggable').draggabilly({
axis: 'x'
}); //re-initialize again
$(this).remove();
});
DEMO
UPDATE
Now if you want to call dragend event to the element you add and keep on incrementing the number on dragend just keep a global variable say i and increment it everytime as below:
var i=1; //global variable
$(document).ready(function () {
$.bridget('draggabilly', Draggabilly);
$('.draggable').draggabilly({
axis: 'x'
});
$(document).on('dragEnd','.draggable', function(e, p) {
i++; //increment it
$(this).parent().prepend('<div class="box draggable">'+i+'</div>');
//display text as i
$('.draggable').draggabilly({
axis: 'x'
});
$(this).remove();//remove previous one
});
});
Updated demo

You have to initialize every time on creation of your div and bind event then
something as below -
$(document).ready(function () {
$.bridget('draggabilly', Draggabilly);
var $draggable = $('.draggable').draggabilly({
axis: 'x'
});
$draggable.on('dragEnd', callback);
});
var co=2;
function callback(e, p) {
$(this).parent().prepend('<div class="box draggable">'+co++ +'</div>');
$(this).prev().addClass('draggable')
$(this).remove();
$(".draggable").draggabilly({
axis: 'x'
});
$(".draggable").on('dragEnd', callback);
}
LIVE http://jsfiddle.net/mailmerohit5/L9kgeu3f/

Popover does not get anchored to the triggering element

So my Twitter Bootstrap popovers seem to be positionally challenged when the triggering element is contained within an element with the style -ms-overflow-y: auto; (a scrollable element within the window).
When the element is scrolled, the popover does not scroll with it.
I would really like the popover to move with the content within this scrollable element. How can I achieve this?
popover code:
$(this).popover({
animation: false,
html: true,
placement: popover.placement || 'auto bottom',
title: popover.title,
content: popover.validationMessage + popover.content,
trigger: 'manual',
container: '.content-panel'
}).click(function (e) {
$('BUTTON[data-toggle="popover"]').each(function (index, element) { $(this).popover('hide'); });
$(this).popover('show');
$('#' + $(this).attr('data-for')).focus();
});
.content-panel is the scrollable element.
fiddle me this, Batman
http://jsfiddle.net/VUZhL/171/
Update
I would like the popover to continue floating overtop the other elements. When using position:relative; on the parent element it contains the popover instead of letting it float over top.
Bad
Good

Parent element (offsetParent) of popover need to not be static, you could postionned it relatively to document:
position: relative;
See jsFiddle
EDIT: for your use case, you could bind onscroll event of container and use following snippet:
SEE jsFiddle
$(function () {
$('#example').popover();
$('div').on('scroll', function () {
var $container = $(this);
$(this).find('.popover').each(function () {
$(this).css({
top: - $container.scrollTop()
});
});
});
});

For BS 3 and above
you can use container: $(element)
Example:
let elem = $(this)
$(elem).popover({
selector: '[rel=popover]',
trigger: 'hover',
container: $(elem),
placement: 'bottom',
html: true,
content: 'Popover Content'
});