Jquery 未捕获引用错误$未在thymeleaf中定义
我使用thymeleaf对spring进行html模板制作。我将布局拆分为两页，一页用于容器布局，另一页用于片段。当我从片段页面调用函数时。我得到未捕获的引用错误$未定义错误。我已经在容器布局标题中包含了jquery。这是我的容器布局：Jquery 未捕获引用错误$未在thymeleaf中定义,jquery,spring-boot,thymeleaf,Jquery,Spring Boot,Thymeleaf,我使用thymeleaf对spring进行html模板制作。我将布局拆分为两页，一页用于容器布局，另一页用于片段。当我从片段页面调用函数时。我得到未捕获的引用错误$未定义错误。我已经在容器布局标题中包含了jquery。这是我的容器布局： <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>Layout</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.6/css/bootstrap.min.css}"/>
<script type="application/javascript" th:href="@{/webjars/jquery/2.1.4/jquery.min.js}"/>
<script type="application/javascript" th:href="@{/webjars/bootstrap/3.3.6/js/bootstrap.min.js}"/>
<link rel="stylesheet" th:href="@{/css/dashboard.css}"/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" th:href="@{/}">Daily Report</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a th:href="@{/}">Dashboard</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Log out</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search..."/>
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li th:classappend="${#httpServletRequest.getRequestURI() == '/' ? 'active':''}" style="cursor: pointer;"><a th:href="@{/}">Dashboard <span class="sr-only">(current)</span></a></li>
<li th:classappend="${#httpServletRequest.getRequestURI() == '/daily' ? 'active':''}" ><a style="cursor: pointer;" th:href="@{/daily}">Daily Report</a></li>
<li><a style="cursor: pointer;" onclick="event.preventDefault(); document.getElementById('formlogout').submit();">Logout</a></li>
<form name="formlogout" th:action="@{/logout}" method="post" id="formlogout">
</form>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" layout:fragment="content">
</div>
</div>
</div>
<!-- th:remove="tag"-->
<div layout:fragment="custom-footer">
</div>
</body>
</html>
布局
切换导航
-
- 注销
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:th="http://www.thymeleaf.org"
layout:decorator="user/layout">
<!-- layout:decorate="~{user/layout}">-->
<!-- layout:decorator="user/layout">-->
<head>
<title>Daily Report</title>
<style>
.spanhead{
margin: -10px 0 20px;
border-bottom: 1px solid #eee;
}
.phead{
font-size: 35px;
margin-left: -30px;
}
.left{
margin-left: 30px;
margin-top: 15px;
}
#input_report{
display:none;
margin-bottom: 3px;
border-bottom: 1px solid #eee;
}
</style>
</head>
<body>
<div layout:fragment="content">
<span class="spanhead col-md-12">
<p class="phead col-md-10">Daily Report</p>
<button type="button" onclick="togleInput()" class="col-md-2 btn btn-default left">Input Report</button>
</span>
<div id="input_report">
<form class="form-inline" name="formreport" th:action="@{/daily}" method="post" id="formreport">
<div class="form-group">
<label for="tanggal">Tanggal : </label>
<input class="form-control" type="text" name="tanggal" id="tanggal" title="tanggal" />
</div>
<div class="form-group" style="margin-left:30px;">
<label for="uraian">Uraian : </label>
<input class="form-control" type="text" name="uraian" id="uraian" title="uraian" />
</div>
<button type="submit" class="btn btn-primary" style="margin-left:30px;">Submit</button>
</form>
</div>
<div>
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Tanggal</th>
<th>Uraian</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>3/1/2017</td>
<td>Desain Mock Up Aplikasi</td>
</tr>
<tr>
<td>2</td>
<td>3/2/2017</td>
<td>Desain database Aplikasi</td>
</tr>
</tbody>
</table>
</div>
</div>
<div layout:fragment="custom-footer">
<script th:inline="javascript">
function togleInput()
{
$('#input_report').toggle();
}
console.log('hai');
</script>
</div>
</body>
</html>
日报
斯潘黑德先生{
利润率：-10px 0 20px；
边框底部：1px实心#eee；
}
菲德先生{
字体大小：35px；
左边距：-30px；
}
.左{
左边距：30px；
边缘顶部：15px；
}
#输入报告{
显示：无；
利润底部：3倍；
边框底部：1px实心#eee；
}
每日报告
输入报告
唐加尔：
乌拉尔语：
提交
不
唐加尔
乌拉尔人
1.
3/1/2017
德赛模拟Aplikasi
2.
3/2/2017
德赛数据库Aplikasi
函数togleInput（）
{
$（'#输入报告'）。切换（）；
}
console.log（'hai'）；
当我单击片段布局中的按钮时。函数出现错误，因为未定义$。我是spring和thymeleaf新手，请帮我解决这个问题，谢谢。您应该将所有脚本放在
$（文档）中。就绪（函数（）{编辑：如果要使用jquery，必须将jquery放在函数/脚本之前，例如脚本中的“$”。您是否尝试过使用
jquery$