JCH
Java Community | Help. Code. Learn.•11mo ago
' .•` KIΛ.RΛR ’•. '

Thymeleaf Iteration with buttons, every button onclick gets called simultaniosly

    <div>
            <div class="alleyContainer" th:each="entry, it : ${listAlleys}" th:with="index = ${it.count}"> <!-- th:classappend="${entry.getType()}" -->
                <div class="alleyContainer grid-alleyContainer">
                    <button class="btn" id="${entry.getId()}" th:id="${entry.getId()}" th:text="#{reservation.alley.book}" th:onclick="${form.addAlley(entry.getId())}">
                        Book Lane
                    </button>
                </div>
            </div>
        </div>
    <div>
            <div class="alleyContainer" th:each="entry, it : ${listAlleys}" th:with="index = ${it.count}"> <!-- th:classappend="${entry.getType()}" -->
                <div class="alleyContainer grid-alleyContainer">
                    <button class="btn" id="${entry.getId()}" th:id="${entry.getId()}" th:text="#{reservation.alley.book}" th:onclick="${form.addAlley(entry.getId())}">
                        Book Lane
                    </button>
                </div>
            </div>
        </div>
Foreach has 12 items, they all get displayed with correct id, but when i tap on a button the onlcik gets called for all 12 entrys at the same time?
23 Replies
JavaBot
JavaBot•11mo ago
⌛ This post has been reserved for your question.
Hey @' .• KIΛ.RΛR ’•. '! Please use /close or the Close Post` button above when your problem is solved. Please remember to follow the help guidelines. This post will be automatically closed after 300 minutes of inactivity.
TIP: Narrow down your issue to simple and precise questions to maximize the chance that others will reply in here.
Unknown User
Unknown User•11mo ago
Message Not Public
Sign In & Join Server To View
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. '•11mo ago
No description
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. '•11mo ago
No description
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. '•11mo ago
i cutted the hmtl bc i dont think the other parts would matter (in the code exmaple above
Unknown User
Unknown User•11mo ago
Message Not Public
Sign In & Join Server To View
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. '•11mo ago
idk thymleaf stuff ig yes
JavaBot
JavaBot•11mo ago
💤 Post marked as dormant
This post has been inactive for over 300 minutes, thus, it has been archived. If your question was not answered yet, feel free to re-open this post or create a new one. In case your post is not getting any attention, you can try to use /help ping. Warning: abusing this will result in moderative actions taken against you.
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. '•11mo ago
;-;
Unknown User
Unknown User•11mo ago
Message Not Public
Sign In & Join Server To View
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. '•11mo ago
so apparantly it calls the func for all element when the iste is loaded? 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" th:href="@{/resources/css/style.css}">
    <title th:text="#{welcome.title}">Welcome!</title>
</head>

<body>
    <form class="" action="#" th:action="@{/reservation}" method="post" th:object="${form}">
        <div class="grid-bookReservation alleyContainer">
            <div>
                <div>
                    <label for="reservation-date"></label>
                    <input class="formContent" type="datetime-local" th:field="*{date}"
                        th:onchange="${form.reloadAlleyOptions()}" />
                </div>
            </div>
        </div>

        <div>
            <div class="alleyContainer" th:each="entry, it : ${listAlleys}" th:with="index = ${it.count}"> <!-- th:classappend="${entry.getType()}" -->
                <div class="alleyContainer grid-alleyContainer">

                    <button class="btn" id="${entry.getId()}" th:id="${entry.getId()}" th:text="#{reservation.alley.book}" th:onclick="${form.addAlley(entry.getId())}">
                        Book Lane
                    </button>
                </div>

            </div>
        </div>
    </form>

</body>

</html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" th:href="@{/resources/css/style.css}">
    <title th:text="#{welcome.title}">Welcome!</title>
</head>

<body>
    <form class="" action="#" th:action="@{/reservation}" method="post" th:object="${form}">
        <div class="grid-bookReservation alleyContainer">
            <div>
                <div>
                    <label for="reservation-date"></label>
                    <input class="formContent" type="datetime-local" th:field="*{date}"
                        th:onchange="${form.reloadAlleyOptions()}" />
                </div>
            </div>
        </div>

        <div>
            <div class="alleyContainer" th:each="entry, it : ${listAlleys}" th:with="index = ${it.count}"> <!-- th:classappend="${entry.getType()}" -->
                <div class="alleyContainer grid-alleyContainer">

                    <button class="btn" id="${entry.getId()}" th:id="${entry.getId()}" th:text="#{reservation.alley.book}" th:onclick="${form.addAlley(entry.getId())}">
                        Book Lane
                    </button>
                </div>

            </div>
        </div>
    </form>

</body>

</html>
Controller 
   @GetMapping(path = "/reservation")
    public String reservations(Model model, @ModelAttribute ReservationForm form) {
        form.setSelectableAlleys(filterAviableLanes(form));
        model.addAttribute("packages", getPackages());
        System.out.println("Packages: ");
        System.out.println(getPackages());
        model.addAttribute("form", form);
        model.addAttribute("listAlleys", form.getSelectableAlleys());
        model.addAttribute("arr", reservationAttribute.displayAlleys());
        model.addAttribute("people", form.alleyPeople());
        model.addAttribute("arrRemovable", getAddedAlleys(form));
        model.addAttribute("price", form.reservationPrice());

        return "reservation";
    }
   @GetMapping(path = "/reservation")
    public String reservations(Model model, @ModelAttribute ReservationForm form) {
        form.setSelectableAlleys(filterAviableLanes(form));
        model.addAttribute("packages", getPackages());
        System.out.println("Packages: ");
        System.out.println(getPackages());
        model.addAttribute("form", form);
        model.addAttribute("listAlleys", form.getSelectableAlleys());
        model.addAttribute("arr", reservationAttribute.displayAlleys());
        model.addAttribute("people", form.alleyPeople());
        model.addAttribute("arrRemovable", getAddedAlleys(form));
        model.addAttribute("price", form.reservationPrice());

        return "reservation";
    }
Form 
   public void addAlley(int alley) {
        System.out.println("add Alley");
        System.out.println(alley);
    }
   public void addAlley(int alley) {
        System.out.println("add Alley");
        System.out.println(alley);
    }
Log when site is loaded 
Packages:
[]
reload alleys
add Alley
1
add Alley
2
add Alley
3
add Alley
4
add Alley
5
add Alley
6
add Alley
7
add Alley
8
add Alley
9
add Alley
10
add Alley
11
add Alley
12
Packages:
[]
reload alleys
add Alley
1
add Alley
2
add Alley
3
add Alley
4
add Alley
5
add Alley
6
add Alley
7
add Alley
8
add Alley
9
add Alley
10
add Alley
11
add Alley
12
Unknown User
Unknown User•11mo ago
Message Not Public
Sign In & Join Server To View
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. '•11mo ago
    @PostMapping(path = "/reservation")
    String addEntry(@Valid @ModelAttribute("form") ReservationForm form, Errors errors, Model model) {
        form.validate(errors);

        if (errors.hasErrors()) {
            return reservations(model, form);
        }

        ReservationModel mod = form.toNewEntry();
        System.out.println("#########");
        System.out.println(mod);

        return "redirect:/reservationsucess";
    }
    @PostMapping(path = "/reservation")
    String addEntry(@Valid @ModelAttribute("form") ReservationForm form, Errors errors, Model model) {
        form.validate(errors);

        if (errors.hasErrors()) {
            return reservations(model, form);
        }

        ReservationModel mod = form.toNewEntry();
        System.out.println("#########");
        System.out.println(mod);

        return "redirect:/reservationsucess";
    }
@straightface
Unknown User
Unknown User•11mo ago
Message Not Public
Sign In & Join Server To View
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. '•10mo ago
https://github.com/DragonCat4012/web-thymeleaf
GitHub
GitHub - DragonCat4012/web-thymeleaf
Contribute to DragonCat4012/web-thymeleaf development by creating an account on GitHub.
Want results from more Discord servers?
Add your server