DataTables 2.0 no longer allows escaped characters in table ID
DataTables 2.0 no longer allows escaped characters in table ID
davidhill001
Posts: 1Questions: 1Answers: 0
I'm experiencing issues with my DataTables after upgrading to version 2.0.
The message I get is
jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #.carttaxtypes-0_info
I think it's to do with this line of dataTables.js not being able to support escaped characters in the jQuery selector:
if (! $('#' + tid+'_info', settings.nWrapper).length) {
The same code works fine on DataTables 1.x
Sample full HTML page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.css" />
<script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script>
<div class='row mb-3'>
<div class='col-12'>
<h2 class='drawSQLtabletitle'>
<i class="fas fa-database DBTicon" aria-hidden="true"></i>
Cart Tax Types
</h2>
</div>
</div>
<table id=".carttaxtypes-0" class="table table-striped table-transparent" style="width:100%">
<thead>
<tr>
<th class="TH-countryID exportable" data-priority="2" style="width:auto">Country</th>
<th class="TH-taxratename exportable" data-priority="3" style="width:auto">Tax Rate Name</th>
<th class="TH-taxratedesc exportable" data-priority="4" style="width:auto">Tax Rate Description</th>
<th class="TH-taxperc exportable" data-priority="5" style="width:auto">Tax Percentage</th>
<th class="TH-defaultrate exportable" data-priority="6" style="width:auto">Is Default Rate</th>
<th class="TH2-edit" data-priority="1" style="width:180px">Actions</th>
</tr>
</thead>
<tbody>
<tr id="row1" data-rowID="1">
<td style="width:auto">United Kingdom</td>
<td style="width:auto">Standard</td>
<td style="width:auto">All other taxable goods and services</td>
<td style="width:auto">20</td>
<td style="width:auto;text-align:center" data-sort="1">
<i class="fas fa-check" aria-hidden="true"></i>
</td>
<td style="width:200px;text-align:center">
X
</td>
</tr>
<tr id="row2" data-rowID="2">
<td style="width:auto">United Kingdom</td>
<td style="width:auto">Reduced</td>
<td style="width:auto">Children’s car seats; certain social housing; some social services; electricity, natural gas and district heating supplies (for domestic use only); some energy-saving domestic installations and goods; LPG and heating oil (for domestic use only); some renovation and repairs of private dwellings; s...</td>
<td style="width:auto">5</td>
<td style="width:auto;text-align:center" data-sort="0">
<i class="fas fa-times" aria-hidden="true"></i>
</td>
<td style="width:200px;text-align:center">
X
</td>
</tr>
<tr id="row3" data-rowID="3">
<td style="width:auto">United Kingdom</td>
<td style="width:auto">Zero</td>
<td style="width:auto">Some social housing; printed books (excluding e-books); newspapers and periodicals; renovations to private housing (Isle of Man only); collections of domestic refuse; household water supplies (except distilled and mineral water); supplies of food and drink (some exceptions); take away food (if bo...</td>
<td style="width:auto">0</td>
<td style="width:auto;text-align:center" data-sort="0">
<i class="fas fa-times" aria-hidden="true"></i>
</td>
<td style="width:200px;text-align:center">
X
</td>
</tr>
</tbody>
</table>
<div id="AMTRAholder" class="AMcontextmenu"></div>
<input id="AM-criteria" name="AM-criteria" type="hidden" value="">
<script>
$('#\\.carttaxtypes-0').DataTable({
retrieve: true
});
</script>
Answers
Suggests that your
tid
variable in:is empty.
I think it is correct to reject that expression as
#.
makes no sense as a selector. If you could check whattid
is please, that would be great.Allan
I believe I'm experiencing the same thing. I had code working perfectly in DataTables 1.x, but when trying to upgrade to 2.0 I'm experiencing syntax errors for unrecognized expressions when I'm trying to initialize tables with certain id's, for example:
I have thousands of tables that are initialized each with their own button, having id's in the line of
concert:0...9.+media
. The '_info' is added by DataTables itself.Karel
:
in CSS selectors is a pseudo selector. You would have to escape that. Likewise if you have a.
in the id you would need to escape that. I don't think that is something that has changed between v1 and v2.If you could link to a test case on https://live.datatables.net that would be really useful.
Thanks,
Allan
Thanks Allan. I made a simple test case, three times the same table but with a different id (1. #example / 2. #example:colon / 3. #example+plussign): https://live.datatables.net/mufoxole/1/edit
The 2nd and 3rd DataTable don't work, but strangely there's nothing in the console output? Reading on the jQuery website (https://api.jquery.com/category/selectors/), the jQ selectors are similar to CSS selectors, and so following characters need to be escaped:
Of course it's not always possible to do that! As said earlier, it did work in DataTables 1.x. I'm using more or less the same code for years now, and table id's with special characters were never an issue!
Thanks
Karel
Hi Karel,
Thanks for the example! I would fully expect that error to be there, since it is a CSS selector.
I've just tried it with DataTables 1.13.11 and it gives the same error: https://live.datatables.net/mufoxole/2/edit , which I would have also expected, since it doesn't treat those strings as literal ids, it is a CSS selector.
Allan
Thanks for your reply Allan. The test case I made was not a good one... I invoke the DataTable() function on the table itself, not on the tableid. Here I've managed to recreate the problem:
working in v1.13.11: https://live.datatables.net/mufoxole/5/edit
breaking in v2.0: https://live.datatables.net/mufoxole/4/edit
Karel
Awesome test case - thank you! I hadn't considered that particular case. I've committed a fix along with a test to make sure it doesn't happen again.
The fix will be in 2.0.4 which I plan to ship later today or perhaps tomorrow.
Allan
amazing! thank you for the quick support
Karel
Apologies - due to the need to debug a different issue, this release will now fall into next week. Tuesday most likely.
Allan
2.0.4 is now available - full release notes available here.
Allan
thanks!