How to update table view in html?

Question

I have used this code for my project https://getmdl.io. Its simple and nicely designed front-end. And it loads some checkmarks for each row after the page loads.

However I am having trouble updating the table view after I dynamically add some more rows to tbody with ajax. I add them by getting the tbody element and then use document.createElement("td")

<table id="test-table" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
    <thead>
        <tr>
            <th class="mdl-data-table__cell--non-numeric">Predmet</th>
            <th>Vreme</th>
            <th>Datum</th>
        </tr>
    </thead>
    <tbody>
        <data-mdl-data-table-selectable-name="materials[]" data-mdl-data-table-selectable-value="acrylic">
    <tr>
        <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
        <td>10</td>
        <td>$2.35</td>
    </tr>
</tbody>
</table>

Code that is used to add new rows:

$.ajax({
    url: "api2.php",
    success: function(result) {
        result = $.parseJSON(result);
        $tabela = $("#test-table").find("tbody");
        for (var i = 0; i < result.length; i++) {
            var newTrow = document.createElement("tr");
            var newTdata = document.createElement("td");
            newTdata.className="mdl-data-table__cell--non-numeric";
            newTdata.innerHTML = result[i];
            newTrow.appendChild(newTdata);
            newTrow.innerHTML+="<td>asdf</td><td>asdf</td>";

            $($tabela).append(newTrow);

        };
        componentHandler.upgradeElement($tabela, "mdl-data-table--selectable"); // I have tried many options for both parameters nothing works

        if (chosen_browser_is_supported()) {
            $("#subjects").chosen({
                width: "450px"
            });
        } else {
            $("#subjects").show();
        }
    }
});

According to this source https://github.com/jasonmayes/mdl-component-design-pattern which is used for this purpose, i should just do

componentHandler.upgradeElement(document.getElementById("test-table"))

but this doesn't work at all.

Also MaterialDataTable is visible in web console but I have no idea on how to utilize it.

Provide JS code which "dynamically add some more rows". – Petro Gordiyevich Jun 13 '16 at 00:32 — Petro Gordiyevich, Jun 13 '16 at 00:32
I have just updated the post. – Dusan J. Jun 13 '16 at 07:28 — Dusan J., Jun 13 '16 at 07:28

score 0 · Answer 1 · answered Jun 13 '16 at 13:01

I think your problem might be that upgradeElement needs to be plural in this case. Try

componentHandler.upgradeElements(document.getElementById("test-table"));

If that doesn't work (in the past there have been bugs in these methods) try upgrading the whole page:

componentHandler.upgradeDom();

score 0 · Answer 2 · answered Jun 13 '16 at 17:31

It appears that this support of mdl table is dropped. It is expected of developer to now create checkboxes and not to rely on mdk. This is in contrast to currently available info on getmdl website(13. June 2016) but it is discussed in the issues on github.

Solution is available on github wiki pages here:

https://github.com/google/material-design-lite/wiki/Deprecations#automatic-selection-checkboxes

How to update table view in html?

2 Answers2