1

I use Spring Boot.

There is a page where all ads are displayed. I need to add ads to favorites. This must be done without navigating to other pages or reloading the current page. So user can click on the button and scroll further, inside it has added to favorites. How can this be done without redirect?

I tried different variants and it doesn't work. Help me please!(

I know that I have to use js, but it doesn't work for me. Also I need to change the method addToFavorites. Can you change my code and show it clearly?

My HTML:

<div th:each="ad : ${page.getContent()}">
      <div>
        <div>
          <p><a th:href="@{/advert/{id}(id=${ad.getId()})}" th:text="${ad.getHeadline()}">Headline</a></p>
          <p th:text="${ad.getDescription()}">Description</p>
          <p><i class="fa fa-map-marker" aria-hidden="true" th:text="${dao.getLocation(ad)}"></i> New York</p>
          <p><i class="fa fa-clock-o" aria-hidden="true"></i><span th:text="${dao.getDate(ad)}">12.07.2020 19:08</span></p>
        </div>
          <form  th:action="@{/favorites}" method="post">
            <input type="hidden" name="ad" th:value="${ad}">
            <button type="submit">Add to favorites</button>
          </form>
      </div>
    </div>

My Java:

    @GetMapping("/advert")
    public String mainPage(@PageableDefault(sort = {"id"}, size = 10, direction = Sort.Direction.DESC) Pageable pageable,
                           Model model) {
        Page<Advert> page = advertDAO.findAll(pageable);
        model.addAttribute("page", page);
        model.addAttribute("dao", advertDAO);
        return "main";
    }

    @PostMapping("/favorites")
    public void addToFavorites(@RequestParam("ad") Advert advert){
        // add to favorites
    }
Roman
  • 11
  • 2
  • You will need to send async(Ajax) requests. See this https://stackoverflow.com/a/11855073/607637. You will need jquery for this. Which you can install using webjars. See https://github.com/gtiwari333/spring-boot-web-application-seed/blob/master/main-app/src/main/resources/templates/_fragments/header.html for how to use webjar – gtiwari333 Sep 22 '20 at 22:52
  • @gtiwari333 jQuery is fading, especially with the introduction of [the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). – chrylis -cautiouslyoptimistic- Sep 22 '20 at 23:09
  • @chrylis-cautiouslyoptimistic- yeah.. it would be great if we can do it with vanilla js. been using jquery for about 12 years. i think its still great :) – gtiwari333 Sep 22 '20 at 23:11
  • @gtiwari333 And what should I change in the method `addToFavorites()`? – Roman Sep 23 '20 at 07:39
  • `I know that I have to use js, but it doesn't work for me` what do you mean by that? Have you already tried using JS? If so, can you share what you tried? – gtiwari333 Sep 23 '20 at 22:31
  • https://stackoverflow.com/questions/64067251/ajax-in-thymeleaf-springmvc/64069308#64069308 See this answer for an example of ajax call with vanilla JS. You should probably do pretty much similar to that except your ajax call will be POST – gtiwari333 Sep 25 '20 at 18:11

0 Answers0