1
私はSpring MCV 4 + HTML5 + Thymeleafベースのアプリケーションを持っています。私はページ上でjavascriptを使用することはできません。Thymeleaf + HTML5 - なぜJavaScriptにアクセスできないのですか？
Webアプリケーションの構造は次のとおりです。私のログインページで
webapp
assets
css
img
js
i18n
messages.properties
WEB-INF
html
fragments
common.html
default.html
footer.html
header.html
login.html // exclusively for ../login.html
sidebar.html
home
welcomeSignedIn.html
client
home.html
create.html
、それがバックグラウンドで画像のみで、単一ページであるため、私は完璧に動作JSの部分を持っている：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/login :: loginFragment">
<meta charset="UTF-8" />
<title><th:text="#{app.name}"></label></th:text>
</head>
<body>
<div class="login-container animated fadeInDown">
<div class="loginbox bg-white">
<form th:action="@{/login}" method="post">
<div class="loginbox-title">SIGN IN</div>
<div class="loginbox-textbox">
<input type="text" id="ssoId" name="ssoId" class="form-control" placeholder="Username" />
</div>
<div class="loginbox-textbox">
<input type="password" id="password" name="password" class="form-control" placeholder="Password" />
</div>
<div class="loginbox-forgot">
<a href="">Forgot Password?</a>
</div>
<div class="loginbox-submit">
<input type="submit" class="btn btn-primary btn-block" value="Login"/>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#ssoId').focus();
});
</script>
</body>
</html>
ログインページには、メニューはなく、サイドバーページがないため、独自のフラグメントがあります。他のすべてです。
デフォルトのテンプレート設定の場合、ページ構成の責任を負うfragments/default.htmlというファイルがあります。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:include="fragments/common :: commonFragment">
<meta charset="UTF-8" />
<title th:text="#{app.name}"> </title>
</head>
<body>
<div th:id="defaultFragment" th:fragment="defaultFragment">
<div th:replace="fragments/header :: headerFragment"></div>
<div class="main-container container-fluid">
<div class="page-container">
<div th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div layout:fragment="content"></div>
</div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</body>
</html>
だから、すべてのページのために、私はfragments/common.htmlから以下のリンクとスクリプトが含まれます：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:id="commonFragment" th:fragment="commonFragment">
<link rel="icon" th:href="@{/assets/img/favicon.png}" type="image/x-icon" />
<link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{/assets/css/font-awesome.min.css}"/>
<link rel="stylesheet" th:href="@{/assets/css/beyond.min.css}"/>
<link rel="stylesheet" th:href="@{/assets/css/demo.min.css}" />
<link rel="stylesheet" th:href="@{/assets/css/animate.min.css}" />
<link rel="stylesheet" th:href="@{/assets/css/skins/darkred.min.css}" />
<link rel="stylesheet" th:href="@{http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300}" />
<!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
<script type="text/javascript" src="/assets/js/skins.min.js" th:src="@{/assets/js/skins.min.js}"></script>
<script type="text/javascript" src="/assets/js/jquery-2.0.3.min.js" th:src="@{/assets/js/jquery-2.0.3.min.js}"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js" th:src="@{/assets/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="/assets/js/slimscroll/jquery.slimscroll.min.js" th:src="@{/assets/js/slimscroll/jquery.slimscroll.min.js}"></script>
<script type="text/javascript" src="/assets/js/beyond.js" th:src="@{/assets/js/beyond.js}"></script>
<script type="text/javascript" src="/assets/js/beyond.min.js" th:src="@{/assets/js/beyond.min.js}"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="container" />
</body>
</html>
マイfragments/header.htmlは次のように定義されます
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/common :: commonFragment">
</head>
<body>
<div th:id="headerFragment" th:fragment="headerFragment">
// content
</div>
</body>
</html>
fragments/sidebar.htmlは非常によく似ています`fragments/header.html、ちょうど異なるクラスと内容。
だから、私は自分のアプリケーションに持っているすべてのページに、私はこのような何かを：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="fragments/default" xmlns:s="http://www.springframework.org/tags">
<head >
<title th:text="#{view.index.title}">Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div layout:fragment="content">
// content
</div>
</body
</html>
私はそれが非常に愚かなものだと確信していますが、私は、私は得ることができない理由を確認するために失敗していますjavascriptのもかなりのような単純なもののために、私のページに取り組んで：（！多くのことを）何を悩ま、
<script type="javascript" >
$(function() {
alert('hello');
});
</script>
されているかのようなブラウザ何かのI：
localhost:8080/appName/assets/js/bootstrap.min.js
ファイルの内容が表示されます。
私はここで何が欠けていますか？私は2つのjqueryファイルがあるので、あなたが問題を持っていると思う
CSSがロードされています。また、ファビコンもあります。 – gtludwig
ブラウザコンソールには何が表示されますか？ jsリソースの404を報告していますか？ – ndrone
@ndrone、入力いただきありがとうございます！ブラウザコンソールには何も印刷されません。 – gtludwig