0

I do a simple vocabulary application as a practice. It can insert new vocabularies and then open that vocabulary so you can add some words in it. My goal is to insert those words with a modal and with the button Save redirect to that current vocabulary's url.

So create a new Vocabulary and with an "Open" button you go to localhost:8080/vocabulary/1 where you can add new words with a modal, and then with the Save button you redirect back to that URL. (vocabulary/{id})

My question is: Could anyone recommend a solution? I have tried to find something, but it doesn't work. I tried with this:

Controller:

@PostMapping("/vocabulary/{id}")
public ModelAndView addWord(@RequestBody Words word, @PathVariable(name="id") Integer id) {
    ModelAndView mav = new ModelAndView("redirect:/vocabulary");

    wordService.addWord(word);

    List<Words> wordList = wordService.getWordsByVocabulary(id);
    mav.addObject("listOfWords", wordList);

    return mav;
}

HTML-Modal

<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createModalLabel">New Word</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form th:object="${word}" method="post" th:action="@{'/vocabulary/' + ${vocId}}">
                    <div class="form-group">
                        <label for="english" class="col-form-label">English:</label>
                        <input type="text" class="form-control" id="english" th:field="*{english}">
                    </div>

                    <div class="form-group">
                        <label for="hungarian" class="col-form-label">Hungarian:</label>
                        <input type="text" class="form-control" id="hungarian" th:field="*{hungarian}">
                    </div>

                    <input type="hidden" th:field="*{vocabularyId}" id="vocabularyId">

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

The Save button starts the Controller's addWord() method.

Bnc
  • 23
  • 4
  • you can use `spring-hateos` https://spring.io/projects/spring-hateoas – namila007 Jul 03 '22 at 16:23
  • Give the http response status code `302` and send your url as a value of the `Location` response header. When the browser detects the 302 status code it will automatically check whether there is a `Location` header url value present in the response headers. Then it will redirect you to that url. https://en.wikipedia.org/wiki/HTTP_302 – Maurice Jul 03 '22 at 22:50

0 Answers0