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.
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'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 have a question as to how I can pass my Mongo documents around my JS and HTML. I have an example below, I'm trying to have my popover display the name of the thumbnail that's being hovered over. When someone clicks on the thumbnail a modal pops up that displays the picture as well as the description of the thumbnail. The issue is that when I try to pass the this.name element to the popover, it displays the name of the first thumbnail i hover over for all of the thumbnails, but it doesnt use the information for the first thumbnail on all the modals (its actually dynamic). I want to know what I'm doing wrong, the only work around I've found is to put the {{name}} tag inside my actual html as the data-content to the thumbnail.
HTML
<template name="gallery">
<div class="col-xs-6 col-sm-4 col-md-2">
<a href="#" class="thumbnail" data-content='{{name}}'>
<img src="{{img}}" alt="...">
<div class="caption">
<h5><center>{{name}}</center></h5>
</div>
</a>
</div>
</template>
JS
Gallerys = new Mongo.Collection("gallerys");
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
gallerys: function () {
return Gallerys.find({}, {sort: {createdAt :-1}});
}
});
Template.body.events({
"mouseover a.thumbnail" :function(event, template){
$('a.thumbnail').popover({
trigger: "hover",
placement: "bottom",
})
},
"click a.thumbnail": function(event, template) {
event.preventDefault();
bootbox.dialog({
title: '<center><h2>'+ this.name.toUpperCase() +'</h2></center>',
message: '<div class="row"><div class="col-md-3"><img class="img-rounded" height="200" width="200" src="' + this.img + '"></div><div class="col-md-9"><h4>Description</h4>"'+ this.description +'"</div></div>',
size: 'large',
buttons: {
play:{
label:'PLAY SAMPLE <span class="glyphicon glyphicon-play"></span>',
className:"btn-success pull-left modalbtn"
},
download: {
label:'DOWNLOAD <span class="glyphicon glyphicon-download-alt"></span>',
className:"btn-primary modalbtn",
callback: function() {}
}
},
onEscape: function() {},
});
}
});
}
Like BraveKenny already suggested, move the helper event to the Template.gallery. It isn't an optional/cosmetic step to beautify your code. It sets the correct data context in the event helper.
Here is a boilerplate app showing the way data context work:
http://meteorpad.com/pad/hPaJ35NnWyHjkWAD3/Leaderboard
i'm working on a site which uses jquery v1.6.2. i want to show a cluetip using local content for all anchors of a given class. however the localcontent in the cluetip is only showing up for the first two anchors of this class. i have simplified the problem down to the following code: (jsfiddle here)
$(function() {
$('a.triggerxxx').cluetip({
activation: "click",
cluetipClass: "jtip",
local: true,
hideLocal: true,
sticky: true
});
});
<a class="triggerxxx" href="#" title="cluetip title" rel="div.cluetip-contentxxx">trigger text 1</a><br>
<a class="triggerxxx" href="#" title="cluetip title" rel="div.cluetip-contentxxx">trigger text 2</a><br>
<a class="triggerxxx" href="#" title="cluetip title" rel="div.cluetip-contentxxx">trigger text 3</a><br>
<a class="triggerxxx" href="#" title="cluetip title" rel="div.cluetip-contentxxx">trigger text 4</a>
<div class="cluetip-contentxxx">this content should show in all cluetips, but it only shows up in the first two</div>
is cluetip not meant to work this way, or am i doing something wrong?
Try this
$(function() {
$('a.triggerxxx').each(function(index) {
$(this).cluetip({
activation: "click",
cluetipClass: "jtip",
local: true,
hideLocal: true,
sticky: true
});
});
});
I am not able to figure out how to display dropdown in popover in bootstrap. All i can find tutorials are just displaying just text and buttons. I need to display dropdown and also have to bind data in it. To display buttons and for its events i have followed the below way.
var popOpts = {
placement: 'left',
title: '<span id="trashcan" class="glyphicon glyphicon-trash"></span>Confirm Delete',
html: 'true',
trigger: 'click',
content: '<p>This will be deleted.<br>Are you sure you wish to continue?</p><br><button id="delete" class="btn btn-danger popover-submit" type="button">Yes</button><button id="cancel" class="btn btn-default" type="button">No</button>',
}
$(".btnDelete").popover(popOpts);
I need to know how to display dropdown and to bind items in popover in bootstrap.
Try like this
You can display anything inside form,and bind the events
HTML
<div class="popover-markup"> Popover link
<div class="head hide">Lorem Ipsum</div>
<div class="content hide">
<div class="form-group">
<select><option>Test</option></select>
</div>
<button type="submit" class="btn btn-default btn-block">Submit</button>
</div>
<div class="footer hide">test</div>
</div>
Script
$('.popover-markup>.trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
content: function () {
return $(this).parent().find('.content').html();
}
});
DEMO