Image in a Tooltip on a row with server-side
Image in a Tooltip on a row with server-side
Hi all and if it not been said enough : bravo for your work Allan!
I just ask for your help because I can look over.
I try to add a tooltip on a link in a cell but I can not. Here is my code (yes there are a lot of things but I need all)
[code]
$(document).ready(function() {
//Fonctions tableau
TableToolsInit.sSwfPath = "../Scripts/media/swf/ZeroClipboard.swf";
var oTable;
var gaiSelected = [];
/* Init the table */
var oTable = $(".dataTable").dataTable({
"sDom": 'T<"clear">lfrtip<"clear spacer">T',
"oLanguage": {
"sUrl": "../Scripts/fr_FR.txt"
},
"bProcessing": true,
"bServerSide": true,
// "sDom": 'Rlfrtip',
"sAjaxSource": "../include/json_liste.php<?php echo (isset($_SESSION['idlist'])) ? "?entrepot=".$_SESSION['idlist'] : ""; ?>",
"bStateSave": true,
// "bAutoWidth" : false,
"sPaginationType": "full_numbers",
"aoColumnDefs": [ /*colonne Id */
{
"bVisible": 0,
"aTargets": [ 0 ]
},
{
"sWidth" : "10%",
"sClass" : "center",
"fnRender": function ( oObj ) {
return '' + oObj.aData[1] + '';
},
"aTargets": [ 1 ]
},
{
"sWidth" : "5%",
"sClass" : "center",
"fnRender": function ( oObj ) {
return '' + oObj.aData[2] + '';
},
"aTargets": [ 2 ]
},
{ "sWidth" : "30%", "sClass" : "center", "aTargets": [ 3 ] },
{ "sWidth" : "5%", "sClass" : "center", "aTargets": [ 4 ] },
{ "sWidth" : "6%", "sClass" : "center", "aTargets": [ 5 ] },
{ "sWidth" : "5%", "sClass" : "center", "aTargets": [ 6 ] },
{// Commentaires Admin
"sWidth" : "15%",
"sClass" : "divvert",
"fnRender": function ( oObj ) {
return '>' + oObj.aData[7] + '';
},
"aTargets": [ 7 ]
},
{// Commentaires Entrepot
"sWidth" : "15%",
"sClass" : "divorange",
"fnRender": function ( oObj ) {
return '>' + oObj.aData[8] + '';
},
"aTargets": [ 8 ]
},
{// Correction Stock
"sWidth" : "3%",
"sClass" : "center",
"bSortable": false,
"bSearchable": false,
"fnRender": function ( oObj ) {
return ' ';
},
"aTargets": [ 9 ]
},
{// Déplacement article
"sWidth" : "3%",
"sClass" : "center",
"bSortable": false,
"bSearchable": false,
"fnRender": function ( oObj ) {
return '';
},
"aTargets": [ 10 ]
},
{// Supprimer article
"sWidth" : "3%",
"sClass" : "center",
"bSortable": false,
"bSearchable": false,
"fnRender": function ( oObj ) {
return '' +
'';
},
"aTargets": [ 11 ]
}
],
"fnDrawCallback": function () {
//Champs d'edition
$('.edit').editable( 'upd_com.php?commentaire=<?php echo $_SESSION['MM_UserGroup'] != "1" ? "entrepot" : "admin"; ?>' , {
type : 'textarea',
cancel : 'Cancel',
submit : 'OK',
indicator : '',
tooltip : 'Ajouter un commentaire...',
height : "14px"
} );
$('.tooltip').tooltip({
delay: 0,
showURL: false,
bodyHandler: function() {
return $("").attr("title", this.src);
}
});
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( jQuery.inArray(aData[0], gaiSelected) != -1 )
{
$(nRow).addClass('row_selected');
}
return nRow;
}
});
});
[/code]
I try to put a preview of the product image. The image file is named by his ' + reference + '.jpg'; where reference is equal to aaData[2]
All works fine except the tooltip.
Thx for ur help
I just ask for your help because I can look over.
I try to add a tooltip on a link in a cell but I can not. Here is my code (yes there are a lot of things but I need all)
[code]
$(document).ready(function() {
//Fonctions tableau
TableToolsInit.sSwfPath = "../Scripts/media/swf/ZeroClipboard.swf";
var oTable;
var gaiSelected = [];
/* Init the table */
var oTable = $(".dataTable").dataTable({
"sDom": 'T<"clear">lfrtip<"clear spacer">T',
"oLanguage": {
"sUrl": "../Scripts/fr_FR.txt"
},
"bProcessing": true,
"bServerSide": true,
// "sDom": 'Rlfrtip',
"sAjaxSource": "../include/json_liste.php<?php echo (isset($_SESSION['idlist'])) ? "?entrepot=".$_SESSION['idlist'] : ""; ?>",
"bStateSave": true,
// "bAutoWidth" : false,
"sPaginationType": "full_numbers",
"aoColumnDefs": [ /*colonne Id */
{
"bVisible": 0,
"aTargets": [ 0 ]
},
{
"sWidth" : "10%",
"sClass" : "center",
"fnRender": function ( oObj ) {
return '' + oObj.aData[1] + '';
},
"aTargets": [ 1 ]
},
{
"sWidth" : "5%",
"sClass" : "center",
"fnRender": function ( oObj ) {
return '' + oObj.aData[2] + '';
},
"aTargets": [ 2 ]
},
{ "sWidth" : "30%", "sClass" : "center", "aTargets": [ 3 ] },
{ "sWidth" : "5%", "sClass" : "center", "aTargets": [ 4 ] },
{ "sWidth" : "6%", "sClass" : "center", "aTargets": [ 5 ] },
{ "sWidth" : "5%", "sClass" : "center", "aTargets": [ 6 ] },
{// Commentaires Admin
"sWidth" : "15%",
"sClass" : "divvert",
"fnRender": function ( oObj ) {
return '>' + oObj.aData[7] + '';
},
"aTargets": [ 7 ]
},
{// Commentaires Entrepot
"sWidth" : "15%",
"sClass" : "divorange",
"fnRender": function ( oObj ) {
return '>' + oObj.aData[8] + '';
},
"aTargets": [ 8 ]
},
{// Correction Stock
"sWidth" : "3%",
"sClass" : "center",
"bSortable": false,
"bSearchable": false,
"fnRender": function ( oObj ) {
return ' ';
},
"aTargets": [ 9 ]
},
{// Déplacement article
"sWidth" : "3%",
"sClass" : "center",
"bSortable": false,
"bSearchable": false,
"fnRender": function ( oObj ) {
return '';
},
"aTargets": [ 10 ]
},
{// Supprimer article
"sWidth" : "3%",
"sClass" : "center",
"bSortable": false,
"bSearchable": false,
"fnRender": function ( oObj ) {
return '' +
'';
},
"aTargets": [ 11 ]
}
],
"fnDrawCallback": function () {
//Champs d'edition
$('.edit').editable( 'upd_com.php?commentaire=<?php echo $_SESSION['MM_UserGroup'] != "1" ? "entrepot" : "admin"; ?>' , {
type : 'textarea',
cancel : 'Cancel',
submit : 'OK',
indicator : '',
tooltip : 'Ajouter un commentaire...',
height : "14px"
} );
$('.tooltip').tooltip({
delay: 0,
showURL: false,
bodyHandler: function() {
return $("").attr("title", this.src);
}
});
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( jQuery.inArray(aData[0], gaiSelected) != -1 )
{
$(nRow).addClass('row_selected');
}
return nRow;
}
});
});
[/code]
I try to put a preview of the product image. The image file is named by his ' + reference + '.jpg'; where reference is equal to aaData[2]
All works fine except the tooltip.
Thx for ur help
This discussion has been closed.
Replies
try
[code]
return ($("").attr("title", this.src))[0]; // in playing with the debugger, DOM elements did a better job of converting to string, but I don't know if they will work for what you need.
[/code]
if this doesn't work, you might create a temporary parent element, add your img to it, then get parent.innerHTML in order to get the correct html string
[quote]Uncaught TypeError: Cannot read property '0' of undefined[/quote]
hmmm ok i understand. So i'd like to do what you suggested but my javascript knowledge are too bad to do this.
Could you tell me more ?
create a parent element (the ), add your image, then get the innerHTML of the div. should give you the entire HTML of the img tag.