私の生涯ポートレットでJavaScriptとCSSが動作しない

私のポートレットにはJavaScriptとCSSを使用する必要があります。並べ替えと対話式表示のためにいくつかのdatable jQueryを使用していますが、動作しません。私の生涯ポートレットでJavaScriptとCSSが動作しない

誰かが私をミスをしている場所に案内できますか？

これは私の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]を与えました。 /で始まらない

おかげで、氏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/[ファイル名]を」 ' –

返事をありがとうが、that.itsは動作していない試みました。他の提案？ –

チェックが生成されたHTML、期待された場所を指していますか？あなたは直接urlでCSS/jsファイルを入手できますか？（ 'http：// domain.com/css/my.css'のように）view.jspのurl？それはdocrootの中か、docroot/other_dir /またはother_dirの中にありますか？ –

@tairi <%=request.getContextPath()%>

ありがとうございました。あなたはこれを達成するために何とか手伝ってくれました。

出典

2012-10-13 07:26:12

これは、ポートレットにいくつかのイメージを追加する必要があるときに役立ちました。 docrootの下に/ img/folderを作成してそこに置いています。私は、少なくとも私はview.jsp 'に' ''ところで、誰か – CatsAndCode

がああ良いthatsの

を助け 'と...「/> –

のURL @よろしく Bhavikカーマ

はそれらを参照するURL内のディレクトリに相対的な解釈されます。したがって、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のようなパスを試してみてください。 ../は、ディレクトリ階層の1つのレベルに上がることを意味します。

出典

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フォルダを意味し、あなたのファイルの絶対パスです。ところで、このようdocroot\WEB-INF\liferay-portlet.xmlで定義されているLiferayのデフォルトを使用ローディングCSSやJSファイル：

<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を含めることができます。また、我々は、私は私の解決策は、まさにこのような問題を抱えている他の人のために、次の

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

で特定のJSやCSSへのパスを与えた後、ちょうどあなたのcss/jsを取得しまったdo.butでき

出典

2012-10-13 07:00:43

私は複数のCSSとjsを追加しなければならない？ headed cssとheader jsはどういう意味ですか？ –

ヘッダーcssとヘッダーjsがデフォルトでポートレットに呼び出されますが、再度組み込む必要はありません –

申し訳ありませんが、私はそれを入手できません！私はdiffrence bewenヘッダーCSSとヘッダーjsとフッターjsとフッターcss –

@Taikiは、Liferayので示したようポートレットで使用されるCSSやJavaScriptを設定することを可能にするXML記述子ファイルは、ポータルのヘッダやフッタのいずれかであり

Liferayをポートレット。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

ya..i得た.thnksと@Taiki –

私の生涯ポートレットでJavaScriptとCSSが動作しない

答えて

関連する問題