Datatable fnAddData - class and tooltip not working

delsalsa

Hi All,

I have a table

[code]






Gfall
Description
Actions







AAA
Full price for gum?!





[/code]

class checkbox and the tooltip work fine. Now I am loading with Ajax some data, and use the fnAddData for adding. Works fine, but class and tooltip dont work. here is the code :

[code]
tmp1 = ' ';
tmp2 = res.DATA[i][0] + ' - ' + res.DATA[i][1];
tmp3 = res.DATA[i][2];
tmp4 = ' ';

[/code]

[code]
$('#datatable_example').dataTable().fnAddData( [
tmp1
, tmp2
, tmp3
, tmp4
] );

[/code]

Any Ideas?

allan

Very likely this issue: http://datatables.net/faqs#events

Allan

delsalsa

Hi allan,

thx for ur answer. Unfortuantely it's not working. I added the code same as in your example at the end of the definition.

[code] /* Init DataTables */
var oTable = $('#datatable_example').dataTable();

/* Apply the tooltips */
$( oTable.fnGetNodes() ).tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );

[/code]


I have to say, the new Rows are read with an Ajax service and populated line 10 seconds later, cause ther server needs 10 seconds (special constellation). During this time the table is empty. I also tried with server-side script-sample, but still the same result, Class and tooltip given back in JSON format is does not be considered.

JSON-Result from Server-Code:

[code]
{"sEcho": 0
,"iTotalRecords": 10
,"iTotalDisplayRecords": 10
, "aaData": [


[" ",
"M1A - 4513",
"ASHMORE ",
" "
]
,
[" ",
"M1A - 4512",
"ASHMORE ",
" "
]
,
[" ",
"MAV - 25389",
"2.6881 % INTESA SANPAOLO ",
" "
]
] }

[/code]

the [quote]class='checkbox'[/quote] from the label is not considered, and it seems, that also the other tags are not considered.

Corrado

delsalsa

Hi,

if I use title="tooltip", the tooltip is showing up. The problme is, the [quote]rel='tooltip' data-placement='left' data-original-title=' Edit '[/quote] does not work, after loaded with server-side script. The [quote] [/quote] is also not working, once loaded with server-sode script. It looks like, inside tags are not considered after loading with server-side script. I tried also to do e redraw with simple [quote]$('#datatable_closeBsc').dataTable()[/quote]. Doesn't change.

allan

Hi,

Thanks for picking up the DataTables support option.

With server-side processing, you would likely need to call the tooltips after each draw of the table, since the nodes int he table's body are being recreated for each draw (that's how server-side processing works).

You would do that with fnDrawCallback:

[code]
// In your DataTables' initialisation object
fnDrawCallback: function () {
$( this.fnGetNodes() ).tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
}
[/code]

If you are doing it with Ajax loading, but without server-side processing, you would use fnInitComplete, so it runs once only - when the table's data has loaded:

[code]
// In your DataTables' initialisation object
fnInitComplete: function () {
$( this.fnGetNodes() ).tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
}
[/code]

After fnAddData, depending upon the tooltip control you are using, you very likely should be able to just use the function as expected.

Are you able to link me to a page showing where you are having the problem? That will let me see exactly what is happening and help resolve it.

Regards,
Allan

delsalsa

Hi,

no I can't, cause is inside Company, cannot acces from outside. I added the code above, still does not change the style. But, I use the Metro Bootstrap and there is a sample with fixed table. All I did is, changing the static table to dynamic with following response (linke to bootstrap

download link : http://www.marinaro.ch/metro/themeforest-3408505-start-metro-ui-responsive-admin-template.zip

In there, i used tables_static.html and adjusted it to 4 columns

[quote]





Open Business Case(s) for #Session.workUserU#





X











Sel
Gfall
Status
Description
Actions









[/quote]

My Javascript is:

[quote]

/**** Specific JS for this page ****/
// Datatables
$(document).ready(function() {
var dontSort = [];
$('#datatable_openBsc thead th').each( function () {
if ( $(this).hasClass( 'no_sort' )) {
dontSort.push( { "bSortable": false } );
} else {
dontSort.push( null );
}
} );
$('#datatable_openBsc').dataTable( {
"sDom": "<'row-fluid table_top_bar'<'span12'<'to_hide_phone' f>>>rti<'row-fluid control-group full top' <'span4 to_hide_tablet'l><'span8 pagination'p>>",
"aaSorting": [[ 1, "asc" ]],
"bPaginate": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "srvScript/getBusCase.cfm?func=datatable_openBsc",
"aoColumns": [
{ "mData": "Sel" },
{ "mData": "Gfall" },
{ "mData": "Status" },
{ "mData": "Description" },
{ "mData": "Actions" },
],
"fnInitComplete": function(oSettings, json) {
$( this.fnGetNodes() ).tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
},
"sPaginationType": "full_numbers",
"bJQueryUI": false,
"aoColumns": dontSort,

} );
$.extend( $.fn.dataTableExt.oStdClasses, {
"s`": "dataTables_wrapper form-inline"
} );
$(".chzn-select, .dataTables_length select").chosen({
disable_search_threshold: 10
});

// In your DataTables' initialisation object
_fnInitComplete: function (oSettings, json) {
$( this.fnGetNodes() ).tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
}

});


[/quote]


