JavaScript and CSS not working in my liferay portlet

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=".video.util.VideoActionUtil"%>
<%@page import=".video.database.model.Video"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"
    import=".video.database.model.Video.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".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 () {
            $("#panies").dataTable({
                "sPaginationType": "full_numbers",
                "bJQueryUI": true
            });
        });
        </script>
    </head>
    <body id="dt_example">
        <div id="container">

            <div id="demo_jui">
                <table id="panies" 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">

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=".video.util.VideoActionUtil"%>
<%@page import=".video.database.model.Video"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"
    import=".video.database.model.Video.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/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 () {
            $("#panies").dataTable({
                "sPaginationType": "full_numbers",
                "bJQueryUI": true
            });
        });
        </script>
    </head>
    <body id="dt_example">
        <div id="container">

            <div id="demo_jui">
                <table id="panies" 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">

Share Improve this question edited Oct 13, 2012 at 6:59 asked Oct 13, 2012 at 6:20 BhavikKama 8,80012 gold badges95 silver badges166 bronze badges

thanks for reply,but have tried that.its not working.any other suggestion? – BhavikKama Commented Oct 13, 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./css/my.css) which url of the view.jsp ? it is inside docroot or inside docroot/other_dir/ or other_dir ? – zb' Commented Oct 13, 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 pression." – BhavikKama Commented Oct 13, 2012 at 6:38
my view.jsp is inside docroot/jsps/view.jsp – BhavikKama Commented Oct 13, 2012 at 6:42
That error sounds like there's a problem with your server configuration, it's sending the wrong Content-Encoding. – Barmar Commented Oct 13, 2012 at 6:58

| Show 1 more ment

4 Answers 4

Sorted by: Reset to default 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.

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

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

JavaScript and CSS not working in my liferay portlet - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)