I a using Spring security with an HTML page using thymeleaf. I have a problem to use the "sec:authorize" property in this case:
<ul class="nav nav-tabs margin15-bottom">
<li th:each="criteriaGroup,iterGroups : ${aGroupList}"
th:class="${iterGroups.index == 0}? 'active'">
<a th:href="'#' + ${criteriaGroup.id}" data-toggle="tab"
th:text="${criteriaGroup.groupName}"></a>
</li>
</ul>
Now I want to add a spring security property like: if I have this particular criteria, I need a authorization (sec:authorize="hasRole('Criteria')") although I will not see the tab corresponding to this criteria:
<ul class="nav nav-tabs margin15-bottom">
<li th:each="aGroup,iterGroups : ${aGroupList}" th:class="${iterGroups.index == 0}? 'active'"
th:sec:authorize="$({criteriaGroup.id =='criteriaA'} || ${criteriaGroup.id =='criteriaB'}) ? 'hasRole('Criteria')'">
<a th:href="'#' + ${criteriaGroup.id}" data-toggle="tab"
th:text="${criteriaGroup.groupName}"></a>
</li>
</ul>
But when I am doing this I have the following error:
org.thymeleaf.exceptions.TemplateProcessingException: Error processing template: dialect prefix "th" is set as non-lenient but attribute "th:sec:authorize" has not been removed during process
How can I avoid it?
Remove th: in front of sec:authorize
The Spring Security 3 integration module is a Thymeleaf dialect. More information can be found here.
Perhaps you'd want to use the #authentication object instead of the sec dialect.
From the docs:
<div th:text="${#authentication.name}">
The value of the "name" property of the authentication object should appear here.
</div>
Related
I'm currently running into a problem where I am trying to make a li tag have specific classes based on a Ruby variable by using a ternary operator:
<li class=<%= loc == #ruby_var ? "nav-item active" : "nav-item" %>>
...
</li>
I expect the results to be an li element with both the nav-item and active classes if #ruby_var is true:
<li class="nav-item active">
...
</li>
However, for some reason, I am getting unexpected results where it only sets the class to the first part of the string that is in the ternary operator, and leaves the second part outside of the class tag:
<li class="nav-item" active>
...
</li>
I have tried using more than one space in my "nav-item active" string but any white space seems to make the class only accept the first elem in the string.
What is the proper way to use the ternary operator to set an HTML tag's classes?
You can write it like this
<li class="<%= loc == #ruby_var ? "nav-item active" : "nav-item" %>">
# ...
</li>
Note the " outside of the erb expression.
Or you can use tag helper like this
<%= tag.li, class: ["nav-item", (:active if loc == #ruby_var)] do %>
# ...
<% end %>
I like the second option better because I prefer not to mix HTML and ERB when describing a tag.
I'm working with Bootsrtap 4 and I'm trying to add the class active to my nav-item elements whenever their nav-link href attribute is the same as the current url.
On the html side, I uesd a basic url generator as shown below:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{ url('/brands') }}" role="button">Brands</a>
</li>
<!-- ... -->
</ul>
And then I used a jQuery method to compare them with the current url:
$('.navbar-nav .nav-item .nav-link').each( () => {
// If the current path and the link url are the same...
if ($(this).attr('href').indexOf(location.pathname) !== 1) {
// ...then add the class 'active' to 'nav-item', its parent
$(this).parent().addClass('active')
}
})
However, I noticed that $(this).attr('href') was undefined, probably because it's a generated url, and therefore nav-item doesn't get the active class.
EDIT: as an example, for now it's a very basic url, without parameter, which looks like this:
http://domain.example/brands
Does anyone know how to solve this problem? Thanks in advance.
I'd recommend you to go another way. Instead of "activating" the link with jQuery, you could easily do it server-side with Laravel:
<ul class="navbar-nav">
<li class="nav-item">
<a class="{{ Request::is('brands*') ? 'nav-link active' : 'nav-link' }}"
href="{{ url('/brands') }}"
role="button">Brands</a>
</li>
<!-- ... -->
</ul>
Explanation:
Laravel uses the template-engine twig for rendering the HTML server-side. Instead of manipulation the DOM client-side, you can easily add an conditional to check for the current request parameters. Laravel gives you nativeliy the possibility to check the request path even with a wildcard.
Your problem is most likely caused by the difference between using () => {} or function () {}
When you use the arrow syntax the prop this is unbound. Meaning that also $(this) will return an empty jQuery object instead of returning the anchor. Any follow up jQuery chaining will return something empty/undefined.
So, changing .each( () => { to .each(function() { will at least fix your undefined problem.
Information about the arrow syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Okay this is what i do generally do in all my laravel projects when it comes to make sidebar or any link "active" on click :-
<li class="nav-item {{ in_array(Route::currentRouteName(),[
'admin.dashboard',
'admin.updates',
])? 'active show' : ''}}">
<i class="typcn typcn-clipboard"></i>Dashboard
<nav class="nav-sub">
Home
</nav>
</li>
Now notice this {{ BladeHelper::sideBar_link_isActive('admin.dashboard') }}
I created dynamic helper function to get the current url and return "active" class
Path : app\Helpers\BladePageHelper
<?php
namespace App\Helpers;
use Route;
class BladePageHelper
{
public static function sideBar_link_isActive($selectedLink){
$currentRouteName = Route::currentRouteName();
if($selectedLink === $currentRouteName){
return 'active';
}else{
return '';
}
}
}
I'm using route name here like
Route::("/","MyController#mymethod")->name("myname")
You can do this with url too.
I hope this helps.
Happy Coding
I have an Angular5 application with a bootstrap tab control. I set the href of a tab to # if the property modelChanged is true, otherwise I set it to #tab1 (or #tab2):
<ul class="nav nav-tabs">
<li class="active">
<a (click)="changeTab()" [attr.href]="modelChanged ? '#':'#tab1'" data-toggle="tab">Tab 1</a>
</li>
<li>
<a (click)="changeTab()" [attr.href]="modelChanged ? '#':'#tab2'" data-toggle="tab">Tab 2</a>
</li>
</ul>
So basically I am able to change the tab if modelChanged is set to false, othwerise not.
Now I wan't to use a function called changeTab() where I change the modelChanged property to false and would expect that the tab change from 1 to 2 but it doesn't until I click the tab again:
changeTab() {
modelChanged = false;
}
Anyone knows a solution for that?
Sorry that I don't have a working plunker but I think some of you will be able to answer my question anyway.
2 ways to do the same
1) in your click specify modelChanged = !modelChanged,
[click]="modelChanged = !modelChanged"
2) [click]="modelChanged = changeTab()"
and in your controller specify the changeTab function like this
function changeTab(){
//do something
return false;
}
how to select croissant (the one with class 'selected' ) to $scope.selected variable in angular ?
<ul id='ulsel' placement="top-left" style="max-height: 154px;">
<li value="Apple fritter" class="" tabindex="-1">Apple fritter</li>
<li value="Croissant" tabindex="-1" class="selected">Croissant</li>
<li value="Donut" tabindex="-1" class="">Donut</li>
<li value="Financier" tabindex="-1" class="">Financier</li>
<li value="Jello" tabindex="-1">Jello</li><li value="Madeleine" tabindex="-1">Madeleine</li>
<li value="Pound cake" tabindex="-1">Pound cake</li>
<li value="Pretzel" tabindex="-1">Pretzel</li>
<li value="Sfogliatelle" tabindex="-1">Sfogliatelle</li></ul>
Your markup is very strange, li's having values attributes and using a class as selected rather then a input is an unusually approach. Regardless you can use the below:
$scope.selected = $('#ulsel li.selected').html();
This just gets the text inside the li with the selected class.
I have used the text inside the element rather then the value attribute you have put on, as I'm not sure how supported that's going to be
Agreed with atmd. I'd instead have Angular build the li's with ng-repeat, then you have much more control instead of relying on jQuery to parse.
Here's another way to get the value with jQuery:
$scope.selected = $("#ulsel").find('.selected').attr('value');
Works in Chrome, didn't test further.
How to set a class attribute if some condition is true in a tag in JSP?
In my JSP page I have some tabs. In the first tab I have a form field and after submission, it will call servlet, process it and then it will forward to the same JSP page and will set a session attribute value (say the id of next Tab) And in my JSP page in the LI tag I am setting the class attribute to active if the string got from session attribute is some value.
But I am not able to get it.
Here is part of servlet code
String dataloadType=request.getParameter("dataloadType");
if(dataloadType.equals("fromDB"))
{
request.setAttribute("activeTab", "fromDatabase");
RequestDispatcher rd=request.getRequestDispatcher("index.jsp");
rd.forward(request, response);
}
Part of index.jsp is
<div class="navbar btn-navbar">
<div id="tabs" class="tabbable">
<ul id="myTab" class="nav nav-tabs">
<li><a href="#datacollector" target="main"
data-toggle="tab">Data Collector</a></li>
<li id="fromDB" class="selectDataloadType <c:if test="${activeTab == 'fromDatabase'}">active</c:if>" style="display: none;"><a
href="#fromDatabase" target="main" data-toggle="tab">Data Load
Database</a></li>
<li id="fromFile" class="selectDataloadType" style="display: none;"><a
href="#fromFiles" target="main" data-toggle="tab">Data Load
File</a></li>
<li id="email" class="selectDataloadType" style="display: none;"><a
href="#fromEmail" target="main" data-toggle="tab">Data Load
Email</a></li>
<li id="webServices" class="selectDataloadType"
style="display: none;"><a href="#fromWebServices"
target="main" data-toggle="tab">Data Load Web</a></li>
<li><a href="#datamap" target="main" data-toggle="tab">Data
Map</a></li>
<li>Schedule</li>
</ul>
LI with id fromDB is setting the class attribute to active if the session attribute is 'fromDatabase' But its not working as it is not taking that part as code.
Here is the index.jsp
It is showing the code in page, so its not taking it. How can I solve it?
I think you're not setting the class attribute correctly... The class attribute of the LI tag is selectDataloadType [space] active, so eventually it is just selectDataloadType I think...
Why not something like:
<li id="fromDB" <c:if test="${activeTab == 'fromDatabase'}">class="active"</c:if>...
You can use choose instead of if if you need to have a class attruibute in any case...