Develop Reference

HTML Twitter Bootstrap tooltip reinitialization (dynamic tooltip title)

I'm new with the Bootstrap and jquery and I have a big problem with it and didn't find answer for it.
The case:
I have a text, which has tooltip and popover also. With the popover I show an input field and a button. After the button pressed, the "tooltip-title" changes to the input value. This works. But... I can't destroy, and reinitialize the tooltip, so it doesn't show the new title.
The code:
$('.note').each(
function() {
$(this).popover({
placement: 'auto',
html: true,
content: returnNoteInput($(this), $(this).attr("tooltip-title"), $(this).attr("input")),
title: "Jegyzet módosítása"
})
$(this).tooltip({
placement: 'bottom',
title: $(this).attr("tooltip-title")
})
});
function returnNoteInput(inputValue, inputTarget) {
eredmeny = "<input type=\"text\" value=\"" + inputValue + "\"></input>";
eredmeny += "<button onclick=\"setValue(this, '" + inputTarget + "')\")>módosítás</button>"
return eredmeny;
}
function setValue(ele, targetId) {
document.getElementById(targetId).value = ele.previousElementSibling.value;
noteElement = document.getElementById(targetId).nextElementSibling;
noteElement.setAttribute("tooltip-title", ele.previousElementSibling.value);
}
So everything is working (I can see the tooltip-title changing) except I can't reinitialize the tooltip (I didn't copied my tries, because it didn't succeed).
Edit:Note: I have an other input field, just to see if it's working or not.
Thanks for every help!

I found the solution:
function setValue(ele, targetId){
document.getElementById(targetId).value=ele.previousElementSibling.value;
noteElement= $('#'+targetId).next();
noteElement.attr("tooltip-title",ele.previousElementSibling.value);
noteElement.tooltip("destroy");
noteElement.popover("destroy");
setTimeout(function() {
noteElement.tooltip({placement : 'bottom',title : noteElement.attr("tooltip-title")})
noteElement.popover({placement : 'auto',html:true,content: returnNoteInput(noteElement.attr("tooltip-title"),noteElement.attr("input")), title :"Jegyzet módosítása"})
}
,1000)
}

How to make an event on one element cause a bootstrap popover on another element?

Am trying to create a picture upload button with js, that will have the following functionality....
1)Pop up file chooser on click (accomplished)
2)Preview image selected inside a bootstrap popover when the image is selected from file chooser...
The button contains an input tag of type file, with a css class(.file-inputs) that applies a display of none on the element, so I cant add the popover to the input tag since popovers don't work on hidden elements, how can I make the popover display on the visible button when the value of the input tag is changed
Maybe something like so
$('#photo').change()(function(){
if(!($("#photo").val() == '')){
//Use bootstrap popover to show image over button
});
});
Here is the button code
<button class="btn btn-default" rel="popover" id="btn-photo">
<i class="glyphicon glyphicon-picture"></i>
<input class="file-inputs" type="file" name="photo" id="photo" />
</button>
And here is the js
$(document).ready(function() {
var img = '';
//Event to display file chooser
$('.post-box').on('click', '#btn-photo', function() {
event.preventDefault();
var elem = document.getElementById('photo');
if (elem && document.createEvent) {
var evt = document.createEvent("MouseEvents");
// Event(event_type:String, bubbles:Boolean, cancelable:Boolean)
evt.initEvent("click", false, true);
elem.dispatchEvent(evt);
}
});
// Show popover on button
$("#btn-photo").popover({
placement: 'top',
trigger: 'click',
title: 'Add a picture to your post! :)',
content: img,
html: true
});
// });
});

A fast answer is something like this:
$("#yourbutton").on("yourevent", function(){$("#otherbutton").trigger("click");});

Load DIVs with same class into a modal dialog

I'm creating a fairly simple FAQ system to overhaul my company's outdated one. The page layout is very basic:
<div class="faq_c"> // Container
<div class="faq_q">Question Goes Here</div> // Question -- clicking this should open the Answer div in a dialog
<div class="faq_a">Answer Goes Here</div> // Answer
</div>
The faq_a class has display:none set in CSS to hide it.
What I'm wanting to do is have each faq_a load into a modal dialog when the parent faq_q class DIV is clicked. The structure of the modal should be:
Question
--------- // Horizontal Rule formatted with CSS
Answer
jQuery (Revised)
$(document).ready(function(){
$('.faq_a').each(function(){
$('.faq_a').dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
overflow: scroll,
title: "Frequently Asked Question",
width: 500
});
$('.faq_q').click(function(){
$('.faq_a').dialog('open');
});
});
});
This isn't working exactly correctly. Instead of opening the single desired faq_a it's opening all of them. I also can't figure out how to get the desired layout inside the div.
Thanks in advance.

