JavaScript and CSS not working in my liferay portlet

Question

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.

enter image description here

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">

thanks for reply,but have tried that.its not working.any other suggestion? — BhavikKama, Oct 13 '12 at 06:33
check generated html, does it point to expected place? can you get css/js files with direct url ? (like `http://domain.com/css/my.css`) which url of the view.jsp ? it is inside docroot or inside docroot/other_dir/ or other_dir ? — zb', Oct 13 '12 at 06:35
this is the link i get on my source of html in browser and when am click on that then this is the page with error i got"The page you are trying to view cannot be shown because it uses an invalid or unsupported form of compression." — BhavikKama, Oct 13 '12 at 06:38
That error sounds like there's a problem with your server configuration, it's sending the wrong `Content-Encoding`. — Barmar, Oct 13 '12 at 06:58

score 4 · Answer 1 · answered Oct 13 '12 at 07:00

4

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.

answered Oct 13 '12 at 07:00

Ta Duy Anh

1,478
9
16

shall i add more then one css and js? and what does it mean by headed css and header js? – BhavikKama Oct 17 '12 at 09:04
header css and header js will be called by default to of your portlet, you don't need to include it again – Ta Duy Anh Oct 17 '12 at 09:59
Sorry?i cant get it!! i am asking that what is the diffrence bewen header css and header js and same with footer js and footer css – BhavikKama Oct 17 '12 at 10:09
header css to load your default css, header js to load your default javascript to header of your portlet page, and footer css and js is to load at footer. I.E you can add some init js to your header js, and something like $(document).ready(function()) to your footer js. It's optional – Ta Duy Anh Oct 17 '12 at 10:15

score 3 · Accepted Answer · edited Aug 08 '13 at 11:51

3

@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.

edited Aug 08 '13 at 11:51

Laxman Rana

2,904
3
25
37

answered Oct 13 '12 at 07:26

BhavikKama

8,566
12
94
164

This helped me when I needed to add some images to my portlet. I created a /img/ folder under docroot and put the pictures there. I could reference them in my jsps via – CatsAndCode Nov 02 '12 at 20:26
By the way, `` and `` in `view.jsp` of a portlet? that is just not right! And this approach might create problems when using `https`. – Prakash K Jul 06 '15 at 13:23

score 2 · Answer 3 · answered Oct 14 '12 at 10:04

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

ya..i got it..thnks to u and @Taiki – BhavikKama Oct 14 '12 at 14:31 — BhavikKama, Oct 14 '12 at 14:31

score 1 · Answer 4 · answered Oct 13 '12 at 06:51

1

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.jsp accesses docroot/css/something.css, it will look for http://domain.com/docroot/jsps/docroot/css/something.css.

Try using paths like ../css/[filename].css and ../js/[filename].js. ../ means to go up one level in the directory hierarchy.

answered Oct 13 '12 at 06:51

Barmar

741,623
53
500
612

ya you are right and i have tried that too.but don't know why still not working.please see at the end i have updated my answer as u suggested.but its not working – BhavikKama Oct 13 '12 at 06:57

JavaScript and CSS not working in my liferay portlet

4 Answers4