POST request. Spring, Thymeleaf

0
votes

I need to create a new task. But nothing heppen when I click on "saveButton". URL in action Form ("@{/add}") equals URL in controller, but method doesn't call.

Please help. Thanks!

This is my controller:

@Controller
@RequestMapping(value = "/")
public class MainPageController {

@Autowired
TaskDao taskDao;

@RequestMapping(value = "/", method = RequestMethod.GET)
public String getMainPage(Model model){

    model.addAttribute("taskList", taskDao.findAll());
    model.addAttribute("task", new Task());

    return "mainPage";
}

@RequestMapping(value = "/add", method = RequestMethod.POST)
public String add(@ModelAttribute Task task){

    System.out.println("OK"); // Just check entry 

    taskDao.save(task);

    return "mainPage";
}

And HTML file.:

<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
<th:block th:replace="template/head :: meta"/>
<th:block th:replace="template/head :: css"/>
<th:block th:replace="template/head :: javascript"/>

<script type="text/javascript">
    $(document).ready(function(){
        $("#popup").click(function(){
            $("#myModal").modal('show');
        });
    });
</script>

</head>
<body>

<div class=" col-md-4">
    <h1>Tasks List</h1>
    <table
        xmlns:th="http://www.thymeleaf.org"
        class="table table-bordered table-hover table-striped">
        <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Description</th>
              <th>Delete</th>
            </tr>
        </thead>

        <tbody>
            <tr th:data="${task.id}" class="cursor-pointer" th:each="task : ${taskList}">
              <td th:text="${task.id}"></td>
              <td th:text="${task.name}"></td>
              <td th:text="${task.description}"></td>
              <td class="col-md-2 text-center">
                <a th:href="@{'/list/remove/' + ${task.id}}" class="btn btn-primary" th:text="#{deleteButton}"></a> </td>
            </tr>
        </tbody>
    </table>

    <a th:href="@{/}" class="btn btn-default pull-left" th:text="#{showButton}"></a>
    <a th:href="@{/#}" id="popup" class="btn btn-primary pull-right" th:text="#{addButton}"></a>
</div>

<!-- Modal HTML -->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Enter task information</h4>
            </div>
            <div class="modal-body">
                <form
                    method="post"
                    th:object="${task}"
                    th:action="@{/add}">

                    <div class="form-group">
                        <label for="input1">Name</label>
                        <input type="text"
                           class="form-control"
                           placeholder="Name"
                           th:field="*{name}"
                           id="input1"/>
                    </div>

                    <div class="form-group">
                        <label for="input2">Description</label>
                        <input type="text"
                           class="form-control"
                           placeholder="Description"
                           th:field="*{description}"
                           id="input2"/>
                    </div>

                    <button type="button" class="btn btn-default" data-dismiss="modal" th:text="#{closeButton}"></button>
                    <button type="button" class="btn btn-primary pull-right" th:text="#{saveButton}"></button>
                </form>
            </div>
        </div>
    </div>
</div>

</body>
</html>
1
javaspringtwitter-bootstrapthymeleaf

1 Answers

0
votes

You have no <input type="submit" button in your form or any AJAX listener on the save button, so data is never POST-ed