Bootstrap - popover inside a popover - javascript

I'm attempting to put a bootstrap popover inside another popover. The first popup functions correctly (opens and has the HTML content specified) but the second, while opening properly seems to not have any of the settings I set enabled (html:true, trigger:'manual', or the html content). See the demo below:
Fiddle
<div>
Click
<div id="popover_content_wrapper1" style="display: none">
Click again
</div>
<div id="popover_content_wrapper2" style="display: none">
<b>Hello world</b>
</div>
</div>
$('#popover1').popover({
html: true,
trigger: 'manual',
content: function() {
return $('#popover_content_wrapper1').html();
}
});
$(document).on('click', '#popover1', function() {
$(this).popover('toggle');
});
$('#popover2').popover({
html: true,
trigger: 'manual',
content: function() {
return $('#popover_content_wrapper2').html();
}
});
$(document).on('click', '#popover2', function() {
$(this).popover('toggle');
});
I'd appreciate any tips/help.
Thanks!

That happens because at the time you initialize #popover2, it still doesn't "exists". It will only exists once the #popover1 is toggled.
So, you have to initialize it every time you toggle #popover1, because when it hides, it is removed from DOM (children included)
$(document).on('click', '#popover1', function() {
$(this).popover('toggle');
$('#popover2').popover({
html: true,
trigger: 'manual',
content: function() {
return $('#popover_content_wrapper2').html();
}
});
});
http://jsfiddle.net/kg7nyo6e/1/

As bootstrap does not support popover inside a popover, I have initialised popover inside the content of the first popover. You can simply add following javascript code in the first popover content as follows.
<script>
jQuery(function () {
jQuery('[data-toggle="popover"]').popover();
});
</script>
Hope it can help.

Related

How to disable popover behaviour for an inner element

I have a container with some details and a button inside it. and the container has popover behavior when we hover over it. the problem is I need to disable popover behavior while hovering over the button inside it. heres the fiddle Thanks in advance.
<div class="container">
<p>name: </p>
<p>age: </p>
<p>department:</p>
<button class="btn btn-primary">Connect</button>
</div>
$('.container').popover({
trigger: "hover",
content: "sample content"
})
Add below codes into JavaScript block.
$('.container button').mouseover(function(e) {
$('.container').popover('hide');
});
$('.container button').mouseout(function(e) {
$('.container').popover('show');
});
You can do like this:
$('.container button').hover(function(){
$('.container').popover('hide');
},function(){
$('.container').popover('show');
});
Fiddle: https://jsfiddle.net/fwcrt2hy/
I suggest...
$('.container p').popover({
trigger: "hover",
content: "sample content"
});
(i.e. changing the selector to .container p) because the only content in your .container besides the <button> is paragraph (<p>) elements.
Possible Drawbacks
If your .container has padding, the padding area will not trigger the popover behavior.
You can use selector option within popover() method. If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added.
$(function () {
$('.container').popover({
trigger: "hover",
content: "sample content",
selector: 'p' //added this line
})
});
Source: https://getbootstrap.com/docs/4.0/components/popovers/#options

delegate event on jquery for popover bootstrap not working correctly

