Develop Reference

AJAX call to display dynamic data with Tooltipster

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.

Use X-Editable Inline In A Table

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);

tinyMCE 4: add Class to selected Element

I created a tinymce menu item and what I want it to do is add a class to the selected text element. I cannot seem to figure out how to do this. Any suggestions?
Adding my menu item looks like this:
tinymce.PluginManager.add('button', function(editor, url) {
editor.addMenuItem('button', {
icon: '',
text: 'Button',
onclick: function() {
tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.selection, 'test'); //not working
},
context: 'insert',
prependToContext: true
});
});
I'd be very thankful for any helpful hint.

I found a solution that may not be perfect (for example, if you select part of a text then this doesn't work as I hoped), but for now it does what I want:
tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.selection.getNode(), 'test');
if I do this on a link, for example, the scripts add the classname "test" to my tag.

In order to be able to add a class to the editor you need a dom element in the editor to add the class to. Textnodes may not hold a class.
So i propose you insert a span element with the class you want to add wrapped around the actual selection. Be aware that this won't work if the selection leaps over paragraph boundaries (in this case you will need a bit more complicated code). Try this:
onclick: function() {
var ed = tinyMCE.activeEditor;
var content = ed.selection.getContent({'format':'html'});
var new_selection_content = '<span class="test">' + content + '</span>';
ed.execCommand('insertHTML', false, new_selection_content);
},

this works for me:
setup: function(editor) {
editor.ui.registry.addButton("addClassBtn", {
icon: "insertdatetime",
text: "Highlight ",
onAction: function (_) {
var newContent = "<span class='test'>" + editor.selection.getContent() + "</span>";
editor.selection.setContent(newContent);
}
}
}

jquery jtable child table title indent

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.

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.