the sAjaxSource": "srvScript/getBusCase.cfm?func=datatable_openBsc is the service I call, but here is the response...

[quote]

{"sEcho": 0
,"iTotalRecords": 4
,"iTotalDisplayRecords": 4
, "aaData": [


[" ",
"GSO - 2120",
"IN BEARBEITUNG",
"CERRO RESOURCES NL",

" "

]
,
[" ",
"UDV - 38981",
"None",
"AKT. FIRSTSERVICE CORP",

" "

]
,
[" ",
"MAV - 24523",
"None",
"ANT. WISDOMTREE TRUST",

" "

]
,
[" ",
"MAV - 24700",
"None",
"ANT. THREADNEEDLE",

" "

]

] }

[/quote]

allan

Okay, if you are using server-side processing, you need to use fnDrawCallback, since the DOM nodes are destroyed and recreated on every draw. Simply change `fnInitComplete` to `fnDrawCallback` and it should work.

The other thing is that sEcho (in your JSON response) is 0 - that is invalid. It should never be 0 :-). From the documentation ( http://datatables.net/usage/server-side ):

> sEcho: An unaltered copy of sEcho sent from the client side. This parameter will change with each draw (it is basically a draw count) - so it is important that this is implemented. Note that it strongly recommended for security reasons that you 'cast' this parameter to an integer in order to prevent Cross Site Scripting (XSS) attacks.

DataTables never sends 0, which is why it should never be 0. It starts at one, and increments for each draw.

Regards,
Allan

delsalsa

Hi,

thx for your answer. It still does not the job. Any other suggesions?

The function is called after the data is loaded, I put en alert to check that.
But, the json in is undefined

"fnDrawCallback": function(oSettings, json) {

Am I mising something?

-> I changed the sEcho aswell, forgot to increment.

allan

That looks like it should work to me. What tooltip library are you using?

Allan

psharp

"-> I changed the sEcho aswell, forgot to increment."

I thought sEcho was to remain unaltered. Is that not the case?

delsalsa

bootstrap-tooltip.js v2.3.0

delsalsa

* bootstrap-tooltip.js v2.3.0
* http://twitter.github.com/bootstrap/javascript.html#tooltips
* Inspired by the original jQuery.tipsy by Jason Frame
* ===========================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.

delsalsa

How can I send two pictures, to show you what I mean? Maybe there is a missunderstanding ...

delsalsa

Hi,

I just found this in the net.. It looks like it is a IE problem...

[quote]http://forum.jquery.com/topic/jquery-css-styles-being-lost-in-ie-after-ajax-form-submission[/quote]

allan

Great thanks. From looking at the Bootstrap tooltip code, it looks like you need to give the nodes which should be displayed as tooltips - not just the container elements. So change:

> $( this.fnGetNodes() ).tooltip( {

To:

[code]
$( 'a', this.fnGetNodes() ).tooltip( {
[/code]

and that will hopefully do the business for you.

If not, you can e-mail me: allan AT this domain.net :-)

Thanks
Allan

delsalsa

thx, that helped for the 'a'. Input and Label still not working. May you have a solution aswell?

allan

I'm not seeing a tooltip title on the label tags above, but you'd simply modify the selector to include the `label` tag:

[code]
$( 'a, label', this.fnGetNodes() ).tooltip( {
[/code]

Regards,
Allan

delsalsa

Hi,

I tried, no change. The css-style class for label and input is not changing.
My change was

[quote]$( 'a, label, input', this.fnGetNodes() ).tooltip( {[/quote]

If I put tooltip's style in label and input (same as in the 'a'), the style for tooltip works.

I guess, another call other the .tooltip has to be made to refresh input-tag oder label-tag

please advice.

allan

Can you show me the HTML for the `label` and `input` tags that you want to have a tooltip on? The above code doesn't have a title attribute for those elements, so it won't show a tooltip.

Allan

delsalsa

well, here I think we have a missunderstanding. The Input und Label Tag's does not have any tooltip. I just want that the css style defined works for these tags.

and are defined with the class 'checkbox', which are not considered after loaded the data from the server. These Tags has nothing to do with tooltip. Just the CSS-Style in Input and Label Tag are not working.

allan

Ah I see - so not related to the tooltip at all. Thanks for clarifying that.

I'm afraid that without a link to the page you are working on, I really can't say why the styles aren't being applied. the way I'd approach it myself is to use the Chrome developer tools (or Firebug if you use Firefox) and 'inspect' the element to see what classes are applied to it. Comparing the elements that don't work, to those that do will show why the difference is and why there is a difference.

Regards,
Allan

delsalsa

Well, thank you for the clue. I did check the difference and, in fact, there is one!!! Somehow this Bootstrap is adding separat DIV through js, which are not in the inital HTML-script.

But now, it works. Anyway, the tooltip part you helped me a lot, thx so far.

Cheers

delsalsa

Ok, last update. I found the Issue. I needed to call these to function to get iot work:

one for tooltip (tip from your side)
one for uniform input, text and label which in this case is:
$("input, textarea, select, button").uniform();

This case may be closed, many thanks for assistance.

allan

Excellent! Great to hear you got it sorted out and thanks for letting me know what the resolution was.

Regards,
Allan

sanchow

Hi,

Can you please point me to the source code with the complete demo to display tool-tip on any cell of the column using server-side?

Thank you,
San

rpacker

I would like to see an example of this too.