2012-10-13 15 views
6

Tôi phải sử dụng một số JavaScript và CSS cho portlet của mình. Tôi đang sử dụng một số jQuery datable để phân loại và hiển thị một số tương tác, nhưng nó không hoạt động.JavaScript và CSS không hoạt động trong portlet đời của tôi

Có ai có thể hướng dẫn tôi đến nơi tôi đang phạm sai lầm không?

Đây là cấu trúc thư mục của tôi về docroot nơi JS và CSS của tôi được lưu giữ.

enter image description here

Đây là tập tin view.jsp của tôi trong đó đang điền dữ liệu tự động.

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

Có thể không tìm được CSS và JavaScript? Tôi đã thử với đường dẫn href=/css/[filename] nhưng điều này cũng không hoạt động vì vậy tôi đã cung cấp docroot/css/ [filename].

Cảm ơn và chúc Bhavik Kama

@ Ông 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"> 
+0

thử 'href = "css/[filename]" ' –

+0

cảm ơn bạn đã trả lời nhưng đã thử điều đó.its không hoạt động. Bạn có đề xuất nào khác không? –

+0

kiểm tra html đã tạo, có trỏ tới địa điểm dự kiến ​​không? bạn có thể lấy các tập tin css/js với url trực tiếp không? (như 'http: // domain.com/css/my.css') url nào của view.jsp? nó nằm trong docroot hoặc bên trong docroot/other_dir/hoặc other_dir? –

Trả lời

4

@tairi rằng chúng tôi cũng có thể do.but tôi đã nhận giải pháp của tôi chỉ đưa đường dẫn đến js cụ thể hoặc css như sau

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

cho những người có vấn đề như thế này sau đó chỉ cần lấy css/js của bạn tệp với <%=request.getContextPath()%>

cảm ơn tất cả các bạn bằng cách nào đó bạn đã giúp tôi đạt được điều này.

+0

Điều này đã giúp tôi khi tôi cần thêm một số hình ảnh vào portlet của mình. Tôi đã tạo một thư mục/img/dưới docroot và đặt các hình ảnh ở đó. tôi có thể tham khảo chúng trong JSP của tôi qua Redirecting CatsAndCode

+0

oh thats tốt ... ít nhất tôi đã giúp một ai đó –

+0

Bằng cách này,' 'và' 'trong 'view.jsp 'của một portlet? Điều đó là không đúng! Và cách tiếp cận này có thể tạo ra các vấn đề khi sử dụng' https'. –

1

URL mà không bắt đầu bằng / được giải thích tương đối so với thư mục trong URL tham chiếu đến chúng. Vì vậy, nếu một trang có URL http://domain.com/docroot/jsps/view.jsp truy cập docroot/css/something.css, trang sẽ tìm kiếm http://domain.com/docroot/jsps/docroot/css/something.css.

Hãy thử sử dụng các đường dẫn như ../css/[filename].css../js/[filename].js. ../ có nghĩa là để đi lên một cấp trong hệ thống phân cấp thư mục.

+0

ya bạn là đúng và tôi đã cố gắng mà too.but không biết tại sao vẫn không làm việc. Xin vui lòng xem ở cuối tôi đã cập nhật câu trả lời của tôi như u suggest.but của nó không làm việc –

5

Thay vì sử dụng <link href="docroot/js/jquery-1.2.6.min.js" type="text/javascript">, bạn có thể sử dụng:

<link href="/js/jquery-1.2.6.min.js" type="text/javascript"> 

Đây là đường dẫn tuyệt đối cho tập tin của bạn, / nghĩa là thư mục docroot. Btw, liferay sử dụng mặc định tải css và file js được định nghĩa trong docroot\WEB-INF\liferay-portlet.xml như thế này:

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

Vì vậy, bạn có thể thay đổi hoặc bao gồm js hoặc css từ các tập tin để tải cho tiêu đề.

+0

tôi sẽ thêm nhiều hơn thì một css và js ? và nó có nghĩa là gì bởi css và header js? –

+0

tiêu đề css và tiêu đề js sẽ được gọi theo mặc định cho portlet của bạn, bạn không cần phải bao gồm nó một lần nữa –

+0

Xin lỗi? I cant get it !! tôi hỏi rằng css header jss diffrence và js header và cùng với js footer và footer css –

2

Như @Taiki chỉ Trong liferay có một tập tin mô tả xml cho phép bạn thiết lập các css và javascript sử dụng trong portlet trong hoặc header hoặc footer cổng

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> 

Nếu bạn đặt này trong thư mục WEB-INF điều chỉnh các đường dẫn cho phù hợp và bạn tốt để đi không cần phải tham khảo các tập tin theo quan điểm của bạn

+0

ya..đã nhận nó ..đến u và @Taiki –

Các vấn đề liên quan