JavaScript 和 CSS 在我的 liferay portlet 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12870542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript and CSS not working in my liferay portlet
提问by User 1531343
I have to use some JavaScript and CSS for my portlet. I am using some datable jQuery for sorting and some interactive display, but it's not working.
我必须为我的 portlet 使用一些 JavaScript 和 CSS。我正在使用一些可数据的 jQuery 进行排序和一些交互式显示，但它不起作用。
Can anyone guide me to where I am making a mistake?
谁能指导我到哪里出错？
This is my directory structure of docroot where my JS and CSS is kept.
这是我保存 JS 和 CSS 的 docroot 目录结构。
Here is my view.jsp file in which am filling data dynamically.
这是我的 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>
Maybe it can't locate the CSS and JavaScript?
I have tried with the path href=/css/[filename]but this also doesn't work so I have given docroot/css/ [filename].
也许它找不到 CSS 和 JavaScript？我已经尝试过路径， href=/css/[filename]但这也不起作用，所以我给了docroot/css/ [filename].
Thanks and Regards Bhavik Kama
感谢和问候 Bhavik Kama
@ Mr. Barmar
@巴尔马尔先生
<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">
采纳答案by User 1531343
@tairi that also we can do.but i got my solution just gave path to the particular js or csswith the following
@tairi，我们也可以做到。但我的解决方案只是提供了特定js 或 css 的路径，如下所示
<script src="<%=request.getContextPath()%>/js/jquery-1.2.6.min.js" type="text/javascript"></script>
for others who have problem like this then just retrieve your css/jsfile with the <%=request.getContextPath()%>
对于其他有类似问题的人，只需css/js使用<%=request.getContextPath()%>
thanks all of you.somehow you helped me to achieve this.
谢谢大家。不知何故，你帮助我实现了这一目标。
回答by Ta Duy Anh
Instead of using <link href="docroot/js/jquery-1.2.6.min.js" type="text/javascript">, you can use :
而不是使用的<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">
This is the absolute path for your file, the /means the docrootfolder.
Btw, liferay use default loading css and js file which is defined in docroot\WEB-INF\liferay-portlet.xmllike this:
这是文件的绝对路径，/即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>
So you can change or include js or css from these file to load for header.
因此，您可以更改或包含这些文件中的 js 或 css 以加载标题。
回答by Shaun Hare
As @Taiki indicates In liferay there is a xml descriptor file which allows you to set the css and javascript used in the portlet in either the portal header or footer
正如@Taiki 指出在liferay 中有一个xml 描述符文件，它允许您在门户页眉或页脚中设置portlet 中使用的css 和javascript
liferay-portlet.xml
liferay-portlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 5.2.0//EN"
"http://www.liferay.com/dtd/liferay-portlet-app_5_2_0.dtd">
<liferay-portlet-app>
<portlet>
<portlet-name>PortletName</portlet-name>
<header-portlet-css>/css/your.css</header-portlet-css>
<header-portlet-javascript>/js/jquery.js</header-portlet-javascript>
<footer-portlet-javascript>/js/your.js</footer-portlet-javascript>
</portlet>
</liferay-portlet-app>
If you place this in your WEB-INF adjust the paths accordingly and you are good to go no need to reference the files in your view
如果你把它放在你的 WEB-INF 中，相应地调整路径，你很高兴不需要在你的视图中引用文件
回答by Barmar
URLs that do not begin with /are interpreted relative to the directory in the URL that references them. So if a page with URL http://domain.com/docroot/jsps/view.jspaccesses docroot/css/something.css, it will look for http://domain.com/docroot/jsps/docroot/css/something.css.
不以 开头/的 URL 相对于引用它们的 URL 中的目录进行解释。所以如果一个带有 URL 的页面http://domain.com/docroot/jsps/view.jsp访问docroot/css/something.css，它会寻找http://domain.com/docroot/jsps/docroot/css/something.css.
Try using paths like ../css/[filename].cssand ../js/[filename].js. ../means to go up one level in the directory hierarchy.
尝试使用像../css/[filename].css和这样的路径../js/[filename].js。../意味着在目录层次结构中上升一级。
