Execute JavaScript page refresh on postgres database entry addition

Question

I have a Spring web app, where entries are added every 10 seconds to the database. I'd like my page to automatically reload when a new entry is added to the database. So far I have come up with such code:

function contentRefresh() {
$.ajax({
    url: "/refresh",
    success: function(data) {
        console.log(data);
         $("#main-content").html(data);
        }
});
}

And the data that is returned from the controller is a html fragment:

@RequestMapping("/refresh")
public String refreshPage(Model model, Pageable pageable){

    PageWrapper<NetworkHashrate> page = new PageWrapper<NetworkHashrate>(netService.getAllNetworks(pageable), "");

    model.addAttribute("page", page);
    model.addAttribute("networkHashrates", page.getContent());

    return "main :: table-content";
}

And a .html that contains refreshed fragment:

<div class="table-responsive" id="main-content" th:fragment="table-content">
                    <table class="table table-hover ">

                        <thead class="thead-inverse">
                        <tr>
                            <th class="col-md-2 text-center">Network Id</th>
                            <th class="col-md-2 text-center">Rep_date</th>
                            <th class="col-md-2 text-center">Hashrate</th>
                        </tr>
                        </thead>

                        <tr style="cursor: pointer;" th:each="networkHashrate : ${networkHashrates}" th:onclick="'javascript:openPoolModal(\''+ ${networkHashrate.id} + '\');'">
                            <td class="text-center" th:text="${networkHashrate.id}"> Sample id</td>
                            <td class="text-center" th:text="${networkHashrate.rep_date}">Sample rep-date</td>
                            <td class="text-center" th:text="${networkHashrate.hashrate}">Sample hashrate</td>
                            </td>
                        </tr>

                    </table>

                    <button type="button" class="btn btn-success" th:onclick="'javascript:contentRefresh();'">Refresh!</button>

                        <div class="text-center" id="stat">
                            <div class="pagination"><p>Displaying <span class="badge" th:text="${page.size * (page.number-1) + 1}"></span> -
                                <span class="badge" th:text="${page.lastPage ? page.totalElements : page.size * (page.number-1)+ page.size}"></span> of
                                <span class="badge" th:text="${page.totalElements}"></span> total records</p>
                            </div>
                        </div>

                </div>

Earlier, I've been refreshing the page via <meta http-equiv="refresh" content="60" /> ...but I've been told that's a bad approach. I have tested the JS code with button and it seems to work, but the refresh thing scares me... How do I refresh the page based on entry addition to the database?

Answer 1

I have added a setInterval to my JS script like:

setInterval("contentRefresh();", 10000 );

Is not a hard refresh, but an Ajax call to reload content, so I guess that works.