fnRender issue in ie8

drodrig

Hey Allan,

First off, awesome plug-in! I have been working with DataTables for the last month or so and I am seeing a problem in ie8. I have not confirmed if the problem exists with older versions but it does seem to be isolated with ie. I am using the fnRender API inorder to convert true/false field to a visual checkmark. Here is the code I am using to start the DataTable:
[code]$(document).ready(function() {
oTable = $('#example').dataTable({
"sDom": '<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>'+
't'+
'<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'+
'<"clear">T<"clear">',
"bProcessing": true,
"bStateSave": true,
"bAutoWidth": false,
"iDisplayLength": 50,
"bSortClasses": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "data.php",
"oLanguage": {
"sLengthMenu": 'Display '+
'10'+
'25'+
'50'+
'100'+
'500'+
'1000'+
'All'+
' records'
},
"aoColumns": [
/* Check Box */ {
"bSortable": false,
"bUseRendered": false,
"fnRender": function ( oObj ) {
return '';
}
},
/* Parcel */ {
"bUseRendered": false,
"fnRender": function(o) {
return ''+o.aData[ o.iDataColumn ]+'';
}
},
/* Face Amount */ {
"bUseRendered": false,
"fnRender": function(o) {
return parseFloat(o.aData[ o.iDataColumn ]).numberFormat("$#,#.00");
}
},
/* Secured Rate */ {
"bUseRendered": false,
"fnRender": function(o) {
return parseFloat(o.aData[ o.iDataColumn ]).numberFormat("#.00%");
}
},
/* Assessed */ {
"bUseRendered": false,
"fnRender": function(o) {
return parseFloat(o.aData[ o.iDataColumn ]).numberFormat("$#,#.00");
}
},
/* DFA */ {
"bUseRendered": false,
"fnRender": function(o) {
return parseFloat(o.aData[ o.iDataColumn ]).numberFormat("$#,#.00");
}
},
/* TA */ {
"bUseRendered": false,
"fnRender": function(o) {
return parseFloat(o.aData[ o.iDataColumn ]).numberFormat("$#,#.00");
}
},
/* H */ {
"bUseRendered": true,
"fnRender": function(o) {
return addCheck(o.aData[ o.iDataColumn ]);
}
},
/* Bankruptcy */ {
"bUseRendered": true,
"fnRender": function(o) {
return addCheck(o.aData[ o.iDataColumn ]);
}
}
]

});
$("#actionwraper").append($(".TableTools"));
} );[/code]

You will notice that I call a function call addCheck() to draw the checkmark. Here is the code:

[code]function addCheck(x) {
if( x == "TRUE" ) {
return '';}
else
return '';
}[/code]

This works great in firefox but in ie8 it only draws the first line and when you use sorting and pagination the one checkmark that is actually drawn is lost and will not come back until you refresh the screen. Please let me know if I have done something wrong.

Thank you in advanced,
David

izzy6150

Hi David,

Just wondering if you are returning a boolean True (which is converted to the string "TRUE" automaticaly) or if you are expressly returning the string value "TRUE"?

I ask this because I have found that on different browsers that when using the boolean type on inline code it differs in what is returned "True", "TRUE, "true". As such these string are different and will not validate all the time.

You could try changing your addCheck function to be: -
[code]
function addCheck(x) {
if( x == "TRUE" || x == "True" || x == "true" ) {
return '';}
else
return '';
}
[/code]

alternativley when returning your data from 'sAjaxSource' try forcing the returned column data to be uppercase.

Hope this helps.

Regards,
Izzy

drodrig

Hi Izzy,

Thanks for your response. I am expressly returning a string value "TRUE". I did however update my code to check for all variations as you had suggested. I placed a javascript alert to check what is being evaluated and it is evaluating correctly on each record that returns "TRUE". It is simply not outputing the HTML to the table. I should mention that it does the first row correctly and only the first row. Stranger yet, once I sort the table the check mark that is placed on the screen is then lost.

drodrig

Feel free to take a look at the code at:
http://www.padtools.com/

When opening the page in ie8 you will see a few of the checkmarks show up. click on the short buttons a few times and see how they disappear. Now open in another browser like Firefox and you will see how it should work.

Thanks again,

David

allan

Hi David,

Wow - that's really weird! I'm looking at your page (thanks for the link - it really helps with these things!) in IE8 at the moment, with the DOM inspector open and it's showing that the HTML for the tick should be there, but it's completely invisible (after changing the sorting)!

The first thing that comes to mind for debugging this is that you have a "behavior" CSS "property" on all IMG tags, which might well be interfering with the image display. It's quite possible that then DataTables removes the element from the DOM (it's held in RAM) it will remove the image from it's own RAM store as a bit of a clean up (it would be nice if it did - but not much use here).

So first suggestion is to remove this pngbehavior.htc call, and see if things improve.

If this fails, the next suggestion is to stick some text into the fnRender output and see what happens with that.

If that fails... Well - fingers crossed it won't ;-)

Regards,
Allan

drodrig

Thank you Allan,

As usual you are correct! It was the CSS behavior property that was interfering with the image rendering. Yet another IE specific issue. I removed the img behavior for my CSS and it works perfectly. This is one rock solid plug-in. Again thank you so much for taking time to help me out.

Regards,
David

allan

Hi David,

My pleasure - good to hear that worked (it was a bit of a stab in the dark ;-) ). Thanks also for the kind works about DataTables! Much appreciated.

Regards,
Allan