I'm having a hard time getting the "active" class to stay across different pages. I have the navbar loading on each page via a layout, could this be the issue?
I just have this inside my layout gsp for creating the navbar, and it works perfectly. I only have items in the navbar at the level of the controller, not for individual actions.
<li ${controllerName.equals('schedule') ? 'class="active"' : ''}>Schedule</li>
For the default controller generated by Grails, you can use
<li ${controllerName == null ? 'class="active"' : ''}>Home</li>
Yes, that is the issue.
Whenever you reload the page, whatever <li> element has class=active will be set to active again.
If you have /grails-app/views/layouts/main.gsp with the following:
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Home</li>
<li>Fred</li>
<li>Barney</li>
</ul>
</div>
</div>
And your GSPs for Fred and Barney use the main.gsp layout, when you click on them, you will load the code above and the link for "Home" will still be active.
Solutions are to write a Taglib for the Navbar control, or create separate layout pages.
Related
I have a View called Reports, under that I have 2 different Views called Races and Sire. I am calling these 2 Views as partial views inside Reports page.
When user type http://localhost:53987/Reports/Reports# in the address bar, it loads Races and Sire which are main views, as partials inside Reports. But What I want is that when user put http://localhost:53987/Races/Races# in the address bar, it should redirect this to http://localhost:53987/Reports/Reports#.
Can anyone please suggest me how to acheive this.
Reports View
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Race">Race</a></li>
<li><a data-toggle="tab" href="#sire">Sire</a></li>
</ul>
<div class="tab-content">
<div id="race" class="tab-pane fade">
#Html.Partial("~/Views/Racing/Race.cshtml", Model.clsRace)
</div>
<div id="sire" class="tab-pane fade">
#Html.Partial("~/Views/Sire/Sire.cshtml", Model.clsSire)
</div>
</div>
If all you are doing is rendering those partials using #Html.Partial(), then your controller methods are not necessary and you can just delete them (the user would get a 404: Not Found if they try to navigate to those urls).
If however, you were using #Html.Action() to render them (because you had to execute some code in the controller to generate the partial), then the methods should be marked with the [ChildActionOnly] attribute (which prevents the user navigating to them.
If you did want to allow a user to enter those url's in the address bar, but redirect to ../Reports/Reports, then you could create a specific route definitions for them, for example
routes.MapRoute(
name: "Races",
url: "Races/Races",
defaults: new { controller = "Report", action = "Report" }
);
and locate them before any other matching routes.
I want to change the button texts from Pager UI-Bootstrap in Angular.
I've this array:
categories = ["Standard", "Premium"];
But this code show the variable's name and with moustache doesn't work.
<uib-pager total-items="categories.length" items-per-page=1 ng-model="page" previous-text=categories[page-2] next-text=categories[page] ></uib-pager>
This works but I would prefer use uib-pager:
<ul class="pager">
<li class="previous" ng-class="{'disabled':!categories[pag-2]}" ng-click="pag=pag-1">{{categories[pag-2]}}</li>
<li class="next" ng-class="{'disabled':!categories[pag]}" ng-click="pag=pag+1">{{categories[pag]}}</li>
</ul>
I am using MVC 4 (Razor).
My HTML design contains a menu that (using some sort of javascript component),
I am looking for a smart way to mark the menu with what page am I currently on.
<li class="glyphicons home currentScroll active"><i></i><span>Dashboard</span></li>
<li class="glyphicons charts"> <i></i><span>Campaigns</span> </li>
<li class="glyphicons sort"> #Html.ActionLink("Home", "Index", "Home")</li>
<li class="glyphicons picture"> <li>#Html.ActionLink("Contact", "Contact", "Home")</li>
As you see the active li is marked, if I want to use this menu in the _layout.cshtml page, how can I change the Active mark according to the page I am currently loading?
Check this:
var controller = (string)ViewContext.RouteData.Values["controller"];
var action = (string)ViewContext.RouteData.Values["action"];
For each menu item check for equals menu controller and current controller (and action, may be)
I am currently developing a web app in Grails and I am looking for a way to hide a menu based on the current user logged into the solution.
To give you a bit of background this is what I have setup
A web app with a User Model and Roles model that are mapped
Login functionality that restricts certain controllers based on the users access.
I have menus that are display on each of the pages.
I know how to restrict a controller to only allow users with access to view it but I want to now restrict a menu like the one below from being seen unless the right user is logged in, how can I do this? Does it have something to do with rendering that element from the controller??
<div class="nav">
<ul class"nav">
<li>
<g:link class="Tester" controller="Testing" action="test">
<g:message code="Tester" args"[entityName]" />
</g:link>
</li>
<li>
<g:link class="Tester2" controller="Testing" action="test2">
<g:message code="Tester2" args"[entityName]" />
</g:link>
</li>
</ul>
</div>
The spring-security-core plugin provides a taglib that may help you here
<sec:ifAnyGranted roles="ROLE_TESTER">
<div class="nav">
...
</div>
</sec:ifAnyGranted>
Ian answered your question well but we should add here to secure the server side controller/actions as well such as:
// At the controller level
#Secured(["hasRole('User')"])
class Testing
// action specific
#Secured(["hasAnyRole('SuperUser', 'Support', 'InternalUser')"])
def test() {
...
}
Otherwise the links are just hidden from view but could still be executed by anyone.
HTH
If you are not using spring-security-core plugin following can be implemented
<g:if test="${userHaveRightRole}">
<div class="nav">
...
</div>
</g:if>
I am using tabs and want to load multiple index pages into tabs. For instance:
class AnimalsController < ApplicationController
def index
#dogs = Dog.all
#cats = Cat.all
end
end
Then in my views/animals/index.html.erb
<ul class="tabs">
<li>Dogs</li>
<li>Cats</li>
</ul>
<div id="#dogs">
<%= render #dogs %>
</div>
<div id="#cats">
<%= render #cats %>
</div>
Is refactoring out into a partial the only way to achieve this?
I'd like to have them loaded statically at once and not have to resort to doing an Ajax.load() when the tab is clicked.
You have your answer in the question itself. Why don't you just use javascript to hide the two partials and call them when their respective tab is clicked? You don't need ajax for this at all :)
Since you did not mention the javascript library that you use, I will give a generic solution using jquery:
Also you need not add a # to your respective div's ids. Change it to this:
<ul class="tabs">
<li id="dogs">Dogs</li>
<li id="cats">Cats</li>
</ul>
<div id="dogs" class="subTabs">
<%= render #dogs %><hr />
</div>
<div id="cats" class="subTabs">
<%= render #cats %><hr />
</div>
$(document).ready(function() {
$('.subTabs').hide(); //Hide the subTabs as soon as the DOM is loaded.
$('li').live('click', function(e) {
$('.subTabs').hide(); //Calling this again so as to remove an already loaded
tab, if any. You can refactor this part to make it
even simpler.
$('body').find('.subTabs').attr('id',$(this).attr('id')).show();
//This finds the ".subTabs" whose id is the same as the "li" id that
was clicked and shows it. Ofcourse, even this can be made even more
compact had i known your entire DOM structure.
});
});
Edit:
You also have to make sure that you style it using CSS to make it look more like tabs if you haven't already. :)
Hope this helps. :)
You typically only want to use a partial if you are using the same or almost the same code in more than one place.
When you say "index page", do you really want to use the same code that is used in an index of another controller? If so, then a partial is the best strategy.
Don't use JavaScript to solve a layout / code organization problem.