Duplicate id generated when initialised

davedarn

I get the following error in chrome
[DOM] Found 2 elements with non-unique id #srx3: (More info: https://goo.gl/9p2vKq) <input class=​"srx" id=​"srx3" style=​"width:​30px" type=​"text" placeholder=​"?">​ <input class=​"srx" id=​"srx3" style=​"width:​30px" type=​"text" placeholder=​"?">​
because datatables creates a hidden header entry for the hidden (scrolled) part of the table with the same id as the first part
class dataTables_scrollHead & class dataTables_scrollBody
The tables seem to work ok so is it safe to ignore the error or is there a fix?
Grids are initialised as follows

  $('#'+gridid).DataTable({
    searching: true,
    ordering:  true,
    paging: false,
    order:setorder,
    scrollY: scrolly,
    scrollX: scrollx 
  });

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

davedarn

Thanks I will try and put a test together next week

davedarn

Sorry for the delay but I have now answered my own question.
When adding the filtering for the columns I created an input box and gave it an id.
$(this).html( title+' <input class="srx" id="srx'+$(this).index()+'" style="width:30px" type="text" placeholder="?"/>' );
This is somehow duplicated elsewhere.
Anyway I removed the id and the problem is solved

colin

Thanks for reporting back,

Colin

John M.

I am running into the same issue, although it is not breaking anything as of yet.

I am also adding html elements with id attributes to the column title fields, directly in the "columns" config before initializing the DataTable. Then DataTables duplicates the column header row in its two separate backing tables for the dataTables_scrollHead and dataTables_scrollBody, resulting in duplicate id's in the dom.

Maybe there is a better way to inject html into column header titles to avoid this?

kthorngren

Do you need the id?

This example doesn't use an id.

When scrolling is enabled Datatables clones the header to create the ability to scroll which is why you are seeing duplicates. If you need help with this please post a link to your page or create a test case so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin