Attaching a specific fragment to a springboot thymeleaf project

Question

I have a navbar with a list. One of the elements in the list is a dropdown, which consists of one entry. On click of this entry, I would like to see a fragment of another html page in the project.

I have a navbar html file:

<div th:fragment="navbar">
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#navbarTogglerDemo03"
                aria-controls="navbarTogglerDemo03" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> 
                    <li class="nav-item dropdown">
                        <a
                            class="nav-link dropdown-toggle" href="#"
                            id="navbarDropdownMenuLink"
                            role="button"
                            data-bs-toggle="dropdown">
                            Projects 
                         </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <li><a class="dropdown-item" 
                                href="projects/sample.html#content"> ProjectList</a> <!--error-->
                          </li>
                        </ul>
                </ul>
            </div>

        </nav>
    </div>

And the project structure: I have a folder named projects inside src/main/resources, and within the projects folder, I have an html file sample.html and it has a fragment content

<div th:fragment="content">
        
</div>

---- UPDATE---

adding an image:

So currently, I want a fragment to be shown only when I click on the element in the dropdown "ProjectList". So I am thinking the link should happen in the href tag? But not able to understand how. any guidance here would be helpful

Asoub · Answer 1 · 2022-04-11T09:11:46.670

0

If projects/sample.html is your template forlder, then try:

<div th:insert"~{projects/sample :: content}"></div>

If you want to change loaded template in real time (on click) you can:

Use dynamic loading: This question is close to yours: when click on list item hide other items
Load the div, hide it by CSS and display it with javascript: How to show and hide a simple <ol> list with onclick? (and to use JS with thymeleaf Javascript function call with Thymeleaf )
Lastly, if you ould like to load the full content depending on the current URL, I think you're taking the problem on the wrong end. Every page should include the header/menu/footer (by referencing them as insert), and use th:href to load content depending on the url (see Thymeleaf using path variables to th:href)

edited Apr 11 '22 at 09:11

answered Apr 08 '22 at 12:09

Asoub

2,273
1
20
33

But that creates a separate
fragment. I want it to be shown on the click of the drop down (ProjectList).. so the href needs to be modified right?
– RCB Apr 08 '22 at 12:18
@RPK Where (in the navbar) do you want to see the content fragment ? Also, what's in the "content" div ? – Asoub Apr 08 '22 at 12:59
please check the update – RCB Apr 08 '22 at 13:06
When I click, I should open a new fragment containing tabular info, which is provided by the "content" fragment – RCB Apr 08 '22 at 13:08
@RPK I've update the answer – Asoub Apr 11 '22 at 11:55

Attaching a specific fragment to a springboot thymeleaf project

1 Answers1