initializing datatable produces duplicate ids

mishu666

I'm using DataTables to use client side paging on an asp.net gridview.
I have a dop-down list which determines the data for the tables, when I change the value on the list I get the new gridview using ajax then replace the current gridview containers with the ones received in the ajax call then I initialize the datatables again.
the error occurs when the datatables are initialized, not when the gridview containers are replaced.
The duplicate ids are only in the header row.
any suggestions?

kthorngren

Without seeing what you are doing its hard to say what the issue is. Please post a link to your page or a test case showing the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

mishu666

I have a function that initializes the datatables -

function RecreateDataTables() {

    $(".UsersInPageGV").DataTable({
        scrollY: "60vh",
        stateSave: true,
        scrollCollapse: true,
        ordering: false,
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
    });

    $(".UsersNotInPageGV").DataTable({
        scrollY: "60vh",
        stateSave: true,
        scrollCollapse: true,
        ordering: false,
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
    });
}

a function that gets the new tables via an ajax call

function BindGVs(success_callback) {

    let pageid = window.sessionStorage.getItem("pageid");

    data = { "PageID": pageid };

    $.ajax({

        method: "GET",
        data: JSON.stringify(data),
        url: "PageMembersEditor.aspx",
        error: function (r) {
            console.log("error");
            console.log(r.responseText);
        },
        success: success_callback
    });
}

a function that uses the data from the ajax call to replace the current tables with ones with updated data -

function BindGVsSuccessCallback(data) {

    let response = $(data);
    let UsersInPageSec = response.find("#UsersInPageSection");
    let UsersNotInPageSec = response.find("#UsersNotInPageSection");

    $("#UsersInPageSection").replaceWith(UsersInPageSec);
    $("#UsersNotInPageSection").replaceWith(UsersNotInPageSec);

    RecreateDataTables();
}

the RecreateDataTables function is called once at the beginning of document ready and is called every time the tables are replaces inside BindGVsSuccessCallback

kthorngren

Thanks for the code snippets. Its still unclear to me exactly what the problem is. Are you getting this error?

DataTables warning: table id={id} - Cannot reinitialise DataTable.

If so take a look at the link in the error for suggestions to fix:
https://datatables.net/manual/tech-notes/3

Kevin

mishu666

I do not
the duplicate thread was because I realized I should post this as a question rather than a discussion... sorry

kthorngren

I do not

Are you saying that you are not getting the Cannot reinitialise DataTable. error?

the error occurs when the datatables are initialized, not when the gridview containers are replaced.
The duplicate ids are only in the header row.

If you are not able to provide a link to your page or a test case then please provide more details of what the issue is. What duplicate IDs?

Kevin

mishu666

yes I'm not getting the error, I am however getting a warning in the console saying I have duplicate element IDs for an element inside the header row of the table I turned into a datatable.
the warning message reads:

[DOM] Found 2 elements with non-unique id #SelectAllInGroupSwitch: (More info: https://goo.gl/9p2vKq) <input type=​"checkbox" id=​"SelectAllInGroupSwitch">​

kthorngren

What is the checkbox #SelectAllInGroupSwitch? How how you creating it? Do you have the same checkbox on both tables? Maybe you need to remove and re-add it when recreating the table.

This is not something Datatables is going to create. This would be much easier to help you find the problem with a link to your page or a simple test case replicating the issue.

Kevin

colin

Hi @mishu666 ,

As Kevin said, 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