JavaScript and CSS not working in my liferay portlet

Asked 13/10, 2012 at 6:20 Answered 14/10, 2012 at 10:4

Solved javascript css jsp portlet liferay-6

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

Escadrille answered 13/10, 2012 at 6:20 Comment(6)

thanks for reply,but have tried that.its not working.any other suggestion? – Escadrille 13/10, 2012 at 6: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 ? – Rhondarhondda 13/10, 2012 at 6: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." – Escadrille 13/10, 2012 at 6:38

my view.jsp is inside docroot/jsps/view.jsp – Escadrille 13/10, 2012 at 6:42

That error sounds like there's a problem with your server configuration, it's sending the wrong Content-Encoding. – Syndrome 13/10, 2012 at 6:58

sorry?i couldn't get you..can you please explain? – Escadrille 13/10, 2012 at 7:0

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

Escadrille answered 13/10, 2012 at 7:26 Comment(2)

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 <img alt="Redirecting" src="<%=request.getContextPath() %>/img/ajax-loader.gif" /> – Satiate 2/11, 2012 at 20:26

By the way, <html> and <DOCTYPE> in view.jsp of a portlet? that is just not right! And this approach might create problems when using https. – Emelun 6/7, 2015 at 13:23

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.

Garry answered 13/10, 2012 at 7:0 Comment(4)

shall i add more then one css and js? and what does it mean by headed css and header js? – Escadrille 17/10, 2012 at 9:4

header css and header js will be called by default to of your portlet, you don't need to include it again – Garry 17/10, 2012 at 9: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 – Escadrille 17/10, 2012 at 10:9

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 – Garry 17/10, 2012 at 10:15

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

Escadrille answered 13/10, 2012 at 7:26 Comment(2)

By the way, <html> and <DOCTYPE> in view.jsp of a portlet? that is just not right! And this approach might create problems when using https. – Emelun 6/7, 2015 at 13:23

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

Cork answered 14/10, 2012 at 10:4 Comment(1)

ya..i got it..thnks to u and @Taiki – Escadrille 14/10, 2012 at 14:31

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.

Syndrome answered 13/10, 2012 at 6:51 Comment(1)

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 – Escadrille 13/10, 2012 at 6:57

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags