When a table is dynamically reloaded, the column styling is not rendering

Question

So I have a table of image metadata that is dynamically built from an API call when a page is loaded, and after uploading new images the function that builds the table is called again to include the new image data. However, the CSS styles for the column width is not rendering on the page (even though it appears perfectly fine in Inspect Element!). Other styles for the columns such as text-align work after the table is rebuilt. Refreshing the page shows the correct styling. Attached below is my function.

function getMedia(blockName) {
            $(".illustrationsContent").empty();
            $("#filterTestKey").empty();

            $.ajax({
                url: [url] + blockName.trim(),
                type: 'GET',
                dataType: 'json',
                async: false,
                success: function (media) {
                    var testKeys = [];

                    if (media.length > 0) {
                        $(".illustrationsNoContent").hide();
                    } else {
                        $(".illustrationsNoContent").show();
                    }

                    for (var i = 0; i < media.length; i++) {
                        var newRow = "<tr class='illustrationsContent'><td style='width: 20%;'>" + media[i].Question + "</td>"
                            + "<td>" + media[i].Name + "</td>"
                            + "<td style='text-align: center; width: 15%'>" + "<button type='button' class='delete' disabled>Delete</button>" + "</td></tr>";
                        testKeys.push(media[i].Question);
                        $("#illustrationsTable tbody").append(newRow);
                    }                    

                    testKeys = jQuery.uniqueSort(testKeys);

                    if (testKeys[0] == blockName) {
                        $("#filterTestKey").hide();
                        $("#TestKeyLabel").show();
                    } else {
                        $("#TestKeyLabel").hide();
                        $("#filterTestKey").append(new Option("All Test Keys", "All Test Keys"));
                        for (var i = 0; i < testKeys.length; i++) {
                            $("#filterTestKey").append(new Option(testKeys[i], testKeys[i]));
                        }
                    }


                }
            });
        }

Thanks

CSS will be automatically applied to any new content. If it's not working for you then it's likely that the HTML structure you're appending is invalid. Check the output of this code using the DOM inspector to verify this — Rory McCrossan, Feb 06 '19 at 16:16

score 0 · Answer 1 · answered Feb 06 '19 at 16:22

0

Use CSS classes instead of style attributes. Plus, make sure the HTML is being rendered properly.

answered Feb 06 '19 at 16:22

Chris Tapay

1,004
10
21

The styles are normally put in CSS classes, I just removed them for the sake of this question. – sxmrxzxr Feb 06 '19 at 16:26
On the other hand, please remember there is a priority to follow about how CSS styles are applied. For this specific case, reading this might be useful: https://stackoverflow.com/a/14857179/7630248 – Chris Tapay Feb 06 '19 at 16:39

score 0 · Accepted Answer · answered Feb 06 '19 at 16:42

So I looked closer at the DOM changes, and noticed that $(".illustrationsContent").empty(); didn't remove the old rows. Changing it to $(".illustrationsContent").remove(); resolved the styling issue (though I have to admit I'm not entirely sure how).

When a table is dynamically reloaded, the column styling is not rendering

2 Answers2