Dynamically updating a data table in Thymeleaf
My Spring Boot app uses Thymeleaf templates to allow users to upload files. Once uploaded, each file passes through several stages of processing (it is an OCR app) and at each stage database records are written to track the progress.
Currently, the Thymeleaf pages are quite static – once the user has uploaded a file, they are returned a reference number. They then have to manually copy that reference number and use it on another page to search for and display the tracking data. They have to manually refresh the page to update the results.
I would really like a single dynamic page. Once the user submits the file, then the tracking data is automatically displayed in a table which dynamically updates every second or so until processing is complete.
I have seen lots of examples where JQuery is used to update an HTML div and I think this is probably the way forward. But the examples I have seen typically update the div from a PHP page. I have not yet come across any examples in a Thymeleaf MVC context.
This is what I have so far: –
Controller: After the user has uploaded a file, tracking information is retrieved from the database using JPA and added to the model in a list (statusList): –
Optional<List<OcrStatus>> statusListOptional = ocrStatusRepository.findAllByUrn(urnNumber); List<OcrStatus> statusList; if (statusListOptional.get() != null){ statusList = statusListOptional.get(); model.addAttribute("statusList", statusList); } Thymeleaf template: –
The template has a div which contains a fragment: –
<div id="data" th:replace="fragments/ocr-file-details :: ocr-file-details"></div> This fragment simply retrieves statusList from the model and displays the data in a standard table.
What I would now like to do is: –
while (the file is still being processed) { 1. call a url to retrieve the latest status records; 2. update statusList in the model with 1.; 3. refresh the "data" div to display 2.; 4. wait a second and repeat loop; } I have seen numerous example of using JQuery to call a url, but I’m struggling to understand if I could then use this to action steps 2, 3 and 4. Any guidance would be most welcome!
EDIT: This is the kind of JQuery example I have seen so far: –
<script> $(document).ready(function(){ $("#data").load("load.php"); setInterval(function() { $("#data").load("load.php"); }, 1000); }); </script> This is updating the div with the contents of a PHP page. Can I use this function as a template to achieve the steps I’ve listed above, replacing .load("load.php") perhaps with another function that does steps 1, 2 and 3 fom my list?
