I'm rendering checkboxs with JS and posting data to the controller

<form><table id="tasks"
        border="1" cellspacing="5" cellpadding="10">    <tr>        <td></td>        <td><b>Title</b></td>       <!--<td><b>Actions</b></td>-->    </tr>    <tr data-th-each="task : ${tasks}">        <td><input type="checkbox" th:id="${task.getId().toString()}" name="task_checkbox"></td>        <td> <a th:href="@{'/tasksJournal/'+${journalId}+'/updateTask/'+ ${task.getId().toString()}}" data-th-text="${task. getTitle()}"> </a></td>     <!--<td>            <form th:action="@{'/tasksJournal/'+${journalId}+'/deleteTask/'+ ${task.getId().toString()}}" method="post">                <script>                    function clickHandler() {
                        window.confirm("Do you really want to delete task?");
                </script>                <button type="submit" value="delete" onclick="clickHandler()"/>                Delete</button>            </form>        </td>-->    </tr></table><section>    <h1></h1></section><div>        <script th:inline="javascript">            function getCheckedTasks(journal_id) {
               let result= new Array();
               let checkboxes= document.getElementsByName("task_checkbox");
               for(let i= 0; i < checkboxes.length; ++i){
                   if(checkboxes[i].checked=== true){
               let resultStr= result[0];
               for(let i= 1; i< result.length; ++i){
                   resultStr= resultStr.concat(',',result[i]);
               let xhr= new XMLHttpRequest();
               let endpoint= "/tasksJournal/"+ journal_id + "/deleteTasks/";
               xhr.open("POST", endpoint);
        </script>        <button value="Delete" style="float:left; margin-right: 2px" th:onclick="getCheckedTasks([[${journalId}]])"/>        Delete Tasks</button></div></form>


    public String deleteTasks(@PathVariable(name= PathVariables.JOURNAL_ID) String idJournal,
                                  @RequestBody String ids,
                                  model) {
        String[] stringIds= ids.split(",");
        for (String currentId : stringIds) {
            try {
            } catch (DeleteTaskException e) {
                model.addAttribute(ModelAttributes.NOT_FOUND_MESSAGE, e.getMessage());
                return ErrorPages.NOT_FOUND;
        return String.format(PathTemplates.REDIRECT_TO_HOME, idJournal);

After pressing the Delete Task button, the tasks are deleted successfully, however, in the view, the deleted tasks disappear only after the page is refreshed. How to make the selected tasks using checkboxes, after clicking on the Delete Task button, immediately disappear in the view, and not after the user refreshes the page?

So after deleting the task, you need to return those that remained in the database and redraw

qeqolla2022-02-13 21:08:07

Why such difficulties? You know the id of the tasks to be deleted from the checkbox attribute -well, after the date server gives a positive answer about deleting the task, delete the checkbox with this id from the DOM of the page.

phpBear2022-02-14 06:34:22