I wanted to display navigation element as active (class nav-item active) when that element is clicked and the other elements with the non active class (nav-item). I am also using Thymeleaf layouts.
In the controller i have following code
#GetMapping("/login")
public String getLoginPage(Model model) {
model.addAttribute("activeLink", "Login");
return "login";
}
In the layout.html file (this file contains common header and footer for all pages), i have following code
<nav th:replace="navigation.html :: navibar(activeLink=${activeLink})"></nav>
In the navigation.html (this file only has navigation related code), i have code similar to
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" th:fragment="navibar(activeLink)">
<a class="navbar-brand" href="/title">Title</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li th:class="${#strings.equals(activeLink, 'Home')} ? 'nav-item active' : 'nav-item'"><a class="nav-link" href="/">Home<span class="sr-only">(current)</span></a></li>
<li th:class="${#strings.equals(activeLink, 'Register')} ? 'nav-item active' : 'nav-item'"><a class="nav-link" href="/register">Register</a></li>
<li th:class="${#strings.equals(activeLink, 'Login')} ? 'nav-item active' : 'nav-item'" sec:authorize="isAnonymous()"><a class="nav-link" th:href="#{/login}">Login <span class="sr-only">(current)</span></a></li>
<li class="nav-item active" sec:authorize="isAuthenticated()"><a class="nav-link" th:href="#{/logout}">Logout <span class="sr-only">(current)</span></a></li>
</ul>
</div>
In the template returned by the controller (login), I do not have any navigation links specific code.
The above code is working, but is there a better simpler way to active navigation items?
Also, if I use flash attributes
redirectAttributes.addFlashAttribute("activeLink", "Register");
in the controller, then the functionality doesn't work
To avoid adding the activeLink to the model you can pass the activeLink when you include the fragment.
Like:
<div th:replace="nagivation :: navibar('Login')"></div>
Btw. you can remove the .html after the layout name.
Related
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
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
I've made a site with laravel and have a page where there are pictures that can be seen in hi-resolution via fancybox or downloaded. In the database i have counters for each action. and I do already have GET routes set up for the counting since they are used in other situations too.
for example: www.mysiste.com/somecode/someothercode/image/viewed
the simplified structure of each image is this.. This is called inside a for each loop.. i removed all styling and classes for better reading...
<div >
<div class="card" style="background-color: lightgray">
<div >
<a data-fancybox="gallery" href="/images/......../{{$photo->filename}}">
<img class="card-img" src="/images/......../thumb/thumb_{{$photo->filename}}">
</a>
</div>
<div class="card-footer">
<div>
<div>
<a download="{{$photo->filename}}" href="/images/......../{{$photo->filename}}">
<span>Download (Hi-Res)</span>
</a>
</div>
<div>
<a download="social_{{$photo->filename}}" href="/images/......../social_{{$photo->filename}}">
<span>Download (Social-Res)</span>
</a>
</div>
</div>
</div>
</div>
</div>
I would need that when they hit the download button it calls a certain URL in the background for upcounting.. (most important)
If possible I would like to hit another URL when the images are viewed fullscreen through fancybox.
how can this be done?
You can do something in the lines of:
<a data-fancybox="gallery" href="{{ route('photo.fancybox', ['photo' => $photo])}}">
<img class="card-img" src="/images/......../thumb/thumb_{{$photo->filename}}">
</a>
...
<a href="{{ route('photo.download', ['photo' => $photo])}}">
<span>Download (Hi-Res)</span>
</a>
PhotoController
public function download(Photo $photo){
$photo->downloadCount->increment();
return redirect('/images/......../'. $photo->filename);
}
public function fancybox(Photo $photo){
$photo->fancyboxCount->increment();
return redirect('/images/......../social_'. $photo->filename);
}
And make sure to register your new routes accordingly:
Route::get('photo/download', 'PhotoController#download')->name('photo.download');
Route::get('photo/fancybox', 'PhotoController#fancybox')->name('photo.fancybox');
<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>
I found a weird problem in my project. I'm using Spring MVC, Tiles, JSPX and Boostrap.
I have a navbar in my header page, then I added a span to show a badge like https://getbootstrap.com/docs/3.3/components/#badges.
Till here nothing strange. But If I add an id on span tag and there is an error inside the html code, I can't see any log or exception.
Here the code
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-male"><jsp:text/></span>
<span class="badge badgeNavbar" id="badgesContrattiDaApprovare">
<jsp:text/>
</span> ${clienti}
<span class="caret"><jsp:text/></span>
</a>
<ul class="dropdown-menu">
...
</ul>
Instead If I remove id="badgesContrattiDaApprovare" I can see the exceptions.
Are there any conflicts between span and id?
SO: Why if I add the id attribute to the span inside bootstrap navbar the JSP/Tiles exceptions aren't shown inside the rendered view?
For example here if an exception occurs without the id attribute:
Instead, if I add the id attribute is like the rendering is stopped, and I see only a blank page. The generated/rendered html code is incomplete.