JavaScript和CSS無法在我的liferay portlet中工作

我必須爲我的portlet使用一些JavaScript和CSS。我正在使用一些datable jQuery進行排序和一些交互式顯示，但它不起作用。JavaScript和CSS無法在我的liferay portlet中工作

任何人都可以指導我在哪裏我犯了一個錯誤？

這是我的JS和CSS保存的docroot目錄結構。

enter image description here

下面是其中很動態填充數據我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>

也許它找不到CSS和JavaScript？我嘗試過路徑href=/css/[filename]但這也不起作用，所以我給了docroot/css/ [filename]。

感謝和問候 Bhavik卡馬

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

來源

2012-10-13 Bhavik Kama

嘗試'HREF =「CSS/[文件名]」 ' –

感謝您的回覆，但已經嘗試過。它不工作。還有其他建議嗎？ –

檢查生成的html，它是否指向預期的地方？你可以通過直接url獲得css/js文件嗎？（如'http：// domain.com/css/my.css'）view.jsp的哪個網址？它在docroot裏面還是在docroot/other_dir /或other_dir裏面？ –

也可以do.but我得到了我的解決方案只是給了路徑特定JS和CSS具有以下

<script src="<%=request.getContextPath()%>/js/jquery-1.2.6.min.js" type="text/javascript"></script>

別人誰都有問題，這樣便只檢索您css/js @tairi文件與<%=request.getContextPath()%>

感謝你們所有人。你們幫助我實現這一目標。

來源

2012-10-13 07:26:12

當我需要添加一些圖像到我的portlet時，這幫助了我。我在docroot下創建了一個/ img /文件夾並將圖片放在那裏。我可以在我的JSP通過 CatsAndCode

哦那好......至少我在'view.jsp的幫助別人 –

順便說一句，''和'' '一個portlet？這是不正確的！這種方法可能會產生問題，當使用'https'。 –

網址不以/開始在引用他們的URL目錄的相對解釋。因此，如果網址爲http://domain.com/docroot/jsps/view.jsp的網頁訪問docroot/css/something.css，它將查找http://domain.com/docroot/jsps/docroot/css/something.css。

嘗試使用類似../css/[filename].css和../js/[filename].js的路徑。 ../意味着在目錄層次結構中上升一層。

來源

2012-10-13 06:51:18 Barmar

你是對的，我也試過too.but不知道爲什麼仍然working.please看到在最後我已經更新了我的答案，因爲你建議。但它不工作 –

而不是使用<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">

這是你的文件的絕對路徑，該/意味着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>

所以，你可以改變或包含這些文件的JS和CSS加載的頭。

來源

2012-10-13 07:00:43

我應該添加更多的一個CSS和JS ？這是什麼意思頭部的CSS和標題JS？ –

頭文件CSS和頭文件js將默認調用到您的portlet中，您不需要再次包含它 –

對不起，我不能得到它！我問的是什麼是不同的bewen頭文件的CSS和頭文件js和相同的頁腳js和頁腳css –

作爲@Taiki表示在Liferay中有一個XML描述符文件，其允許用戶設置在任一門戶頁眉或頁腳

的liferay的portlet在portlet中使用的CSS和JavaScript。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>

如果你在你的WEB-INF放置此相應調整路徑，你是好去沒有必要引用視圖中的文件

來源

2012-10-14 10:04:07

亞..我明白了..thnks你和@Taiki –

JavaScript和CSS無法在我的liferay portlet中工作

回答

相關問題