Unescaping HTML entities in IE8
Unescaping HTML entities in IE8
earachefl
Posts: 11Questions: 0Answers: 0
Our organization is currently using datatables 1.8.2. We have a grid which is getting JSON data from serverside source. In the returned JSON data, html entities are being escaped, so, for instance, "'" (apostrophes) are returned as "'". In Chrome and Firefox, the entities are automatically unescaped, but in IE8, they are displayed in the escaped format. I've tried using fnRender:
[code]"aoColumnDefs": [
{ "aTargets": [1],
"fnRender": function(o)
{
var data = o.aData[1];
data = $("").html(data).text();
return data;
}
}
][/code]
I've also tried adding a class to the affected cells and then doing post-processing:
[code]"aoColumnDefs": [
{ "sClass": "decodeHTML", "aTargets": [1] }
]//continue dataTables initialization
//... after initialization is complete...
setTimeout(function(){
var tds = $('.decodeHTML').not('.ui-state-default');
tds.each(function(index, el){
var text = el.innerHTML;
text = text.replace(''', "'");
el.innerHTML = text;
});
}, 2000);
[/code]
The latter is particularly interesting as I can see that the .replace() function is working correctly, but the replacement text continues to display as "'", and if I change the text to a different string, I can see that the cell contents are being also replaced correctly.
Is this strictly an IE8 problem, or is this a DataTables issue? If the latter, has it been fixed in 1.9? Or is there another way to process the underlying data in individual cells prior to display that I haven't yet found?
[code]"aoColumnDefs": [
{ "aTargets": [1],
"fnRender": function(o)
{
var data = o.aData[1];
data = $("").html(data).text();
return data;
}
}
][/code]
I've also tried adding a class to the affected cells and then doing post-processing:
[code]"aoColumnDefs": [
{ "sClass": "decodeHTML", "aTargets": [1] }
]//continue dataTables initialization
//... after initialization is complete...
setTimeout(function(){
var tds = $('.decodeHTML').not('.ui-state-default');
tds.each(function(index, el){
var text = el.innerHTML;
text = text.replace(''', "'");
el.innerHTML = text;
});
}, 2000);
[/code]
The latter is particularly interesting as I can see that the .replace() function is working correctly, but the replacement text continues to display as "'", and if I change the text to a different string, I can see that the cell contents are being also replaced correctly.
Is this strictly an IE8 problem, or is this a DataTables issue? If the latter, has it been fixed in 1.9? Or is there another way to process the underlying data in individual cells prior to display that I haven't yet found?
This discussion has been closed.
Replies
[code]
"fnRowCallback": function(nRow, aData){
$('td:eq(1)', nRow).text( aData[1].replace(''', "'") );
return nRow;
}
[/code]
This fixes the apostrophe only; I'll try the jQuery .html() trick as well.
[code]
var testString = ''';
console.log(testString); // displays "'" in Chrome
console.log( $("").html(testString).text() ); // displays "'" in Chrome
[/code]
However, inside fnRowCallback, it does NOT seem to work:
[code]
"fnRowCallback": function(nRow, aData){
$('td:eq(1)', nRow).text( $("").html(aData[1]).text() ); // continues to display escaped HTML entities in IE8
return nRow;
}
[/code]
Digging deeper, if I examine the aData values in the console, they show that they seem to already BE unescaped:
[code]
"fnRowCallback": function(nRow, aData){
console.log(aData);
console.log(aData[1]); // value I care about - displays as UNESCAPED in Chrome
return nRow;
}
[/code]
BUT, as in my previous comment, using the .replace() function inside fnRowCallback:
[code]
$('td:eq(1)', nRow).text( aData[1].replace(''', "'") );
[/code]
DOES find escaped apostrophes, replaces them with unescaped apostrophes, and inserts them into the cells properly. Weird.