Dynamically update a thymeleaf list #58

LiveNathan · 2023-08-02T16:50:23Z

LiveNathan
Aug 2, 2023

Can someone point me to a resource to get started with dynamically updating a thymeleaf list with HTMX?

I think I drank too much last night and my brain is not working well. I've watched a few demo videos, but still can't quite figure out how to implement this basic functionality, which is: Display a list of items. Click an item to display the next list of items.

I have added the htmx-spring-boot-thymeleaf dependency. The funny thing is that all of the htmx/thymeleaf/java demos are all todo apps. Every one of them. I know I should probably be able to figure it out from those, but I still haven't been able to find a simple example of updating the contents of a list.

<ul>
    <li th:each="item : ${listOfOptions}">
        <span th:text="${item}"><a href="#" th:id="${item}" hx:get="@{/align/search/{id}(id=${item.id})}"></a></span>
    </li>
</ul>

Answered by LiveNathan

Aug 3, 2023

Got it working. Turns out I was sending the wrong object to the htmx response.

@GetMapping("/search-new/{id}")
    @HxRequest
    public HtmxResponse updateSearchList(HtmxRequest details, Model model, @PathVariable("id") Long id ) {
        model.addAttribute("listOfObjects", hardwareModelService.findAll());
        return new HtmxResponse().addTemplate("fragments/item-list :: item-list");
    }

View full answer

wimdeblauwe · 2023-08-02T18:38:24Z

wimdeblauwe
Aug 2, 2023
Maintainer

Do you want to do pagination? Or update an item in the existing list itself?

1 reply

LiveNathan Aug 2, 2023
Author

I just want to replace the entire list.

search.html

<body>
<div layout:fragment="page-content">
    <div th:replace="~{fragments/page-title :: page-title('Search')}"></div>
    <div th:replace="~{fragments/item-list :: item-list(${listOfObjects})}"></div>
</div>
</body>

item-list.html

<body>
<div th:fragment="item-list(listOfObjects)" class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
    <table class="tableOfObjects">
        <thead>
        <tr>
            <th th:replace="~{fragments/table :: header(${'Id'})}"></th>
            <th th:replace="~{fragments/table :: header(${'Name'})}"></th>
            <th th:replace="~{fragments/table :: header(${'Select'})}"></th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="object : ${listOfObjects}">
            <td th:replace="~{fragments/table :: data(${object.id})}"></td>
            <td th:replace="~{fragments/table :: data(${object.name})}"></td>
            <td>
                <button th:attr="hx-get=@{/align/search-new/{id}(id=${object.id})}"
                        hx-swap="outerHTML"
                        hx-target="tableOfObjects">
                    Select
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>

AlignController.java

...
@GetMapping("/search-new")
    public String showNewSearchPage(Model model) {
        model.addAttribute("listOfObjects", brandService.findAll());
        return "search-new";
    }

    @GetMapping("/search-new/{id}")
    @HxRequest
    public String updateSearchList(HtmxRequest details, Model model, @PathVariable("id") Long id ) {
        model.addAttribute("listOfOptions", hardwareModelService.getAllNames());

        return "fragments/item-list :: item-list";
    }

LiveNathan · 2023-08-02T19:11:15Z

LiveNathan
Aug 2, 2023
Author

Based on https://www.wimdeblauwe.com/blog/2022/06/15/thymeleaf-and-htmx-with-out-of-band-swaps/ it looks like I actually need to return an HtmxResponse, like this:

@GetMapping("/search-new/{id}")
    @HxRequest
    public HtmxResponse updateSearchList(HtmxRequest details, Model model, @PathVariable("id") Long id ) {
        model.addAttribute("listOfObjects", hardwareModelService.getAllNames());

        return new HtmxResponse().addTemplate("fragments/item-list :: item-list");
    }

0 replies

LiveNathan · 2023-08-02T21:30:12Z

LiveNathan
Aug 2, 2023
Author

Based on https://github.com/wimdeblauwe/blog-example-code/blob/master/todomvc-htmx-oob/src/main/resources/templates/fragments.html I thought maybe I was missing the hx-trigger, but it's still not working.

<button th:attr="hx-get=@{/align/search-new/{id}(id=${object.id})}"
                        hx-swap="outerHTML"
                        hx-target="#tableOfObjects"
                        hx-trigger="click">
                    Select
                </button>

@GetMapping("/search-new/{id}")
    @HxRequest
    public HtmxResponse updateSearchList(HtmxRequest details, Model model, @PathVariable("id") Long id ) {
        model.addAttribute("listOfObjects", hardwareModelService.getAllNames());

        return new HtmxResponse().addTemplate("~{fragments/item-list :: item-list(${listOfObjects})}");
    }

0 replies

LiveNathan · 2023-08-03T00:52:27Z

LiveNathan
Aug 3, 2023
Author

Got it working. Turns out I was sending the wrong object to the htmx response.

@GetMapping("/search-new/{id}")
    @HxRequest
    public HtmxResponse updateSearchList(HtmxRequest details, Model model, @PathVariable("id") Long id ) {
        model.addAttribute("listOfObjects", hardwareModelService.findAll());
        return new HtmxResponse().addTemplate("fragments/item-list :: item-list");
    }

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dynamically update a thymeleaf list #58

{{title}}

Replies: 4 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Dynamically update a thymeleaf list #58

LiveNathan Aug 2, 2023

Replies: 4 comments · 1 reply

wimdeblauwe Aug 2, 2023 Maintainer

LiveNathan Aug 2, 2023 Author

LiveNathan Aug 2, 2023 Author

LiveNathan Aug 2, 2023 Author

LiveNathan Aug 3, 2023 Author

LiveNathan
Aug 2, 2023

Replies: 4 comments 1 reply

wimdeblauwe
Aug 2, 2023
Maintainer

LiveNathan Aug 2, 2023
Author

LiveNathan
Aug 2, 2023
Author

LiveNathan
Aug 2, 2023
Author

LiveNathan
Aug 3, 2023
Author