Thymeleaf Iteration with buttons, every button onclick gets called simultaniosly | Java Community | Help. Code. Learn. | Page 1

leaden heart Nov 25, 2023, 3:43 PM

#

    <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?

echo valveBOT Nov 25, 2023, 3:43 PM

#

⌛ This post has been reserved for your question.

Hey @leaden heart! 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.

daring star Nov 25, 2023, 4:49 PM

#

can you show html

#

from chromes inspect element

leaden heart Nov 25, 2023, 6:33 PM

#

#

#

i cutted the hmtl bc i dont think the other parts would matter (in the code exmaple above

daring star Nov 25, 2023, 6:37 PM

#

huh i dont see onclick on rendered html

#

is this nested in form tag?

leaden heart Nov 25, 2023, 8:18 PM

#

daring star huh i dont see onclick on rendered html

idk thymleaf stuff ig

leaden heart Nov 25, 2023, 8:18 PM

#

daring star is this nested in form tag?

yes

echo valveBOT Nov 26, 2023, 1:20 AM

#

💤 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.

leaden heart Nov 26, 2023, 10:08 AM

#

;-;

daring star Nov 26, 2023, 11:05 AM

#

can you share code pen with form and two elements

leaden heart Nov 26, 2023, 2:13 PM

#

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>

#

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";
    }

Form

   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

daring star Nov 26, 2023, 4:08 PM

#

@leaden heart show your POST:/reservation method too

leaden heart Nov 26, 2023, 4:26 PM

#


    @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";
    }

#

@daring star

daring star Nov 26, 2023, 4:32 PM

#

can you provide mcve on public github?

#

I am having hard time making sense of your issue

leaden heart Nov 26, 2023, 8:35 PM

#

https://github.com/DragonCat4012/web-thymeleaf

GitHub

GitHub - DragonCat4012/web-thymeleaf

Contribute to DragonCat4012/web-thymeleaf development by creating an account on GitHub.

#

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.

echo valveBOT Nov 27, 2023, 1:40 AM

#

💤 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.

echo valveBOT Nov 27, 2023, 7:00 AM

#

💤 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.

echo valveBOT Nov 27, 2023, 12:10 PM

#

💤 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.

leaden heart Nov 27, 2023, 1:32 PM

#

Cool bot …

daring star Nov 27, 2023, 3:51 PM

#

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

daring star Nov 27, 2023, 4:11 PM

#

                    <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)}}"/>

#

this is how thymeleaf spits out html

#

form.a() returns int now

#

@leaden heart

leaden heart Nov 27, 2023, 4:40 PM

#

when opening the site it still calls a for all entries ;-;

#

and when i click on one still all get triggered

leaden heart Nov 27, 2023, 4:56 PM

#

@daring star
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 ;-;

daring star Nov 27, 2023, 5:15 PM

#

yeah you are looking for ajax call

#

you will need to create an endpoint that receives this request and does stuff

leaden heart Nov 27, 2023, 5:25 PM

#

ah oki thx!

#Thymeleaf Iteration with buttons, every button onclick gets called simultaniosly