JCH
Java Community | Help. Code. Learn.•13mo 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?
25 Replies
JavaBot
JavaBot•13mo 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.
straightface
straightface•13mo ago
can you show html from chromes inspect element
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. 'OP•13mo ago
No description
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. 'OP•13mo ago
No description
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. 'OP•13mo ago
i cutted the hmtl bc i dont think the other parts would matter (in the code exmaple above
straightface
straightface•13mo ago
huh i dont see onclick on rendered html is this nested in form tag?
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. 'OP•13mo ago
idk thymleaf stuff ig yes
JavaBot
JavaBot•13mo 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 ’•. 'OP•13mo ago
;-;
straightface
straightface•13mo ago
can you share code pen with form and two elements
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. 'OP•13mo 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
straightface
straightface•13mo ago
@' .• KIΛ.RΛR ’•. ' show your POST:/reservation` method too
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. 'OP•13mo 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
straightface
straightface•13mo ago
can you provide mcve on public github? I am having hard time making sense of your issue
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. 'OP•13mo ago
https://github.com/DragonCat4012/web-thymeleaf
GitHub
GitHub - DragonCat4012/web-thymeleaf
Contribute to DragonCat4012/web-thymeleaf development by creating an account on GitHub.
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. 'OP•13mo ago
it not the project itself since i cant share it i think, but i recreated my issue in this starter project from https://github.com/mkyong/spring-boot
GitHub
GitHub - mkyong/spring-boot: List of Spring Boot Tutorials
List of Spring Boot Tutorials. Contribute to mkyong/spring-boot development by creating an account on GitHub.
JavaBot
JavaBot•13mo 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.
💤 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.
💤 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 ’•. 'OP•13mo ago
Cool bot …
straightface
straightface•13mo ago
ok i got it now, so you cant call form.add(e) the way you are doing, since thymeleaf is trying to create html that is understood by chrome. thymeleaf executes java code on server and then spits out html 
                    <button class="btn" id="${entry}" th:id="${entry}" th:text="bool_lane" th:onclick="${form.a(entry)}" />
                    <button class="btn" id="${entry}+1" th:id="${entry}" th:text="bool_lane_2" th:onclick="@{ '/' + ${form.a(entry)}}"/>
 
                    <button class="btn" id="${entry}" th:id="${entry}" th:text="bool_lane" th:onclick="${form.a(entry)}" />
                    <button class="btn" id="${entry}+1" th:id="${entry}" th:text="bool_lane_2" th:onclick="@{ '/' + ${form.a(entry)}}"/>
straightface
straightface•13mo ago
No description
straightface
straightface•13mo ago
this is how thymeleaf spits out html form.a() returns int now @' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. 'OP•13mo ago
when opening the site it still calls a for all entries ;-; and when i click on one still all get triggered @straightface if thats not how i should do that, is tehre a way to call a function the form without a get/post request? bc io ndont want spring to relaod the entire siude and remove all the form inpust again ;-;
straightface
straightface•13mo ago
yeah you are looking for ajax call you will need to create an endpoint that receives this request and does stuff
' .•` KIΛ.RΛR ’•. '
' .•` KIΛ.RΛR ’•. 'OP•13mo ago
ah oki thx!
JavaBot
JavaBot•13mo 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.
Want results from more Discord servers?
Add your server