DataTables 2.0 no longer allows escaped characters in table ID

davidhill001

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>

allan

.carttaxtypes-0_info

Suggests that your tid variable in:

if (! $('#' + tid+'_info', settings.nWrapper).length) {

is empty.

I think it is correct to reject that expression as #. makes no sense as a selector. If you could check what tid is please, that would be great.

Allan

OhNoxius

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:

Uncaught Error: Syntax error, unrecognized expression: #concert:302.+media_info

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

allan

: 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

OhNoxius

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:

!"#$%&'()*+,./:;<=>?@[&#93;^`{|}~

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

allan

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

OhNoxius

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

allan

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

OhNoxius

amazing! thank you for the quick support
Karel

allan

Apologies - due to the need to debug a different issue, this release will now fall into next week. Tuesday most likely.

Allan

allan

2.0.4 is now available - full release notes available here.

Allan

OhNoxius

thanks!