How do I use an inner tag in thymeleaf? - spring

I have a ul tag in thymeleaf and I have a li tag in it,and what I want is if one of the elements (which is amount here) is not null, show it, and what I want to show is something like the code below, which of course is wrong. How can I do this?
<li th:text="${ <th:if="ingredient.amount!=null> ingredient.amount"+
" "+ ingredient.uom.description"
</li>

If you alsways want to show a li (amount==null or amount!=null) then use a th:block with 2 li elements with a th:if-attribute where you check if the amount is null or not.
so lets say you have in your controller
model.addAttribute("ingredients",
List.of(
new Ingredient("3EL","Pepper"),
new Ingredient("500gr","Cheese"),
new Ingredient(null,"Salt")
)
);
then in your page
<th:block th:each="ingredient:${ingredients}">
<li th:if="${ingredient.amount != null}"
th:text="${ingredient.amount + ' of ' + ingredient.description}"></li>
<li th:if="${ingredient.amount == null}"
th:text="${'no need tu use ' + ingredient.description}"></li>
</th:block>
will generate
<ul>
<li>3EL of Pepper</li>
<li>500gr of Cheese</li>
<li>no need tu use Salt</li>
</ul>
if you only want to display the li where the amount is not null then you don't need the th:block
<ul>
<li th:each="ingredient:${ingredients}"
th:if="${ingredient.amount != null}"
th:text="${ingredient.amount + ' of ' + ingredient.description}" ></li>
</ul>

The way thymeleaf conditions work if an IF condition is false, tag and all tags inside of it will not be displayed.
so this must be what you were looking for:
<li th:if="${ingredient.amount != null}">
<ul th:text="${your.text}"></ul>
</li>

Related

After parsing a valid expression, there is still more data in the expression pageCount

I'm making an E-commerce website and in the products section (inside admin), I was trying to display only 10 products per page. I'm new to Spring and while writing the code, I encountered an error (given in title) when trying to add the next page button. However, the code works fine with the Previous button and all the page numbers. Here's my code for the pagnation section:
<nav class="mt-3" th:if="${count > perPage}">
<ul class="pagination">
<li class="page-item" th:if="${page > 0}">
<a th:href="#{${#httpServletRequest.requestURI}} + '?page=__${page-1}__'" class="page-link">Previous</a>
</li>
<li class="page-item" th:each="number: ${#numbers.sequence(0, pageCount-1)}" th:classappend="${page==number} ? 'active' : ''">
<a th:href="#{${#httpServletRequest.requestURI}} + '?page=__${number}__'" class="page-link" th:text="${number+1}"></a>
</li>
<li class="page-item" th:if="${page pageCount-1}">
<a th:href="#{${#httpServletRequest.requestURI}} + '?page=__${page+1}__'" class="page-link">Next</a>
</li>
</ul>
</nav>
The first 2 li's work fine and I get the list of pages and also the previous button. But on adding the Next button, I get the error mentioned above.
First of all, please always provide the actual error message. Otherwise we are just guessing.
My guess is that th:if expects a boolean expression and what you have doesn't look like boolean to me: th:if="${page pageCount-1}"
Change that to something like page == pageCount-1, but again depends on what you want to display there

spring boot thymleaf i am trying to use conditional if in tymeleaf and tie it to a controller class to return true or false no pojo needed

i have a nav bar that i am using as a template.. see pic
if i am on any of the tabs then i want home to show. But if i am on the home page i don't want Home tab to show its redundant. i cant seem to figure out how to write the thymleaf code..
i have something like this the first line is what i am interested in fixing... can you please help with the controller part also i am sure i can do a model.addAttribute line in each method call and set the isActive to true except the home method i can set the isActive to false ... thank you
li th:text="${isActive} ? 'Home : "
<li th:text="${isActive} ? '<a th:href="#{/}">Home</a> : " </li>
<li><a th:href="#{/about}">About</a></li>
<li class="auctions">Auctions <i class="fas fa-caret-down"></i>
<ul>
<li>Current Auctions</li>
<li>Register</li>
</ul>
</li>
<li><a th:href="#{/contact}">Contact</a></li>
<li><a th:href="#{/locations}">Locations</a></li>
you can use this in controller:
model.addAttribute("isActive",true);
and use this in html code:
<li th:if="${isActive == null || !isActive}"><a th:href="#{/}">Home</a></li>
read more about Conditionals in Thymeleaf and simple conditionals if and unless

How to style one of the li that generate with repeat.for in aurelia?

