Refresh Gridjs Table on AJAX success

Question

The AJAX code works fine and creates my desired outputs and on "success"

success: function (data) {
console.log(data);     
     $( "#gridjs_table" ).load(window.location.href + " #gridjs_table" );//updates the gridjs_table div
}

Gridjs Table works fine as well

<script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
<link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet"/>
<div id="gridjs_table">

<div id="wrapper"></div>
<script>
new gridjs.Grid({
    columns: [
        { name: "Title",
            formatter: (cell, row) => {
            return gridjs.html(`<span style='text-align: center;' id='visible_title'>${row.cells[0].data}</span>`);
        
        }},
        { name: "src", hidden: true},
        { name: "Cover", 
            sort:{enabled: false},
            formatter: (cell, row) => {
            return gridjs.html(`<div style='text-align: center;'><img id="cover" src="../library/${row.cells[1].data}" alt="no"></div>`);
        }
        },
        { name: "Link", sort:{enabled: false},
            formatter: (cell, row) => {
            return gridjs.html(`<div id='link_format'><span id='visible_link'>${row.cells[3].data}</span><br><a href='${row.cells[3].data}' target='_blank'><div id='visit'>Visit</div></a></div>`);
        }},
        { name: "Status"},
        { name: "Views"},
        { name: "Stars" },
        { name: "Bookmarked"},
        { name: "Action",
            sort:{enabled: false},
            formatter: (cell, row) => {
            return gridjs.html(`<a href='edit.php?file=${row.cells[2].data}' onclick="window.open('edit.php?file=${row.cells[2].data}', 
                            'newwindow', 
                            'width=300,height=250'); 
                return false;"><div id='edit'>Edit</div></a>
                
                
                    <a href='../library/view.php?view=${row.cells[2].data}' onclick="window.open('../library/view.php?view=${row.cells[2].data}', 
                                'newwindow', 
                                'width=320,height=580'); 
                    return false;" target='_blank'><div id='mobile'>Mobile</div></a>
                `);
            }
        }
],
    data: [
    <?php
        echo $data_implode;
        ?>
],
sort: true,
search: {
    enabled: true,
    debounceTimeout: 500,

},
style: {
    table: {
        border: '3px solid #ccc',
    },
},
fixedHeader: true,
pagination: {
    enabled: true,
    limit: 3
}

}).render(document.getElementById("wrapper"));
</script>
</div>
</div> 

On success, the ajax should refresh the table but it's not working. It just went blank, no display, the whole table is gone. Refreshing the whole page works and displays the newly added items but I don't want that.

Answer 1

Refreshing the div holding the table does not work so I ended up using this code and it worked.

$('body').load('dashboard.php');