Menu
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.
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.
Here is my view.jsp file in which am filling data dynamically.
<%@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].
Thanks and Regards 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">
419
Instead of using <link href="docroot/js/jquery-1.2.6.min.js" type="text/javascript"> , you can use :
<link href="/js/jquery-1.2.6.min.js" type="text/javascript">
This is the absolute path for your file, the / means the docroot folder.
Btw, liferay use default loading css and js file which is defined in docroot\WEB-INF\liferay-portlet.xml like this:
<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.
180
@tairi that also we can do.but i got my solution just gave path to the particular js or css with the following
<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/js file with the <%=request.getContextPath()%>
thanks all of you.somehow you helped me to achieve this.
37
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
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
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
