CODEWITHSUNDEEP
htmlspring-bootthymeleafspring-thymeleaf
old_dd
old_dd

Reputation: 175

Why are my Thymeleaf Path variables breaking my HTML?

I have two similar controller methods that I'm using to test the @PathVariable annotation with:

@RequestMapping(
            value = "/1",
            method = {RequestMethod.GET})
    public String two(Model model)
    {
        model.addAttribute("category", "acategory");
        model.addAttribute("subCategory", "placeholder");
        return "homePage";
    }

    @RequestMapping(
            path = "/{category}/{subcategory}",
            method = {RequestMethod.GET})
    public String three(
            @PathVariable("category") String category,
            @PathVariable("subcategory") String subcategory,
            Model model)
    {
        model.addAttribute("category", "acategory");
        model.addAttribute("subCategory", "placeholder");
        return "homePage";
    }

I would expect the exact same behavior from those two methods since I am not using the path variables passed in, and instead just hardcoding "acategory" and "placeholder". However when I navigate to localhost:8080/1 I see the content I expect but navigating to localhost:8080/asdf/asdf breaks my HTML.

expected behavior of both methods

actual behavior of localhost:8080/asdf/asdf

Here is the HTML in question:

</head>

<body>
<div class="wrapper">  <!-- Entire page wrapper? -->

    <!-- Thymeleaf fragment: commonHeader -->

    <div th:replace="fragments/commonFragments :: commonHeader"></div>

    <!-- Begin Page Content-->

    <div th:insert="'fragments/' + ${category} :: ${subCategory}"></div>

    <!-- End Page Content -->


</div> <!-- Entire page wrapper closing tag? -->

And the fragment:

<div th:fragment="placeholder">
    <div class="container">
        <div class="row tagline">
            <div class="col-sm-12">
                <p><strong>Please see <a href="page2.html">page two</a> for all related links. </strong>
                    <!--There's also a <a href="index_3col.html">3-column version</a> of this page.--> Link to a
                    secondary page open accordion <a data-expand="#SecurityPanel" href="page2.html#collapse1">1</a>, <a
                            data-expand="#SecurityPanel" href="page2.html#collapse2">2</a>, or <a
                            data-expand="#SecurityPanel" href="page2.html#collapse3">3</a>.. Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit. Vivamus hendrerit consectetur justo, vitae euismod nisl pulvinar id. In
                    hac habitasse platea dictumst. Nam quis ante at mi auctor vehicula. <a href="page2.html">Learn
                        more</a>. </p>
            </div>
        </div>
... more stuff cut for brevity
</div>
</div>

Upvotes: 0

Views: 92

Answers (1)

Wim Deblauwe
Wim Deblauwe

Reputation: 26858

You probably have relative links to your CSS file, which break when you start using nested URLs. Change them to absolute links to fix it.

Upvotes: 1

Related Questions