i am quite new with this delegate thing for dynamic elements. so today i tested again with a generated dynamic template from some example in stackover for popover.
here is my dynamic html content.
<a id="testpop" class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>
<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
<div class="popover-heading">
This is the heading for #1
</div>
<div class="popover-body">
This is the body for #1
</div>
</div>
and then, i have this script on my js
$('#resultContent').on('click','#testpop', function(e) { //use on if jQuery 1.7+
// Enables popover #2
$("[data-toggle=popover]").popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
resultContent is the div here where i add .html all my html codes.
i manage to attached the delegate event (i think) but is acting strange as my 1st click on the testpop button, the popover won't show. Until i press the 2nd and 3rd time only it will pop up. Am i doing this delegating wrong?
credits for this test code: HTML inside Twitter Bootstrap popover
You forgot to add a trigger in the popover options. The data-trigger in the element doesn't do too much when you really only initialize the popover() once you click the element. In fact, your JS code would propably work better like so:
$("[data-toggle=popover]").popover({
html : true,
trigger: 'click',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
EDIT
Popover should generally be initialized on page load:
$("[data-toggle=popover]").popover();
Putting it inside a click event will not enable popover on the element until you click it first.
Removing the click event from your original JS code should enable it on page load.
If however, the element you mean to attach the popover to is dynamically added to the DOM after page load, you should reinitalize the popover after adding it.
Wrapping the popover in a function would make that much easier.
function addPopover(selector){
$(selector).popover({
html : true,
trigger: 'click',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
}
And whenever you add an element to the page that should have a popover, you simply call the function, with a selector for the element. Example for the element you have in your code:
addPopover("[data-toggle=popover]");
In your code, you are configuring the popover on click event of the button.
So, this is how it happens.
Click the anchor link
Initialize the popover with options. (This doesnt mean it displays the popover, it is just a initialization)
Click on the popover again (Popover is already bound because of the earlier call and then it shows)
Also, you need to ensure the popover is not bound to the element again and again to avoid repeated popover bindings.
$('#resultContent').on('click', '#testpop', function(e) { //use on if jQuery 1.7+
// Enables popover #2
$("[data-toggle=popover]").popover({
html: true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
}).popover('show');
// Explicitly show the popover.
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="resultContent">
<a id="testpop" class="btn btn-primary" data-placement="bottom" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>
</div>
<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
<div class="popover-heading">
This is the heading for #1
</div>
<div class="popover-body">
This is the body for #1
</div>
</div>

Selecting an element with jQuery in a Twitter Bootstrap Popover

I'm placing the following content in a Twitter Bootstrap popover, which contains a link for which I want to listen for clicks:
<div id="popover-content">
<a id="link" href="#">click</a>
</div>
I'm using a button to reveal the popover which contains the above content:
<button id="trigger" data-placement="bottom" title="title">Reveal popover</button>
I then associate the button with the popover and use jQuery's click() function in attempt to listen for clicks on the link contained in the popover:
$(function(){
$('#trigger').popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$('#link').click(function() {
alert('beep');
});
});
However, upon clicking the button to reveal the popover and then clicking the link, the click seems to not be detected as intended above. My understanding of the DOM and javascript and jQuery is fairly limited, so I'm not sure what's going on here. How can you select/listen for actions on elements contained in a popover?
Reference: Popovers in Bootstrap
You do not need to perform Event delegation here.Instead use $('#popover-content') instead of $('#popover-content').html() while setting the content. This will have the events registered attached by default without requiring any delegation.
Demo
$(function(){
$('#trigger').popover({
html: true,
content: function() {
return $('#popover-content'); //<-- Remove .html()
}
});
$('#link').click(function() {
alert('beep');
});
});
You can try this:
$(document).on('click', '#link', function(){
alert('beep');
});
You can mannuly use popover:
html
<div id="popover-wrapper">
<button id="trigger" data-placement="bottom" title="title">Reveal popover</button>
<div class="popover right popup-area popover-pos">
<div class="popover-content">
<div id="popover-content">
<a id="link" href="#">click</a>
</div>
</div>
</div>
</div>
css
#popover-wrapper {
.popover {
left: auto;
right: 0;
width: 250px;
top: 35px;
.popover-content {
// ..
}
}
&.open .popover {
display: block;
}
}
js
$('#trigger').hover(function() {
$(this).stop(true, true).delay(250).queue(function(next){
$(this).addClass('open');
next();
});
}, function() {
$(this).stop(true, true).delay(250).queue(function(next){
$(this).removeClass('open');
next();
});
}
);

Open div when click a another div

I have a html structure. With the following:
<div class="edit"><a class="formtri" href="#">CHANGE</a>
And:
<div id="user_adr" style="display:none">
I want, when i click CHANGE, get user_adr div on front. Ajax or other solution. I tried jQuery .load function but it's not work. How can i do this?
Demo
You can use toggle() function to show / hide html element.
Live Demo
$('.edit').click(function(){
$('#user_adr').toggle();
});
alternatively you can use toggle functionality.
$('.edit').on('click',function(){
$('#user_adr').toggle();
});
if not toggle. then alternative method of toggle is this.
$('.edit').on('click',function(){
if('#user_adr').is('visible'))
{
$('#user_adr').show();
}
else
{
$('#user_adr').hide();
}
});
//to change display to none
$('#yourDivId).attr('display','none');
you can use jquery ui. dialog() method to show a dialog box. like this. Jquery dialog
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
if in case there is any other div with same class name edit above solutions may not be helpful so better u keep a unique id as "change"
<div class="edit"><a class="formtri" id="change" href="#">CHANGE</a>
$("#change").on("click", function(){
$('#user_adr').show();
});
$("#change").on("click", function(){
$('#user_adr').toggle();
});

closing element opened by toggle() function

How to close element opened by toggle() function when I click on any place in browser window. For example StackExchange link on this site. When I click on this link div appears, but if I click on any place in window, it disappears.
You can do in this way:
$(function(){
$('.yourelem, .targetDiv').click(function(ev){
$('.targetDiv').slideDown('fast');
ev.stopPropagation();
});
$(document).click(function(){
$('.targetDiv').slideUp('fast');
});
});
See the action in jsbin
Try this :
HTML
<a id="show" href="#">show</a>
<div class="test" style="display: none;">
hey
</div>
JS
$('a#show').click(function(event) {
event.stopPropagation();
$('.test').toggle();
});
$('html').click(function() {
$('.test').hide();
});
Take a look on .blur function of jquery http://api.jquery.com/blur/
A quick example:
$("#myelement").blur(function(){
$(this).hide();
//or
$("#targetelement").hide();
});
Make variable sel true, if we click on the div.
if(sel)
$(".stackExchange").slideDown(800);
else
$(".stackExchange").slideUp(800);

Categories

Resources