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.
Related
I'm having an issue where my tooltip from Tooltipster is showing the same data everytime I hover a new element, instead of showing new dynamic data everytime I hover a new element.
How can I fix my code so that only one tooltip shows with new dynamic data each time I hover?
I hover an element that's supposed to activate it, creating this console message:
"Tooltipster: one or more tooltips are already attached to this element: ignoring. Use the "multiple" option to attach more tooltips."
Using the 'multiple' option works by generating new tooltips that shows the proper data, but this causes the tooltips to stack on top of each other instead of replacing itself.
function showAsynchronousTooltipForTopicWithName(name) {
var urlToSend = '/API/v1/topic?name='+encodeURIComponent(name.trim());
$.ajax({
type: "GET",
url: urlToSend,
success: function (result) {
showNotification("API Success", 'success');
showTopicsTooltips(result);
},
error: function (result) {
showNotification("Something went wrong", 'error')
}
});
}
function showTopicsTooltips(response) {
var topic = response;
console.log(topic['name']);
// create content based on experts_internal and experts_external properties
$('.tooltip-topics').tooltipster({
animation: 'fade',
theme: 'tooltipster-shadow',
trigger: 'hover',
viewportAware: true,
contentAsHTML: true,
multiple: true,
content: '<div>' +
'<p><b>Team Experts</b></p>' +
'<p>'+ topic['experts_internal'] + '</p>' +
'<p><b>External Experts</b></p>' +
'<p>'+ topic['experts_external'] + '</p>' +
'</div>'
});
}
I was expecting the tooltip to replace the data dynamically every time I hover a different element that has the tooltip, but right now without 'multiple' option it keeps showing the same data for each element, and with 'multiple' option it just generates a new tooltip everytime without removing the last so they end up stacking.
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)
}
I want to use xeditable edit table rows inline on a button click.
Here is my jsfiddle: https://jsfiddle.net/nah26L67/
Here is my code:
$('.edit').on('click', function () {
var id = $(this).attr('data-edit-id');
$('span[data-id=' + id + ']').editable('toggle');
$('span[data-id=' + id + '][data-type=date]').editable('toggle');
});
The desired result is that when you click 'Edit' the entire row will show the xeditable inline text box where you can enter text along with the checkmark and the exit buttons.
The problem is my implementation just isn't working at all.
Does anyone have any idea why?
I found the answer to my question here: http://jsfiddle.net/xBB5x/348/
I needed to set the defaults for it like so:
var defaults = {
mode: 'inline',
toggle: 'manual',
showbuttons: false,
onblur: 'ignore',
inputclass: 'input-small',
savenochange: true
};
$.extend($.fn.editable.defaults, defaults);
I am using jquery.jtable, and I have a rows which are calling the openChildTable method in jquery.jtable.js.
I am trying to find a way to indent the child table heading. Here's the code which creates the table:
function getResponseChildTable(ContainerID) {
var table = {
title: '',
width: '5%',
sorting: false,
edit: false,
create: false,
display: function(data) {
//create an image to be used to open child table
var $img = $('<img src="' + config.base_url + 'assets/images/expand_row-small.png" title="View Responses" style="height:30px;width:30px;cursor:pointer;" height="30" width="30"/>');
$img.click(function() {
$('#' + ContainerID).jtable('openChildTable',
$img.closest('tr'),
{
title: 'Response Plans',
actions: {
listAction: config.base_url + "data_fetch/responses/" + data.record.risk_id
},
messages: defaultResponseMessages,
fields: getResponseFieldsSmall()
}, function(data) {//opened handler
data.childTable.jtable('load');
});
});
//return image to show on row
return $img;
}
};
return table;
}
I tried adding a style property and setting a margin left to move it sideways, but that didn't work out. Maybe I did it wrong. So all suggestions are appreciated. I've posted links to what it looks like in the comments.
I am new to jquery.jtable and js, so kindly excuse my errors.
I was able to sole the problem using CSS.
I i want to display a bootstrap popover that contains informations about the clicked anchor . the anchor was added dynamically . this is the anchor code
html ::
<a id='reserveAnchorClone' offsetx="0.4882005899705015" offsety="0.41685144124168516" data-container="body" rel='popover' data-placement="left" class="reserveAnchor" >37</a>
js::
var popOverSettings = {
placement: 'left' ,
container: 'body',
html: true,
selector: '.reserveAnchor',
content: function(){return $('#popover_content_wrapper_add').html();},
}
$('body').popover(popOverSettings);
I want to display offsetX offsetY attribute of anchor in the popover , how can i do this.
Whenever you are adding the anchor dynamically just add something like this:
var popOverSettings = {
tite: $('#reserveAnchorClone').attr('id'),
content: function(){return $('#reserveAnchorClone').attr('offsetx') + "<br/>" + $('#reserveAnchorClone').attr('offsety');},
}
$('#reserveAnchorClone').popover(popOverSettings);
http://jsfiddle.net/e3g4h/3/