Home>
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){
result.push(checkboxes.item(i).getAttribute("id"));
}
}
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);
xhr.send(resultStr);
}
</script> <button value="Delete" style="float:left; margin-right: 2px" th:onclick="getCheckedTasks([[${journalId}]])"/> Delete Tasks</button></div></form>
Controller
@PostMapping(Endpoints.DELETE_TASKS)
public String deleteTasks(@PathVariable(name= PathVariables.JOURNAL_ID) String idJournal,
@RequestBody String ids,
model) {
String[] stringIds= ids.split(",");
for (String currentId : stringIds) {
try {
taskService.deleteTaskById(UUID.fromString(currentId));
} 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?
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:22Related questions
- How to use th:each to pass a string to JavaScript code embedded in an html page
- javascript : Block scrolling by clicking on the arrows
- javascript : VueJS Outputting html through a function
- javascript : $("#element").va() returns an empty string, but if this is written in the console (ctrl+shift+i), then the correct
- javascript : Positioning an element relative to a block by coordinates
- javascript : How to use JS submit event in my code
- javascript : Send focus to input created in blur handler
- javascript : I want to prevent the "Error 8150002e" dialog that appears in HTA (HTML Applications) from appearing on Windows 10
- javascript : the inner square must not leave the parent div(box) when manipulating it
So after deleting the task, you need to return those that remained in the database and redraw
qeqolla2022-02-13 21:08:07