So I have this code snippet in spring mvc
<a class="nav-item is-hidden-mobile is-active roboto strong letter-space-1" href="">HOME</a>
<a class="nav-item is-hidden-mobile roboto strong letter-space-1" href="about.jsp"> ABOUT </a>
<a class="nav-item is-hidden-mobile roboto strong letter-space-1" href=""> CONTACT </a>
But when I click on the ABOUTon my landing page, it won't redirect, instead it displays error code 404. Are there other things to fix before I can redirect there, besides in the html file?
Try to create an endpoint in Controller that will return your about.jsp on some URL like that:
#Controller
public class HelloController {
#RequestMapping("/hello-about")
public String getHelloAbout(ModelMap model) {
return "/WEB-INF/jsp/about.jsp";
}
}
And change your link to point not to the about.jsp file but to the endpoint "/hello-about".
<a class="nav-item is-hidden-mobile roboto strong letter-space-1" href="/hello-about"> ABOUT </a>
Related
I have an application in vue in which I show different links in the header.
depending on the environment the root of the link varies, so I have saved an environment variable with the value of this root of the link.
I import it in the component to use the reference to this variable, but I can't find the way to include it in the href tag.
in my component's script I import the config file where the variable is declared and return
<script>
import Config from './../../config.js';
export default {
data: function () {
return {
hoverHome: false,
testUrl: Config.TEST_URL
}
},
the value brought by the environment variable at this time is https://www.test.sp, and in my template I try to use it but I don't find how to do it neither in case of being the only value nor combining it with a url termination
<li class="nav-item">
<a class="nav-link head" href=testUrl>Business</a>
</li>
<li class="nav-item">
<a class="nav-link head" href=testUrl/shops>Shops</a>
</li>
how can i use this variable inside the href tag?
You need to bind the href value using the v-bind:href or shortly :href for v-bind
So simply you can bind any variable that has some link to your href like
<a v-bind:href="'/anylink/' + testUrl">
You need to use v-bind: or its alias :. For example,
<li class="nav-item">
<a class="nav-link head" v-bind:href="testUrl">Business</a>
</li>
<li class="nav-item">
<a class="nav-link head" v-bind:href="testUrl + '/shops'">Shops</a>
</li>
or
<li class="nav-item">
<a class="nav-link head" :href="testUrl">Business</a>
</li>
<li class="nav-item">
<a class="nav-link head" :href="testUrl + '/shops'">Shops</a>
</li>
See How to pass a value from Vue data to href?
I have my navbar on my base.html, so I extend it on all other pages.
But I have a class "active" on the home page, so it also stays active in all other pages.
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="http://127.0.0.1:8000/backend/">
<i class="ni ni-shop text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://127.0.0.1:8000/backend/clientes">
<i class="ni ni-ungroup text-orange"></i>
<span class="nav-link-text">Clients</span>
</a>
</li>
</ul>
How can I change the active class to a different menu item based on the page I am?
There's no one-size-fits-all answer to your question, it really depends on your project's structure, url hierarchy etc. But usually, the best solutions are either a custom template tag taking the request as argument (and/or other context variables or plain constants, depending on your own project's logic) to compute the current "section" and render the navbar accordingly.
Send name as variable and value with active.
def index(request):
# your code
context = {
'dashboard': 'active',
}
return render(request, 'index.html', context)
def clients(request):
# your code
context = {
'clients': 'active',
}
return render(request, 'clients.html', context)
Use variable like this:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link {{ dashboard }}" href="http://127.0.0.1:8000/backend/">
<i class="ni ni-shop text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link {{ clients }}" href="http://127.0.0.1:8000/backend/clientes">
<i class="ni ni-ungroup text-orange"></i>
<span class="nav-link-text">Clients</span>
</a>
</li>
</ul>
OPTION 1
You can use django contex_processors.
add your settings.py
TEMPLATES = [
{
#other settings
'BACKEND': 'django.template.backends.django.DjangoTemplates',
#other settings
'OPTIONS': {
'context_processors': [
#other options
'context_file_path.defaults',
],
},
},
]
in your context_file.py
def defaults(request):
active_bar = "" # your active bar logic
return {
'active_bar': active_bar,
}
with this method, each request decide which bar active. And active_bar variable is being passed to your template. In your template you can add active class if active_bar variable equals your bar name. Like that:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link {% if active_bar == 'dashboard' %}active{% endif %}" href="http://127.0.0.1:8000/backend/">
<i class="ni ni-shop text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item {% if active_bar == 'clients' %}active{% endif %}">
<a class="nav-link" href="http://127.0.0.1:8000/backend/clientes">
<i class="ni ni-ungroup text-orange"></i>
<span class="nav-link-text">Clients</span>
</a>
</li>
</ul>
OPTION 2
You can write a custom js file and add your base html. In this js file you can detect url and decide active pane. After that you can add active class to list pane.
I was trying to use a href to turn over the html pages.I searched the necessary codes to use,however I am getting the strange link when I click the button.
http://localhost:8080/#%7Bindex%7D
this link has been displayed when I wanted to open index page.However,it is working when I write the link manually like this : http://localhost:8080/index
Here is what I actually tried
HomeController.java
package io.javabrains;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
#Controller
public class HomeController {
#GetMapping("/index")
public String index() {
return "index";
}
#GetMapping("/tables")
public String tables() {
return "tables";
}
}
index.html
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item">
<a class="nav-link" href="#{index}">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Interface
</div>
Well, you missed the "th:". Use the below code
<a class="nav-link" th:href="#{index}">
I need to call this method in vue.js file:
par() {
this.jsontocsv++
}
but i'm triying to call whith a but i dont know how i can
<li> <a v-on:click="par" href="#"> Example 1</a></li>
Invoke the method using ():
<li> <a v-on:click="par()" href="#"> Example 1</a></li>
I am building a site using Angular 6 and have been stuck for a few days now on a problem. I am trying to change text color (list items) on a navbar based on the active page. I have seen examples on how to do this using AngularJS and javascript. I have come across the routerActiveLink library documentation at https://angular.io/api/router/RouterLinkActive library for Angular 5+ which seems to be a simple solution, but it is not working for me. I have tried many different examples I have seen online and none have worked. Am I missing something? Here are some code snippets:
header.component.html
<div class="navbar-collapse collapse navbar-nav pull-right" id="navbar">
<ul class="navbar-nav" style="align-items: center;">
<li class="main-links" [routerLinkActive]="['active']">
<a class="al" [routerLink]="['home']" id="home-button" href="home">Home</a>
</li>
<li class="main-links">
<a class="al" routerLink="/about" routerLinkActive="active" id="about-button" href="about">About</a>
</li>
<li class="main-links">
<a class="al" id="blog-button" href="https://tspace.web.att.com/blogs/financelive/?lang=en_us" target="_blank">Blog</a>
</li>
<li class="main-links">
<a class="al" routerLink="/albums" routerLinkActive="active" id="albums-button" href="albums">Platinum Albums</a>
</li>
<li class="main-links">
<a class="al" routerLink="/programs" routerLinkActive="active" id="programs-button" href="programs">Development Programs</a>
</li>
<li class="main-links">
<a class="al" routerLink="/contact" routerLinkActive="active" id="contact-button" href="contact">Contact Us</a>
</li>
</ul>
This is my declaration for active in header.component.less:
.active {
color: #009fdb;
font-family: font-bold;
}
When I use [routerLinkActive] with the brackets, the page does not load at all, and when I user routerLink and routerLinkActive in the a tag, it does not register at all. Are there some imports I am missing. I have tried importing router, routerlinkactive, and routerlink from #angular/core.
I purposely left both different styles of using routerLinkActive in the code example. It was not like this when I actually ran it.
I have Angular 6, bootstrap 4.1.1, jquery 3, and popperjs installed.
After further review, I have discovered that routerLinkActive works correctly on elements inside the root app-module. I created a new module for my header and footer called UiModule and the functionality is not working inside the header. Any ideas on how to get routerLinkActive to work on this module?
Try importing RouterModule into your UiModule, it won't be able to make use of that imported in your app.module.ts file
import { RouterModule } from '#angular/router';
// some other imports here
#NgModule({
imports: [
RouterModule
],
exports: [
// export UI components
],
declarations: [
// declare UI components
]
})
When I had this issue, I imported everything right. It took me days before I figured the problem was from how I structured my HTML
<li class="nav-list">
<a routerLinkActive="active"
[routerLinkActiveOptions]="{exact: true}"
routerLink="/"
href="/">
<i class="material-icons nav-link-icon">person</i>
<span class="nav-link-text">Profile</span>
</a>
</li>
The problem there was that I was watching for the .active class to appear in the li element while it had always been appearing in the anchor element. Just be sure that is not what is happening in your case.