I am trying to make a basic template system for my Spring MVC project. I am struggling to have a dynamic navigation bar and dynamic content on the same page. When I do not have the #RequestMapping(value = "/generic/navbar"), I get the expected output of "loading navbar". However, all the Bootstrap CSS and JQuery is broken. Inspecting the resources in chromes shows that the Bootstrap and JQuery scripts have been replaced with the HTML code in navbar.jsp. If I keep the #RequestMapping(value = "/generic/navbar"), the page loads the javascript correctly, but the navbar is not loaded.
I suspect that I have messed up something pertaining to the Request, but I do not know how to fix it. Can anyone help me please?
This is my code that will load the navigation bar.
#Controller
#RequestMapping(value = "/generic/navbar") //causes problems
public class NavbarController {
#RequestMapping(method = {RequestMethod.GET})
public String renderNavbar(Map<String, Object> model) {
System.out.println("loading navbar");
System.out.println(model);
return "generic/navbar";
}
}
This is the associated navbar.jsp file:
<%# page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<div id="navbar" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index">IPIMS</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li> Home </li>
</ul>
</div>
</div>
this is a page where I try to use two jsp files:
<%# page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%#taglib prefix="t" tagdir="/WEB-INF/tags" %>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%# taglib prefix="input" uri="http://www.springframework.org/tags/form" %>
<t:userpage>
<jsp:attribute name="nav">
<jsp:include page="generic/navbar.jsp"/>
</jsp:attribute>
<jsp:attribute name="footer">
<jsp:include page="generic/footer.jsp"/>
</jsp:attribute>
<jsp:body>
HTML in here...
</jsp:body>
</t:userpage>
and this is my custom tag:
<%#tag description="Overall Page template" pageEncoding="UTF-8"%>
<%#attribute name="nav" fragment="true" %>
<%#attribute name="footer" fragment="true" %>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='/webjars/bootstrap/3.3.5/css/bootstrap.min.css'>
<script type="text/javascript" src="/webjars/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div id="nav">
<jsp:invoke fragment="nav"/>
</div>
<div id="body">
<jsp:doBody/>
</div>
<div id="pagefooter">
<jsp:invoke fragment="footer"/>
</div>
</body>
</html>
Related
This question already has answers here:
Calling a servlet from JSP file on page load
(4 answers)
Generate an HTML Response in a Java Servlet
(3 answers)
Closed 2 months ago.
I have this problem where I am trying to get items from an ArrayList from a servlet and display it to a JSP file but when I try to get the variables from the item in the ArrayList, they don't show up.
Here is my JSP file
<?xml version="1.0" encoding="UTF-8" ?>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%# page import="java.util.*"%>
<%# page import="com.product.Product"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script src="https://kit.fontawesome.com/256fd9e75f.js"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous" />
<link rel="stylesheet" href="styles.css" />
<title>Home</title>
<link rel="icon" href="src/ShopLogo.png" type="image/x-icon" />
</head>
<body>
<nav class="navbar fixed-top navbar-expand-md navbar-light"
style="background-color: #f15c55"> <span
class="navbar-brand mb-0 h1">Store</span>
<button type="button" data-toggle="collapse" data-target="#navbarNav"
class="navbar-toggler" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle Nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active"><a href="ProductLoaderServlet"
class="nav-link">Home</a></li>
<li class="nav-item active"><a href="product.html"
class="nav-link">Top Products</a></li>
<li class="nav-item active"><a href="cart.html" class="nav-link"><i
class="fa-regular fa-cart-shopping"></i></a></li>
</ul>
</div>
</nav>
<div class="image-overlay">
<img src="scr/main/resources/Shop.jpg" alt="" />
<h1 class="centered">Shop</h1>
</div>
<%
ArrayList<Product> products = (ArrayList) request.getAttribute("products");
for (Product product : products) {
%>
<div class="cards">
<div class="card" style="width: 18rem">
<img class="card-img-top" src="<%product.getImgUrl();%>" alt="Image" />
<div class="card-body">
<h5 class="card-title">
<%
product.getName();
%>
</h5>
Details
</div>
</div>
</div>
<%
}
%>
</body>
</html>
and this is what I see My View
I assume that I am able to get the items because I can see 5 cards
But I want to know why my variables such as (name, or the image) aren't showing up
Many Thanks for your help
I have one question about spring tag form and radiobuttons. I have a task something like testing. User logged in and can choose some test. On the test page i'm using spring tag form and radiobuttons for answering questions. For one question 4 answers. But on the test page when i'm trying to select one answer for question one is selected for all question. I mean i can select only one radio button. I know that in html for create group of radio buttons they should have same names. How i can create a group of radio buttons with spring tag form?
Here test_page.jsp
<%# page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="/resources/js/timer.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/resources/styles/style.css"/>
<title>Test page</title>
</head>
<body onload="startTimer()">
<div id="info">
<h3>
Subject: <c:out value="${test.subject}"/>
</h3>
<h3>
Number of questions:
<c:out value="${test.questionNumber}"/>
</h3>
<h3>
Difficulty:
<c:out value="${test.difficulty}"/>
</h3>
<div id="clock">
<p>
<label for="timer">Time for test</label>
<span id="timer" style="color: #4af; font-size: 150%; font-weight: bold;">
<c:out value="${test.timer}"/></span>
</p>
</div>
</div>
<div id="test">
<form:form action="result" commandName="result" method="post">
<form:input type="hidden" path="testSubject" value="${test.subject}"/>
<form:input type="hidden" path="difficulty" value="${test.difficulty}"/>
<c:forEach items="${test.questionAnswersMap}" var="entry">
<h4><c:out value="${entry.key}"/></h4>
<div class="form-check">
<ul style="list-style: none">
<form:radiobuttons path="answers" items="${entry.value.existingAnswers}" element="li" class="form-check-input"/>
</ul>
</div>
</c:forEach>
<button id="finish" type="submit" class="btn btn-primary btn-block">Finish</button>
</form:form>
</div>
</body>
</html>
I'm using spring 4.
If someone knows how to solve that i will be grateful.
So, I've been driving myself crazy over this, so I'm going for an extra set of eyes.
I'm going to paste two separate JSP files here. Both try to use a tabbed pane from Bootstrap. One of them works, and the other doesn't. What's driving me crazy is I can't figure out why. I literally can't find that one little difference that's breaking one and not the other. I don't like this, I don't like not knowing why something doesn't work.
So, the two files are login.jsp & login2.jsp. login2.jsp I wrote by hand, and it doesn't work. login.jsp I copied and pasted from an example, and just changed the values (eg, the names on the tabs). It works.
I'm sure there's probably some tiny typo in there that's the source of the issue, but I can't find it and it's driving me crazy. Anyway, any help would be appreciated.
login.jsp (the one that was copied/pasted, works perfectly)
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%# page session="false" %>
<%# include file="stub/jstl-stub.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><fmt:message key="welcome-page-title" /></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script type="text/javascript" src="./jsresources/bootstrap.js"> </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="./jsresources/bootstrap-tab.js"></script>
</head>
<body>
<div id="welcome_title">
<h1><fmt:message key="welcome-title"/></h1>
</div>
<h3><fmt:message key="welcome-login-header"/></h3>
<div class="container">
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Administrator</li>
<li>Student
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="admin">
<h3>Admin</h3>
</div>
<div class="tab-pane" id="student">
<h3>Student</h3>
</div>
</div>
</div>
</div>
</body>
</html>
login2.jsp (the one I wrote by hand, that's not working)
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%# page session="false" %>
<%# include file="stub/jstl-stub.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><fmt:message key="welcome-page-title" /></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script type="text/javascript" src="./jsresources/bootstrap.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="./jsresources/bootstrap-tab.js"></script>
</head>
<body>
<div id="welcome_title">
<h1><fmt:message key="welcome-title"/></h1>
</div>
<h3><fmt:message key="welcome-login-header"/></h3>
<div class="container">
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Administrator</li>
<li>Student</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="admin">
<h3>Admin</h3>
</div>
<div class="tab-pane" id="student">
<h3>Student</h3>
</div>
</div>
</div>
</div>
</body>
</html>
The only difference I found is at this line:
<li>Student</li>
The tag is not closed in the first file.
I am trying to print form validation next to each field. My jsp file looks like
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.error {
color: red; font-weight: bold;
}
</style>
<title>
FORM
</title>
</head>
<body>
<div id="wrap" >
<div class= "container" style="min-height:400px;">
<hr>
<form:errors path="applicant.applicant_email" cssClass="error"/>
<form:form method = "post" action = "${pageContext.request.contextPath}/addApplicant" modelAttribute = "applicant">
<form:errors path="applicant.applicant_email" cssClass="error"/>
<div class="form-group col-lg-4 col-md-4 col-sm-6">
<label>Email</label>
<input name = "applicant_email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group col-lg-4 col-md-4 col-sm-6 ">
<input type = "submit" />
</div>
</form:form>
</div>
</div>
<!-- div Wrap ka End -->
<hr>
<br>
<br>
</body>
</html>
"Applicant" is the name of my model class.
Now it prints fine outside the form, but prints nothing if form:errors is used inside form:form tag. What am I missing. Any help is highly appreciated. Thank you.
I figured put what the problem was. All had to do was add path attributes to the input fields. Like in my example:
<input name = "applicant_email" class="form-control" id="inputEmail" placeholder="Email" path = "applicant_email">
I want to make a webpage based on Spring MVC, Semantic-UI framework and Gradle build tool. The problem is that, the JSP pages can't access the Semantic files while I trying to import them from WebJars. When I'm using import from cdnjs it working really nice.
Ok, my code below:
#Configuration
#EnableWebMvc
#ComponentScan("com.web)
public class WebConfiguration extends WebMvcConfigurerAdapter {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}
}
index.jsp
<%# taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%# taglib prefix="c" uri="http://www.springframework.org/tags" %>
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<!--
<link rel='stylesheet' href='webjars/semantic-ui/2.0.7/semantic.min.css'>
<script src='webjars/semantic-ui/2.0.7/semantic.min.js'></script> -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.js'></script>
<title>Index Page</title>
</head>
<body>
<spring:message code="Index.WelcomeText"></spring:message>
<div class="ui animated button" tabindex="0">
<div class="visible content">Next</div>
<div class="hidden content">
<i class="right arrow icon"></i>
</div>
</div>
<div class="ui vertical animated button" tabindex="0">
<div class="hidden content">Shop</div>
<div class="visible content">
<i class="shop icon"></i>
</div>
</div>
<div class="ui animated fade button" tabindex="0">
<div class="visible content">Sign-up for a Pro account</div>
<div class="hidden content">
$12.99 a month
</div>
</div>
</body>
</html>
As expect you have to add contextpath in url to browser identify the resource
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/webjars/semantic-ui/2.0.7/semantic.min.css">
<script src="${pageContext.request.contextPath}/webjars/semantic-ui/2.0.7/semantic.min.js"></script>
<title>Index Page</title>
</head>
like this
May be you are not using relative path to do this. Try injecting them in index file. I had the same issue.