<ul>
<li repeat.for="row of router.navigation" > ${row.title}
</li>
</ul>
infact i want to style one of the router button that generate with repeat.for method
want to make left border radius for navigation bar like the right of the navigation bar
As a one-liner option, you could bind your class attribute with ...
<li repeat.for="row of router.navigation" class="${myBool ? 'a-class' : 'another-class'}">${row.title}</li>
You can bind class with string interpolation or with .bind syntax. See https://aurelia.io/docs/binding/class-and-style#class
UPDATE: Sorry...should have read your other comment further down. If it's just for the first , why not just use CSS?
#myUl>li:first-child{
   // my CSS here
}​
You can identify the first repeated element with the $index context variable.
This would lead to something like this:
<ul>
<li repeat.for="row of router.navigation" >
<a if.bind="$index === 0" class="blah"> ${row.title} </a>
<a else class="another class"> ${row.title} </a>
</li>
</ul>
If you need to do the styling on the <li> tag, the solution could be like this:
<ul>
<template repeat.for="row of router.navigation" >
<li if.bind="$index === 0" class="blah"> ${row.title} </li>
<li else class="another class"> ${row.title} </li>
</template>
</ul>

Generating correct url for page link

I have implemented pagation in my Spring boot application. There are no problems in the logic of it, however I am running into a weird issue with Thymeleaf.
Right now if I go to the following url
http://localhost:8080/Phoenix-listings
and if I hover my mouse over the link to page 2 is
http://localhost:8080/2
which is the wrong link, but if I manually go to the following url
http://localhost:8080/Phoenix-listings/1
then if I hover my mouse over page 2, then the link is
http://localhost:8080/Phoenix-listings/2
which is how it should be.
How can I make the correct link get generated even if I am in http://localhost:8080/Phoenix-listings?
Below is the section related to my pagation in Thymeleaf
<div class="row">
<div th:if="${ads.totalPages != 1}"
class="form-group col-md-11 pagination-centered">
<ul class="pagination">
<li th:class="${ads.number == 0} ? disabled"><a
class="pageLink" th:href="1">«</a></li>
<li th:class="${ads.number == 0} ? disabled"><a
class="pageLink" th:href="${ads.number}">←</a></li>
<li
th:class="${ads.number == (page - 1)} ? 'active pointer-disabled'"
th:each="page : ${#numbers.sequence(pager.startPage, pager.endPage)}">
<a class="pageLink" th:href="${page}" th:text="${page}"></a>
</li>
<li th:class="${ads.number + 1 == ads.totalPages} ? disabled">
<a class="pageLink" th:href="${ads.number + 2}">→</a>
</li>
<li th:class="${ads.number + 1 == ads.totalPages} ? disabled">
<a class="pageLink" th:href="${ads.totalPages}">»</a>
</li>
</ul>
</div>
</div>
In this case, you should be using thymeleaf's built in url syntax. It would look like this:
th:href="#{/{page}(page=${page})}"
Creating a link with #{/} means that thymeleaf automatically adds the context (Phoenix-listings in your case.) {page} is a placeholder. (page=${page}) replaces the placeholder with the variable.
You can also use string concatenation, but I wouldn't recommend it in most cases (because using the standard syntax means thymeleaf can correctly encode urls).
th:href="#{${'/' + page}}"

Laravel Blade Changing Active Class Bootstrap

How will I change the active class in twitter bootstrap when i visit another page with Laravel Blade Templating ?
here is an example this might can help
You could define a variable in your blade template
<?php $nav_profile = 'active'; ?>
#extends ('layouts.app')
#section ('content')
..
..
#endsection
And then in the layouts file;
<ul class="nav nav-tabs">
<li role="presentation" class="{{ $nav_home or '' }}">Home</li>
<li role="presentation" class="{{ $nav_profile or '' }}">Profile</li>
<li role="presentation" class="{{ $nav_messages or '' }}">Messages</li>
</ul>
So, if the page includes a variable called nav_profile then insert 'active' into the class. The 'or 'part inserts an empty string if the variable is not present.
I have found a simple solution for this problem. This solution has very simple trick.
And it will work for all links throughout the page.
<script>
function addActiveClass(){
var objs = document.getElementsByTagName('a'); // take all 'a' tags
for(var i = 0; i < objs.length; i++){
if(objs[i].href == window.location.href){ // check if the user is on this link
objs[i].className = objs[i].className + " active"; // add additional 'active' class
}
}
}
addActiveClass();
</script>
Adding this code to the end of your page will do the magic.

Resources