Using DataTables with dynamically generated content

SuperSajuuk

Hi there.

I'm using DataTables to help in formatting my website and I'm running into a problem.

Part of my website uses AJAX queries to load content into divs (the tabs and the site are using Bootstrap 4 for design). The backend parsing the tab clicks is Python and it returns a string that comprises the output that is then HTML'd into the target div. I want all the other tabs to use the same DataTables format, but I continually run into a myriad of errors as a result.

Here is my jQuery AJAX code that handles querying the backend to get the data and then putting the input to the required div:

$("ul#Infractions li.nav-item a").on("click", function (e) {
    let gid = $("div.card-body").attr('id');
    $.ajax({
        url: "./load-infractions",
        type: "POST",
        data: {"tab": e.target.id, "guild_id": gid},
        success: function (xhr) {
            if (e.target.id === "all_infs") {
                return;
            }
            $("div.tab-content div[aria-labelledby='"+e.target.id+"']").html(xhr);
        },
        error: function (xhr) {
            if (xhr.responseText) {
                $("div.tab-content div[aria-labelledby=" + e.target.id + "]").
                html("<img src='../static/RedCross.png' width='30' height='30'> " + xhr.responseText + "<br>");
            } else {
                $("div.tab-content div[aria-labelledby=" + e.target.id + "]").
                html("<img src='../static/RedCross.png' width='30' height='30'> An unknown error has occurred, contact the system administrator.<br>");
            }
        }
    });
});

I have tried many ways to make the output (xhr) be formatted, but DataTables console errors or prints alerts that do not make sense and will not resolve (no matter the many solutions I have seen online). Any help from you guys would be greatly appreciated, as this is blocking my ability to complete this element of my site

EDIT: Apologies for the code block formatting, seems the markdown isn't working as intended.

kthorngren

Apologies for the code block formatting, seems the markdown isn't working as intended.

You need to put the end triple ticks (```) on a new line.

I don't see any Datatables config. What errors do you get? Most Datatables alert messages provide a troubleshooting link. Did you follow the steps in the provided link?

Without seeing your Datatables config, data returned and errors messages its hard to help.

Kevin

SuperSajuuk

@kthorngren There was a configuration, but it did not work at all (even just a plain DataTable(); did not work). Errors ranged from:
- cannot read property 'length' of undefined (in console)
- Invalid JSON Response (printed alert)
- Returned parameter 0 for row 0, column 1

I did read the troubleshooting guides, but none of them actually helped to give a solution that worked. Most of them involved solutions that required an unnecessary second AJAX query, which didn't work either. In short, none of the given solutions on the site actually help me to understand how to fix the problem, or the solutions are tried and don't do anything.

kthorngren

We would like to help but without specific examples (Datatables config, JOSN data returned and error) we have no information to help diagnose. Can you post a link to your page?

If not maybe you can start with providing the link or code from the Debugger.

Kevin

SuperSajuuk

@kthorngren No, I cannot link to the page, because it's on a localhost (it's a development build that plans to replace an existing production website, the latter does not use DataTables, but my development build does).

As I indicated, there is no configuration set (the default table just has stateSave to true and a set column order). The backend does not return JSON, it returns a string of HTML text that is added directly to the target div with HTML. I'm trying to make DataTables manipulate that HTML text in the same way that it does on the initial table that is loaded (which works fine), but it does not work as I expect, with the errors I already detailed.

The jQuery code I posted above is effectively the code that would be doing the work of adding the HTML tables to the page, then a later call in success: would use DataTables to format it.

I'll look at the debugger and see if it can help you to solve my issue.