[英]Rails: Javascript dropdown not loading when clicked on. Uncaught ReferenceError: jQuery is not defined.
[英]Uncaught ReferenceError: $ is not defined. (jQuery, javascript)
我知道“Uncaught ReferenceError: $ is not defined”是一個常見問題。 但我不知道我的代碼哪里錯了。 我用谷歌搜索但沒有解決方案可以解決這個問題。 提前致謝!
我的代碼如下。
因為我的代碼太長,所以我把它分成了3個jsp文件:list.jsp、authorModals.jsp、listAuthor.jsp。 我在這里附上我的代碼,但我刪除了一些不相關的代碼以使其簡短。
列表.jsp:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Administrator</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet"
type="../text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700"
rel="stylesheet" type="../text/css">
<link
href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic"
rel="stylesheet" type="../text/css">
</head>
<body id="page-top" class="index">
<!-- Author Modals -->
<%@include file="authorModals.jsp"%> <--! Links to authorModals.jsp-->
<!-- jQuery -->
<script src="../js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script
src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="../js/classie.js"></script>
<script src="../js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="../js/jqBootstrapValidation.js"></script>
<script src="../js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../js/freelancer.js"></script>
</body>
</html>
作者Modals.jsp:
<!-- Author Modals -->
<!-- unrelated code here -->
<!-- List Author -->
<%@include file="listAuthor.jsp"%> <--! Links to listAuthor.jsp-->
listAuthor.jsp:
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Update</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="authorData">
</tbody>
</table>
<script id="entry-template" type="text/x-handlebars-template">
<tr>
<td>{{authorId}}</td>
<td>{{authorName}}</td>
<td>{{authorId}}</td>
<td>{{authorName}}</td>
</tr>
</script>
<script>
var source = $("#entry-template").html(); <!-- My code stops here -->
var template = Handlebars.compile(source);
var dataString;
$.ajax({
method : "POST",
url : "../listAuthor"
}).done(function(data) {
data = $.parseJSON(data);
$.each(data, function(i, item) {
var html = template(item);
dataString += html;
});
$("#authorData").html(dataString);
});
function pageAuthor(page) {
dataString = "";
$.ajax({
method : "POST",
url : "../listAuthor",
data : {
pageNo : page
}
}).done(function(data) {
data = $.parseJSON(data);
$.each(data, function(i, item) {
var html = template(item);
dataString += html;
});
$("#authorData").html(dataString);
});
}
</script>
將您的代碼更新到下面並查看,
幾樣東西:
加載腳本的順序很重要,
確保在任何其他腳本之前加載jQuery
下面的代碼將確保您的代碼在jQuery初始化后被加載。
jQuery(document).ready(function($) {
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var dataString;
$.ajax({
method: "POST",
url: "../listAuthor"
}).done(function(data) {
data = $.parseJSON(data);
$.each(data, function(i, item) {
var html = template(item);
dataString += html;
});
$("#authorData").html(dataString);
});
function pageAuthor(page) {
dataString = "";
$.ajax({
method: "POST",
url: "../listAuthor",
data: {
pageNo: page
}
}).done(function(data) {
data = $.parseJSON(data);
$.each(data, function(i, item) {
var html = template(item);
dataString += html;
});
$("#authorData").html(dataString);
});
}
});
閱讀有關文檔就緒的更多信息
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.