Как предотвратить обновление страницы sh после пост-метода в весенней загрузке приложения? - PullRequest
Новая
       46

Как предотвратить обновление страницы sh после пост-метода в весенней загрузке приложения?

0 голосов
/ 18 апреля 2020

Я использую Spring Boot и Thymeleaf. У меня есть метод post, при котором форма обрабатывается (добавление данных из полей в базу данных)

Я хочу использовать библиотеку Toastr для отображения уведомлений, если добавление данных прошло успешно или нет после нажатия кнопки отправки. Библиотека работает, но уведомление сразу исчезает, потому что после нажатия кнопки «Отправить» происходит обновление страницы sh.

После нажатия кнопки «Отправить» я хочу остаться на той же странице

Как можно запретить обновление страницы sh после нажатия кнопки «Отправить» для отображения уведомлений?

Контроллер: 

@PostMapping("/sketches/add")
    public String addSketch(
                            @Valid Sketch sketch,
                            BindingResult result,
                            ModelMap model,
                            RedirectAttributes redirectAttributes) {        
        if (result.hasErrors()) {
            return "admin/add-sketch";
        }
       sketchRepository.save(sketch);       
        return "redirect:/admin/sketches/add";
    }

HTML: 

<form action="#" th:action="@{/admin/sketches/add}" th:object="${sketch}" method="post" id="save-sketch">
        <div class="add-sketch">
            <div class="title">
                <div class="title-text">
                    <p>Title
                        <span th:if="${#fields.hasErrors('title')}" th:errors="*{title}" class="error"></span>
                    </p>
                    <input type="text" class="title-input" th:field="*{title}">
                </div>
                <div class="title-file">
                    <label for="file-input">
                        <img th:src="@{/images/add image.png}" alt="upload image">
                    </label>
                    <input id="file-input" type="file"/>
                </div>
                <span id="image-text">No file chosen, yet</span>
            </div>

            <!--SKETCH TEXT====================================-->
            <div class="sketch-text">
                <p>Sketch Text
                    <span th:if="${#fields.hasErrors('text')}" th:errors="*{text}" class="error"></span>
                </p>
                <textarea name="sketch-area" id="" cols="55" rows="6" th:field="*{text}"></textarea>
            </div>

            <!--DROPDOWN-->
            <div class="select">
                <select name="select-category" id="select-category" th:field="*{category}">
                    <option value="Buttons">Buttons</option>
                    <option value="Potentiometers">Potentiometers</option>
                    <option value="Encoders">Encoders</option>
                    <option value="Leds">Leds</option>
                </select>
            </div>

            <span th:if="${#fields.hasErrors('category')}" th:errors="*{category}" class="error"></span>

            <!--ADD GIF=====================================-->
            <input type="file" id="gif-file" hidden="hidden">
            <button type="button" id="gif-button">Add GIF<i class="fas fa-image"></i></button>
            <span id="gif-text">No file chosen, yet</span>

            <div class="save-sketch">
                <input type="submit" class="save-sketch-button" id="button-save" value="Save Sketch"/>
            </div>               

        </div>
    </form>


</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
    document.getElementById('button-save').addEventListener('click', function () {
        toastr.info('Button Clicked');

    });
</script>
</body>
</html>
...