JavaScript和CSS无法在我的liferay portlet中运行
Use*_*343 6 javascript css jsp portlet liferay-6
我必须为我的portlet使用一些JavaScript和CSS.我使用一些数据jQuery进行排序和一些交互式显示,但它不起作用.
任何人都可以指导我到哪里犯错误吗？
这是我的目录结构docroot,其中保存了我的JS和CSS.
这是我的view.jsp文件,其中动态填充数据.
<%@page import="com.video.util.VideoActionUtil"%>
<%@page import="com.video.database.model.Video"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"
import="com.video.database.model.Video.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Applying JQuery DataTables plugin in the Java Server application</title>
<link href="docroot/js/jquery-1.2.6.min.js" type="text/javascript">
<link href="docroot/css/demo_page.css" rel="stylesheet" type="text/css" />
<link href="docroot/css/demo_table.css" rel="stylesheet" type="text/css" />
<link href="docroot/css/demo_table_jui.css" rel="stylesheet" type="text/css" />
<link href="docroot/css/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
<link href="docroot/css/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" media="all" />
<script src="docroot/js/query.js" type="text/javascript"></script>
<script src="docroot/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#companies").dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": true
});
});
</script>
</head>
<body id="dt_example">
<div id="container">
<div id="demo_jui">
<table id="companies" class="display">
<thead>
<tr>
<th>Company name</th>
<th>Address</th>
<th>Town</th>
</tr>
</thead>
<tbody>
<%
long l=10154;
for(Video c: VideoActionUtil.getAllVideo(l)){ %>
<tr>
<td><%=c.getTitle()%></td>
<td><%=c.getDescription()%></td>
<td><%=c.getTypeId()%></td>
</tr>
<% } %>
</tbody>
</table>
</div>
</div>
</body>
</html>
也许它找不到CSS和JavaScript？我尝试过这条路, href=/css/[filename] 但这也行不通,所以我给了docroot/css/ [filename].
谢谢和关心Bhavik Kama
@巴马尔先生
<script src="../js/jquery-1.2.6.min.js" type="text/javascript"></script>
<link href="../css/demo_page.css" rel="stylesheet" type="text/css" />
<link href="../css/demo_table.css" rel="stylesheet" type="text/css" />
<link href="../css/demo_table_jui.css" rel="stylesheet" type="text/css" />
<link href="../css/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
<link href="../css/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" media="all" />
<script src="../js/query.js" type="text/javascript"></script>
<script src="../js/jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript">
小智 5
<link href="docroot/js/jquery-1.2.6.min.js" type="text/javascript">您可以使用以下代码而不是使用:
<link href="/js/jquery-1.2.6.min.js" type="text/javascript">
这是文件的绝对路径,/表示docroot文件夹.顺便说一句,liferay使用默认加载css和js文件,其定义docroot\WEB-INF\liferay-portlet.xml如下:
<portlet>
<portlet-name>Your portlet name</portlet-name>
<icon>/icon.png</icon>
<indexer-class>Your portlet class</indexer-class>
<instanceable>false</instanceable>
<header-portlet-css>/css/main.css - link to your header css</header-portlet-css>
<footer-portlet-javascript>/js/main.js - link to your header js</footer-portlet-javascript>
<css-class-wrapper>DongBat-SLL-DT-portlet</css-class-wrapper>
</portlet>
因此,您可以更改或包含这些文件中的js或css以加载标头.
@tairi，我们也可以这样做。但是我得到了我的解决方案，只是使用以下内容给出了特定js 或 css的路径
<script src="<%=request.getContextPath()%>/js/jquery-1.2.6.min.js" type="text/javascript"></script>
对于遇到此类问题的其他人，只需css/js使用以下命令检索您的文件即可<%=request.getContextPath()%>
谢谢大家。不知何故，你们帮助我实现了这一目标。