Syntax error, unrecognized expression nbsp with fnRender

pthaden

Hi, I've got a table that I'm trying to beautify with DataTables, but I can't do anything about the way the HTML is rendered, so I'm using fnRender to pull out just the text in the cells I need to clean up.

You'll see from the sample table that all of the cells with data in them are wrapped in p and font tags, but there's a blank cell with just a nbsp inside of td tags:

[code]



Title
Date
Link




Learn What Works
Mar 21, 2011 2:00 PM
http://www.datatables.net


Deployment Topologies
Apr 1, 2011 11:00 AM
http://www.jquery.org


TBA
Mar 23, 2011 11:00 AM
 




Title
Date
Link



[/code]

It's that last cell that's throwing off my DataTable, causing it to only partially render the widgets and DataTable goodness (the heading sort buttons don't get built, and the table is only partially styled). When I went into Developer Tools in Chrome, I found this error message:

Uncaught Syntax error, unrecognized expression:   jquery.js:16

If I modify the base data that generates my table such that I don't have a "blank" cell, my table renders fine. Also, if I take out the fnRender component of my aoColumns definition, it will render the whole table without errors. It's only choking when I have a entry with   alone in the cell.

Here's my initialization code:

[code]
$(document).ready(function() {
$('#example').dataTable({
"bJQueryUI": true,
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aaSorting": [[ 1, "asc" ]],
"aoColumns": [
null,
{ "sType": "date", "fnRender": function ( oObj ) {
return $(oObj.aData[1]).text();
}
},
{ "sType": "string", "bSortable": false, "fnRender": function ( oObj ) {
return 'Click here';
}
}
]
});
});
[/code]

Since I can't do anything to change the way the HTML is built I've tried a few ideas in the fnRender function to test for empty cells or use a different function than text() or even to regex out the string ' ' but they all seem to come too late -- it's as if jQuery can't handle it when fnRender encounters a nbsp all by itself.

Am I doing something wrong in the fnRender?

thanks!

allan

Hi pthaden,

I rather suspect that the problem is that the HTML in the table is complete invalid:

[code]
http://www.datatables.net
[/code]
There are a number of nesting and closing issues in there. I just tried one of my test tables with   and it seems to work okay. Are you able to have whatever generated the HTML create valid HTML?

Allan

pthaden

Allan--

Thanks for the quick reply. I don't know what happened to malform that HTML when I pasted it in-between code /code blocks in my previous posting -- it's definitely not the HTML in my page.

However, I do have (well-formed) extra HTML in-between my td tags. I'll describe it in case my paste below doesn't work.

After a open td tag, I have a p tag and a font face tag wrapping plain text -- a URL in the messed up example above. Next comes a close tags for font, p and td in that order (no anchor links in my table code, despite what the comment above looks like).

I'm trying to strip out all of the tags between my td tags so that all I am left with is the plain text. I then use the fnRender function to build a link out of that plain text. I'm using .text() to get that plain text.

When there is nothing but a   in the cell, the fnRender fails -- are you able to get your test table to work with both a   and a "stripping" fnRender function like my .text()?

Here is an attempt to paste my HTML again, this time without code /code blocks:





Title
Date
Link




Learn What Works
Mar 21, 2011 2:00 PM
http://www.datatables.net


Deployment Topologies
Apr 1, 2011 11:00 AM
http://www.jquery.org


TBA
Mar 23, 2011 11:00 AM
 




Title
Date
Link





That code should appear as one well-formed, nicely-nested table, albeit with the extra p and font tags in the td cells.

Thanks
-paul

pthaden

hooray, it worked, although I couldn't seem to stop the comment system from creating hrefs out of my URL data above -- so please ignore the links the comment system created and take the text of my table only.

thanks,
-pt

allan

Hehe - damn forum! Too clever for it's own good :-(. Thanks for pasting in the HTML - very helpful. I've got to confess I'm not 100% why that isn't working, but here is a little change which allows it to work just fine:

[code]
$(document).ready(function() {
$('#example').dataTable({
"bJQueryUI": true,
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aaSorting": [[ 1, "asc" ]],
"aoColumns": [
null,
{ "sType": "date", "fnRender": function ( oObj ) {
return oObj.aData[1];
}
},
{ "sType": "string", "bSortable": false, "fnRender": function ( oObj ) {
return 'Click here';
}
}
]
});
});
[/code]
The change is to use a simple regex to strip the HTML rather than jQuery. This is probably a bit faster as well :-) (not perfect for all cases, but certainly in this one).

Regards,
Allan

pthaden

Allan--

This is working great now! Thanks so much for the regex code idea: it's a perfect fit and even lets me test the cell contents so I can choose whether to build a link in that last aoColumns definition's fnRender function:

[code]
.
.
.
{ "sType": "string", "bSortable": false, "fnRender": function ( oObj ) {
var plainText = oObj.aData[2].replace( /<.*?>/g, "" );

if ( plainText.length == 0 || plainText == ' ')
{
returnText = plainText;
}
else
{
returnText = 'Click here';
}

return returnText;

}
}
.
.
.
[/code]

Thank you again for your help and for the great plugin!
-paul