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.

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

Can I generate IDs for table cells based on number of rows being returned to view?

Long story short. I'm attempting to implement a file upload feature in my C# MVC 3 application.
I have a fileuploader.js file which I beleive was taken was taken from http://github.com/valums/file-uploader (this is not my application originally).
I'd like to make the file upload feature available to reach row on the table in my view, number of rows will be based on the number of entries received from the database.
The problem I'm encountering at present is that the Upload btn is only appearing on the first row.
I'm certain this is because this feature begins with finding the div with an id of "file-uploader-attachment"
I tried changing the javascript to document.getElementsByClass and giving the div a class instead of an ID but it was unsuccessful.
So I need to either generate and assign ID's on the fly or of another way to id elements in each row and allow the javascript to find them.
I will put on more code as needed, but I don't want to fill the page with code.
If someone can point me in the right the direction or knows of a similar solution.
Again, I need a file upload btn/feature for each row in a table whose size is changeable.
cell in table
<td id="file-uploader-attachment"></td>
start of the createUploader() function in associated javascript code
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader-attachment'),
script in view:
<script type="text/javascript">
$(document).ready(function () {
// requests attachments from server, clears existing attachments and
// replaces with most up to date attachments
function LoadAttachments() {
$('.loading').show();
$.post('/CalibrationViewer/GetAttachments', { calibrationId: CAL_ID }, function (data) {
$('#attachment').empty();
$('#attachment').append(data);
$('.loading').hide();
});
}
function handleCheckbox() {
if ($(this).find(':checkbox').is(':checked')) {
//$(this).find('#file-uploader-attachment').html($('#myHTML').html());
createUploader();
$(this).find('file-uploader-attachment-Class').removeClass("upload-placeholder-unchecked");
$(".qq-upload-button").css("margin-top", "-6px");
$(".qq-upload-button").css("margin-bottom", "-20px");
}
else {
$(this).find('.file-uploader-attachment-Class').addClass("upload-placeholder-unchecked");
$(this).find('.file-uploader-attachment-Class').html($('#myHTML2').html());
}
}
$('tr').each(handleCheckbox);
$('tr').on('click', handleCheckbox);
function createUploader() {
$(".file-uploader-attachment-Class").each(function (element) {
var uploader = new qq.FileUploader({
element: element,
sizeLimit: 2147483647, // max size
action: '/Controller/Action',
allowedExtensions: ['xls', 'xlsx', 'pdf', 'doc', 'docx', 'csv', 'txt', 'rtf', 'zip', 'zipx', '7z'],
params: {
customer: CUST_NAME,
calibrationId: CAL_ID
},
multiple: false,
debug: false,
onComplete: function (id, fileName, responseJson) {
var resultMessage = document.getElementById('resultMessage');
alert(responseJson.msg);
$('#resultMessage').addClass('greenText');
resultMessage.innerHTML = responseJson.msg;
$('#attachment').prepend('<p><a class="attachment-file" href="' + responseJson.fileId + '">' + responseJson.fileName + '</a>');
$('#removeAttachment').prepend('<p><a class="attachment-delete" href="' + responseJson.fileId + '">X</a></p>');
$('#no-attachments').remove();
}
});
});
}
});

The reason is that you can have an id (file-uploader-attachment) only once in your html page (they should be unique). If they are not unique the first one is taken (if this is by standard or common sense, I do not know).
What you want to achive is something like this:
<td class="file-uploader-attachment"></td>
and
var elements = document.getElementsByClassName('file-uploader-attachment');
Array.prototype.filter.call(elements, function(element){
var uploader = new qq.FileUploader({
element: element, ...
});
or even simpler with jquery (if already in use):
$(".file-uploader-attachment).each(function (element) {
var uploader = new qq.FileUploader({
element: element, ...
});

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.

How do you handle row onclick events using Flexigrid?

My flexigrid is setup. All I need is an event that gets called when the user clicks on a row. From there, I will send the user to another page based on the data contained in that row. But I can't seem to find any examples on how to do this.
I'm looking for a clear example on how to handle row onclick events using flexigrid.
I'm also interested in any other javascript table frameworks that could be used in this situation. I've been taking a peek at DataTables and it looks like it may be a better alternative (and the project appears to be more active)

In the initial setup for the flexigrid, add the attribute process: procMe to the column model. Example:
colModel : [
{ display: 'Request', name : 'id', process: procMe }
]
and then create a callback:
function procMe( celDiv, id ) {
$( celDiv ).click( function() {
alert( id );
});
}

A better solution
Adding process to colModel didnt work for me.
colModel : [
{ display: 'Request', name : 'id', process: procMe }
]
this solution below is what I'm using:
var gridRows = $("#data-grid tbody tr");
gridRows.click(function (event) {
displaySelectedItem($(this).attr('id').substr(3));
return false; //exit
});

Flexigrid column as link
colModel: [
{
display: 'DomainName', name: 'DomainName', width: 180,
sortable: true, align: 'left',
process: function (col, id)
{
col.innerHTML = "<a href='javascript:domainEdit(" + id + ");'
id='flex_col" + id + "'>" + col.innerHTML + "</a>";
}
}]
Link Function
function domainEdit(domainID) {
alert('domainID' + domainID);
}

I think this variant little better than whoabackoff
$('.TableName').click(function(event){
$('.res').html('dbl');
alert('dbl');
});

does this help? http://www.flexigrid-asp.net/demo/updatepanel.aspx
you can have a look at it with firebug, to see where the event is hooked.
keep in mind that the flexigrid.js file is a bit different than the one from the official project.