Looks like you just need to fix your selector:
jsFiddle
//var $dialog = $('<div>' + $('.faq_q') + '<hr>' + $('.faq_a') + '</div>'); // bad
var $dialog = $('div, .faq_q, hr, .faq_a');// good
$dialog.click(function() {
alert('clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
click me
</div>

using multiple templates on the same popover button

I'm trying to user multiple templates for bootstrap popover , the scenario I follow is click on button on load page, first template will be shown with a link to change class f popover button. So it should display the second template when I click on the same button again ! but it seems popover save the class for button and binding the popover on it. I tried to destroy it and bind popover again on the new class but not work. find example on fiddle here.
I've a solution by replace the button html with the same button but with the new class. and It worked. see here working example I made. link
but I'm trying to find another or better solution .
var popoverTemplate = ['<div class="first-pop popover" role="tooltip">',
'<div class="arrow"></div>',
'<button type="button" class="close" onclick="$(\'.popover\').popover(\'hide\')" aria-hidden="true">×</button>',
'<h3 class="popover-title">test</h3>',
'<div class="popover-content">ONE',
'</div>',
'</div>'].join('');
var firstTemplate = ['<div class="firstTmp-pop popover" role="tooltip">',
'<div class="arrow"></div>',
'<button type="button" class="close" onclick="$(\'.popover\').popover(\'hide\')" aria-hidden="true">×</button>',
'<div class="popover-content">',
'</div>',
'</div>'].join('');
var firstTmpContent = ['<div class="firstTmpContent-post clearfix"><a class="changetemp" href="#">Change template</a>',
'</div>',].join('');
var content = ['<div>Content</div>',].join('');
var secondOptions = {
trigger: "click"
, html: true
, template: popoverTemplate
, content: content
};
var firstOptions = {
trigger: "click"
, html: true
, template: firstTemplate
, content: firstTmpContent
};
$('.box').popover(firstOptions);
$(document).on('click','.box2',function(e){
$(this).popover(secondOptions);
});
$(document).on('click','.changetemp',function(e){
e.preventDefault();
$('[rel="popover"]').popover('hide');
$('.box').removeClass('box').addClass('box2');
});

var obj = '';
$('.box').click(function(){
obj = $(this).clone();
});
$(document).on('click','.changetemp',function(e){
e.preventDefault();
$('[rel="popover"]').popover('hide');
obj.addClass('box2').removeClass('box');
$('.box').replaceWith(obj);
$('.box2').popover(secondOptions);
});

Can I use dynamic content in a Bootstrap popover?

I am using a Bootstrap Popover in a 'Repeat Region' which displays Testimonials. Each testimonials has a 'View Property Details' button which opens up the popover. In the Pop over I am wanting to display the image associated with each testimonial and details of the image. The image path is stored in a column in the database so to display the image for each testimonial I need to bind the image source to the content but it is not accepting PHP. I am using a script that allows me to write html into the content but the image needs to be created dynamically. Dynamic text works in the 'a' tag 'title' option but not for Content.
Can anyone shed light on this?
Here is what I have.
<script type="text/javascript">
$(document).ready(function() {
$("[rel=details]").popover({
placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
html: 'true', //needed to show html of course
content : '<div id="popOverBox"><img src="<?php echo $row_rsTstmnlResults['image']; ?>" width="251" height="201" /></div>' //this is the content of the html box. add the image here or anything you want really.
});
});
</script>
View Property

var popover = $("[rel=details]").popover({
trigger: 'hover',
placement: 'bottom',
html: 'true'
}).on('show.bs.popover', function () {
//I saw an answer here with 'show.bs.modal' it is wrong, this is the correct,
//also you can use 'shown.bs.popover to take actions AFTER the popover shown in screen.
$.ajax({
url: 'data.php',
success: function (html) {
popover.attr('data-content', html);
}
});
});

One year old :( but this may help another person
Remove your js script and Add This :
var content = $('[id*="yourDivId"]');
var title = "Your title, you can use a selector...";
$('[data-toggle="popover"]').popover({
html: true,
content: function () {
return content.html();
},
title: function() {
return title.html();
}
});

Here is the generic approach, but uses ASP.Net handler to process image. Use similar things in PHP to generate images dynamically
<script type="text/javascript">
$(document).ready(function() {
$("[rel=details]").popover({
placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
html: 'true', //needed to show html of course
content : getPopoverContent(this)// hope this should be link
});
});
function getPopoverContent(this)
{
return '<div id="popOverBox"><img src="/getImage.php?id="'+this.data("image-id")+'
width="251" height="201" /></div>'
}
</script>
<a href="#" rel="details" class="btn btn-small pull-right"
data-toggle="popover" data-image-id="5" data-content="">View Property</a>

$("selector").popover({
trigger : "manual",
placement : 'right',
html : true,
template : '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
}).popover("show");
$.ajax({
async : true,
url : url,
dataType : 'json',
success : function(d) {
$("#phover" + id).attr('data-original-title', d['heading']);
$('.popover-title').html(d['heading']);
$('.popover-content').html(d['body']);
},
beforeSend : function() {
var loadingimage = '<div align="center"><img src="assets/pre-loader/Whirlpool.gif"></div>';
$('.popover-title').html(loadingimage);
$('.popover-content').html(loadingimage);
}
});

my solution is based upon the previous solutions here, with a bit more.
i needed (as usually), all the complexity:
here's how you can create the popover content on demand when the event triggers,
and have the selected element passed to the creating function.
function displayProductPrice(a, tag) {
var div = a.closest('div');
var secs = ['aggregated', 'compare', 'list', 'saved', 'details'];
var title = '';
for (var c in secs) {
var obj = $('.product-price-' + secs[c], div);
if (obj.length) {
if (title) {
title += '<br />';
}
title += obj.html();
}
}
return '<' + tag + '>' + title + '</' + tag + '>';
}
$( document ).ready(function() {
$(".product-price-expand").popover({
content: function() {return displayProductPrice(this, 'h6')},
title: function() {
return $('.product-id', this.closest('div')).html();
},
html: true,
trigger: 'click focus',
placement: 'auto'
});
});
enjoy, hope this helps.