I'm going to create a website using Spring.
So I created a jsp file, but no matter how I change the source code from today, the jsp file will not be updated.
This is my jsp code
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
</head>
<body id="page-top">
<!-- jQuery 사용을 위한 include, 항상 최상단에 위치해 있어야 함 -->
<jsp:include page="common/jQuery.jsp"/>
<!-- servletPath가 만약 true라면 아래 진입 -->
<!-- Page Wrapper -->
<div id="wrapper">
<!-- 사이드 네비바 파일을 가져와서 include 시켜줌, 사이드 네비바는 무조건 div id 가 wrapper안에 있어야 함 -->
<jsp:include page="common/side_nav.jsp"/>
<c:if test="${ pageName eq 'noticePage' }">
<script>
$(document).ready(function() {
$("#accordionSidebar").children(".nav-item").eq(0).removeClass("active");
$("#accordionSidebar").children(".nav-item").eq(2).addClass("active");
$('#summernote').summernote({
height: 500,
lang: "ko-KR"
});
});
</script>
</c:if>
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Top bar 부분을 가져와서 사용함, Top bar는 무조건 content안에 있어야 함-->
<jsp:include page="common/top_bar.jsp"/>
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h4 class="m-0 font-weight-bold text-primary">공지사항항항</h4>
</div>
<div class="card-body" style="height:auto">
<form method="post">
<input type="text" placeholder="제목"/>
<div id="summernote"></div>
</form>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer 부분 이건 content-wrapper 제일 아래에 위치시키도록 하자-->
<jsp:include page="common/footer.jsp"/>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- 맨위로 올라가게 해주는 토글 버튼과 우측 상단로그아웃 부분. 이건 항상 body의 제일 아래부분에 있도록 위치시키자 -->
<jsp:include page="common/logout_scroll.jsp"/>
<!-- summernote cdn 시작-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.js"></script>
<!-- summernote cdn 끝 -->
</body>
</html>
I checked the page source on Google Chrome, but the tag was not added to the source after rebooting the local server many times.
I searched a lot and found that source freezing occurred.
So I checked the work file in the following path, but the work file is empty.
C:\dev\apache-tomcat-9.0.58-windows-x64\apache-tomcat-9.0.58\work
Also, I checked the work file in the following path, but it is also empty.
C:\workspace3\.metadata\.plugins\org.eclipse.wst.server.core\tmp1\work
How can I solve this problem?
Related
I have route
Route::get("/prodByCat/{category_id}", "ProductController#productsByCategory")->name("product.productsByCategory");
and function
public function productsByCategory($category_id){
$products = Product::where('category_id', $category_id)->get();
return view("cat", compact("products"));
in my template i have only
#extends("index")
#section("content")
#foreach($products as $product)
{{ $product->name }}
#endforeach
#endsection
Problem is - links to bootstrap and custom css doesn't inherits. I tried to create another controller and new template file. But nothing works, except deleting {category_id} from Route. Why passing {category_id} conflicts with links to css files?
I tried composer dump-autoload and reboot computer.All other templates work properly.
My index template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>#yield("title")</title>
#yield("css")
<!-- Bootstrap core CSS -->
<link href="files/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="files/shop-homepage.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
#include("layouts._shopNav")
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-3">
#yield('category')
</div>
<!-- /.col-lg-3 -->
<div class="col-lg-9">
#yield("carousel")
<div class="row">
#yield("content")
</div>
<!-- /.row -->
</div>
<!-- /.col-lg-9 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="fixed-bottom py-3 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Some writing<br></p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="files/jquery/jquery.min.js"></script>
<script src="files/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The problem is that the wrong path of the css files. You can use
{{ asset('files/jquery/jquery.min.js') }}
to make sure that the path is correct.
I am developing a Spring Boot application and using Thymeleaf Templating. I am new to this and need a little guidance. I have a index.html file which is the main view which should be displayed. Inside the index.html file i have two fragments, a header and a footer which display as well. What i am having trouble with is inserting more fragments into the index.html file. I want to insert another fragment which displays a navigation top bar as well as a second fragment that displays a side navigation menu. I am looking to include the topnavbar right below the header fragment and the side nav menu on the left side of screen. How do i go about doing this? Thank you.
Index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head lang="en">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"/>
<link rel="stylesheet" href="../static/css/main.css"
th:href="#{css/main.css}" media="screen"/>
<title>Spring Boot | Web Application</title>
</head>
<body>
<div class="container">
<div class="row" th:include="header :: banner"></div>
<div class="row">
<div class="col-sm-3"><hr /></div>
<div class="col-sm-9 text-center">col-sm-8</div>
</div>
<div class="row">
<div class="col-sm-12"><hr /></div>
</div>
<div class="row" th:include="footer :: copy"></div>
</div>
<!-- jQuery, Popper.js, Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
I have a Spring + Apache Tiles 3 Aplication.
I have a layout and inside of this, the header, the body and the footer:
defaultLayout.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%# page isELIgnored="false" %>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title><tiles:getAsString name="title" /></title>
<link href="<c:url value='/static/css/bootstrap.css' />" rel="stylesheet"></link>
<link href="<c:url value='/static/css/app.css' />" rel="stylesheet"></link>
</head>
<body>
<header id="header">
Web Application Context Path="${pageContext.request.contextPath}"
<tiles:insertAttribute name="header" />
</header>
<section id="sidemenu">
<tiles:insertAttribute name="menu" />
</section>
<section id="site-content">
<tiles:insertAttribute name="body" />
</section>
<footer id="footer">
<tiles:insertAttribute name="footer" />
</footer>
</body>
</html>
The "${pageContext.request.contextPath}" works fine inside the Layout, but not on the JSP children's:
menu.jsp
<nav>
<img class="logo" src="${pageContext.request.contextPath}/static/img/Linux-icon.png">
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
This prints the "${pageContext.request.contextPath}" "as is" in the result HTML.
Try to use <%# page isELIgnored="false" %>. It will solve your problem
Since you mentioned HTML code and say that the context path is printed "as-is", is this code in HTML file? Then it will not work.
Check this question - ${pageContext.request.contextPath} is not working on plain HTML
In my Spring project, one of the my controllers have the following views:
login -> /WEB-INF/jsp/acesso/login.jsp
logout -> /WEB-INF/jsp/acesso/logout.jsp
start -> /WEB-INF/jsp/acesso/start.jsp
which are working almost fine, except with this little problem with the the first view (login):
When I call it for the first time (aka, when I start the application), the page is displayed correctly. But after I call logout from inside start, I have a link to login. When I click in this link, the view login is displayed wrong, without reach none of the css files included in the html code.
The JSP files above are:
login.jsp
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>HorarioLivre - Login</title>
<link href="<c:out value="bootstrap/css/bootstrap.min.css"/>" rel="stylesheet">
<link href="<c:out value="extras/css/signin.css"/>" rel="stylesheet">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-signin" role="form" method="post" action="<c:out value="acesso/doLogin.html"/>">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="form-control" name="username" placeholder="Username" required autofocus>
<input type="password" class="form-control" name="password" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
start.jsp
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>HorarioLivre</title>
<!-- Bootstrap core CSS -->
<link href="<c:out value="../bootstrap/css/bootstrap.min.css"/>" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="<c:out value="../extra/css/starter-template.css"/>" rel="stylesheet">
<script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">HorarioLivre</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Eventos</li>
<li>Listar Horários</li>
<li>Cadastrar Horários</li>
<li>Usuários</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
${usuario.primeiroNome} ${usuario.ultimoNome}<b class="caret"></b>
<ul class="dropdown-menu">
<li>Perfil</li>
<li>Configurações</li>
<li>Sair</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="starter-template">
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="<c:out value="../jquery/js/jquery-2.1.0.min.js"/>"></script>
<script src="<c:out value="../jquery/js/jquery-ui-1.10.4.custom.min.js"/>"></script>
<script src="<c:out value="../bootstrap/js/bootstrap.min.js"/>"></script>
</body>
</html>
logout.html
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Saida do sistema</title>
<!-- Bootstrap core CSS -->
<link href="<c:out value="../bootstrap/css/bootstrap.min.css"/>" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="<c:out value="../extra/css/jumbotron-narrow.css"/>" rel="stylesheet">
<script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-muted">HorarioLivre</h3>
</div>
<div class="jumbotron">
<h1>Você saiu do sistema</h1>
<p class="lead"></p>
<p><a class="btn btn-lg btn-success" href="<c:out value="login.html"/>" role="button">Entrar novamente</a></p>
</div>
<div class="footer">
<p>Kleber Mota de Oliveira © 2014</p>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
Someone knows how to correct set the mapping for this files, to work don't matter how it's called?
ps.: my web.xml is:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>HorarioLivre2</display-name>
<welcome-file-list>
<welcome-file>acesso/login.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>HorarioLivre2</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>HorarioLivre2</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
</web-app>
my HorarioLivre2-servlet.xml:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.0.xsd">
<context:component-scan base-package="com.horariolivre"/>
<bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
<context:annotation-config>
<bean class="com.horariolivre.resources.HibernateConfig">
</bean>
</context:annotation-config>
<tx:annotation-driven transaction-manager="transactionManager"/>
</beans>
In your HorarioLivre2-servlet.xml it seems that you have not mapped the static resources. Check out this link to see how this is done
i'm a web devoper from Italy...I have a problem with loading with href
example:
i have one.html with this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
</head>
<body>
<!-- LOGIN -->
<div data-role="page" id="loginPage">
<div data-role="content">
<div style=" text-align:center">
<img style="width: 70%;" src="http://www.laboncloud.it/dkrmobile/css/images/logdkr.png">
</div>
<form action="#pageFile">
<div data-role="fieldcontain">
<label for="userNameLogin">
Username
</label>
<input name="" id="userNameLogin" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="passwordLogin">
Password
</label>
<input name="" id="passwordLogin" placeholder="" value="" type="password">
</div>
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch="trues">
Login
</a>
</form>
</div>
</div>
</body>
</html>
and the two.html with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<script type="text/javascript" src="js/tolito-1.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/tolito-1.0.5.min.css" />
<!--css userinterface-->
<link rel="stylesheet" href="css/ui.css" />
</head>
<body>
<div data-role="page" id="loadingPage">
<div data-role="content">
<h1>caricamento di tutti i contenuti in corso</h1>
<a data-role="button" data-theme="a" data-transition="fade" href="#pageFile">skip</a>
</div>
</div>
<div data-role="page" id="pageFile">
<div data-role="content">
<h1>dueeee</h1>
</div>
</div>
<!-- FILE-->
</body>
</html>
now if tap on login - the two.html will no be loaded.
want a demo?
here the demo
if I click on skip in two.html dont show nothing (if I refresh the page it start work).
the only way is data-ajax="false" ? why?
This is not an error. To understand this problem you must understand how jQuery Mobile works.
Multi HTML template can't be mixed with multi page template. For example when working with several HTML pages, only first one can have more then one page. When jQuery Mobile loads other HTML files it will strip HEAD (we dont need it because first HTML HEAD content is already loaded into the DOM) and it will load ONLY first page it can find in a file, every other page will be discarded.
data-prefetch will not help you here. Also you are initializing it incorrectly, data-prefetch attribute don't have a value, it is just data-prefetch, example:
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch>Login</a>
If you want to find out more how jQuery Mobile handles multiple HTML and multiple page templates or what are they take a look at this ARTICLE or THIS one. To be transparent they are my personal blog articles. Everything you need to know can be found there.
Basically solution to your problem would be to have all pages inside a single HTML file, or you should brake two.html into two separate HTML files. you decide what is a best solution for you.