html
<a class="popper btn" rel="popover" data-toggle="popover"><h3 class="gv layout">Layout Plan</h3> </a>
<div class="popper-content hide">
<img src="images/layout1.jpg" class="btn"/>
<img src="images/layout2.jpg" class="btn"/>
<img src="images/layout3.jpg" class="btn"/>
</div>
script:
$('.popper').popover({
placement: 'bottom',
container: 'body',
html: true,
content: function () {
return $(this).next('.popper-content').html();
}
});
i want this to execute on popover show, thanks in advance can any find what is the problem here,
script:
$popover.on("show", function(e) {
$("#transbg").css("padding-bottom","2600px");
});
the below ref code works fine in fiddle but not with my code
var $popover = $(".poper").popover({
trigger: "click"
}).click(function(e) {
e.$("#transbg").css("padding-bottom","260px");
});
$popover.on("hide", function(e) {
$("#transbg").css("padding-bottom","50px");
});
The popover show event syntax is not correct,Can you try the following
HTML
<a class="poper btn" rel="popover" data-toggle="popover">
<h3 class="gv layout">
Layout Plan</h3>
</a>
<div class="popper-content hide">
html
</div>
JS
var abc = $('.poper').popover({
placement: 'bottom',
container: 'body',
trigger: 'hover',
html: true,
content: function () {
return $(this).next('.popper-content').html();
}
});
abc.on("shown.bs.popover", function (e) {
console.log("popover shown");
});
abc.on("hidden.bs.popover", function (e) {
console.log("popover hidden");
});
Fiddler
Please refer this link regarding bootstrap popover
Related
I want to send data via jquery (jquery-3.2.1.min.js) and ajax from inside of a bootstrap popover.
The popover works fine, but I cannot get the submit to work.
I initialized the popover with
$(document).ready(function() {
$(function(){
$("[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();
}
});
});
});
This is the html trigger:
<span tabindex="0" role="button" data-toggle="popover" data-placement="right" data-popover-content="#comment230" data-original-title="" title="">
<img src="/ds/img/comment.svg" alt="comment" height="16px">
</span>
And this is the html inside the popover:
<div id="comment225" style="display:none;">
<div class="popover-heading">Comments</div>
<div class="popover-body">
<div class="commentbody">
<div>
<fieldset>
<div class="input text">
<label for="comment">Comment</label>
<input name="comment" id="comment" type="text" />
</div>
</fieldset>
<button class="submittest" id="acomment225button">Test</button>
</div>
</div>
</div>
</div>
For testing reasons I did this:
$(".submittest").click(function(e) {
alert('test');
e.preventDefault();
});
The alert does not work from buttons inside the popover, but from buttons placed on the rest of the page.
How can I get this to work?
Those DOM elements are not present at the time you are subscribing to the event.
You need to hook up to events in this fashion:
$(document).on("click", ".submittest", function(e){
alert("test");
});
I have two bootstrap popovers and they should be able to open the sidepanel.
Also please find the related code in JSFiddle
https://jsfiddle.net/bob_js/eLLaacju/
I wanted to achieve the below issue:
The popover should open on data-trigger="hover" and stay as it has content in which if we can click the Text (Click Me) it should open a sidepanel. data-trigger='focus' doesn't help either.
Could you please help me, below is the related code to it.
HTML
<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="focus" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-a" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me</p>
</div>
</div>
<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="focus" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-b" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me</p>
</div>
</div>
jQuery:
$(function () {
$("#popover-a").popover({
html: true,
content: function(){
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true,
content: function(){
return $('#popover-content-b').html();
}
});
})
CSS:
.hidden{
display: none;
}
The below code helps me:
$(function () {
$("#popover-a").popover({
html: true, trigger: 'click hover', delay: {show: 50, hide: 4000},
content: function(){
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true, trigger: 'click hover', delay: {show: 50, hide: 4000},
content: function(){
return $('#popover-content-b').html();
}
});
})
I gave up on Bootstrap popover, and went looking. I found WebUI Popover which has all the functionality i am looking for.
But I am having trouble setting the title of the popover using the html content of an element on the page. I get undefined in console.log() and the title loads empty. The html I am trying to access is dynamically created.
Where I think there is a bug in the plugin is that the content loads perfectly from another element on the page.
I have a FIDDLE here.
My WebUI Popover code is:
// Popover Menu initialize
$('.icon-popover-menu').webuiPopover({
placement: 'left',
trigger: 'click',
closeable: true,
multi: false,
animation: 'pop',
cache: 'false',
type: 'html',
width: '220',
title: function() {
return $(this).closest('td.row-icon').find('.btn-row-popover-menu-head').html();
},
content: function() {
return $(this).closest('td.row-icon').find('.btn-row-popover-menu-body').html();
}
});
// Hide popover when screen changes size
$(window).on('resize', function() {
WebuiPopovers.hideAll();
});
$(window).on('scroll', function() {
WebuiPopovers.hideAll();
});
A sample of my HTML is:
<table class="fiddle">
<tr>
<td class="row-icon">
<button class="icon-popover-menu ion-fw btn-row-popover-menu">BTN</button>
<div style="display:none;">
<div class="btn-row-popover-menu-head">
<span>THIS IS THE TITLE</span>
</div>
<div class="btn-row-popover-menu-body">
<div class="input-group" role="group">
<a class="btn btn-app btn-icon-menu btn-popover-first" href="#">
EDIT
</a>
<a class="btn btn-app btn-icon-menu-danger" href="#">
DELETE
<br>
<span class="transaction-menu-legend">DELETE</span>
</a>
</div>
</div>
</div>
</td>
</table>
Any help is appreciated.
title: function() {
return $(event.target).closest('td.row-icon').find('.btn-row-popover-menu-head').html();
},
This works fine. By doing $(this) you are trying to access the title element of the popover which obviously has no closest td.row-icon. Hence it is undefined.
I've used the following code to init the bootstrap popover.
Markup
<a class="help_popup" rel="popover" data-popover-content="#apiSearchTips" data-placement="bottom">
<span class="icon fw-stack fw-lg add-margin-left-1x" stylZ="font-size:10px">
<i class="fw fw-circle fw-stack-2x"></i>
<i class="fw fw-question fw-stack-1x fw-inverse"></i>
</span>
</a>
<div id="apiSearchTips" class="hide help-popover-content" >
//Popover content
</div>
Code
$('a[rel="popover"]').popover({
container: 'body',
html: true,
trigger:'click',
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
}).click(function(e) {
e.preventDefault();
});
This does not work unless I change the selector attribute to a different one rather than rel="popover". For an example say I change it to data-trigger="popover" and it works. Why does this happen?
I am trying to make a web app using jQuery mobile and jQuery tmpl framework.
I want to load the second page and apply a template but the appendTo method doesn't seem to work.
<div class="ui-block-a" >
<a href="#" data-transition="slide" id="organiser">
<div class="ui-bar ui-bar-a homepage-block homepage-block-purple">
<div>
<img src="../img/organiser.png" width="30px" height="30px">
</div>
<div class="homepage-block-text">
<span style="font-size:30px;">10</span></br>
Organiser
</div>
</div>
</a>
</div>
$(document).on("click", '#organiser', function() {
$(":mobile-pagecontainer").pagecontainer(
"change",
"organiser.html",
{
//reload : true,
transition: "slide",
}
);
var data = getData(1019386);
$("ul.myclass").empty();
$.tmpl(templateList, data).appendTo($("ul.myclass"));
})
I am new to jQuery and I don't understand why it's not working.
See comments above, and yes try the following...
$(document).ready(function(){
$('#organiser').on('click', function(){
$(":mobile-pagecontainer").pagecontainer(
"change",
"organiser.html",
{
//reload : true,
transition: "slide",
}
);
var data = getData(1019386);
var myClass = $('ul.myclass');
myClass.empty();
var tmpl = $.tmpl(templateList, data); // $.tmpl(templateList, data).someProperty()
myClass.append(tmpl);
});
});