JavaScript e CSS non funzionano nel portlet liferay

Devo usare JavaScript e CSS per il mio portlet. Sto usando alcuni jQuery databili per l'ordinamento e alcuni display interattivi, ma non funziona.JavaScript e CSS non funzionano nel portlet liferay

Qualcuno può guidarmi dove sto facendo un errore?

Questa è la mia struttura di directory di docroot in cui sono conservati i miei JS e CSS.

enter image description here

Ecco il mio file view.jsp in cui sto riempiendo i dati in modo dinamico.

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

Forse non è possibile individuare il codice CSS e JavaScript? Ho provato con il percorso href=/css/[filename] ma anche questo non funziona quindi ho dato docroot/css/ [filename].

Grazie e saluti 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">

fonte

2012-10-13 Bhavik Kama

provare 'href = "css/[nome del file]" ' –

grazie per la risposta, ma ho provato che.non funziona.ogni altro suggerimento? –

controllo generato html, indica il luogo previsto? puoi ottenere file css/js con url diretto? (come 'http: // domain.com/css/my.css') quale URL del view.jsp? è all'interno di docroot o all'interno di docroot/other_dir/o other_dir? –

@tairi che anche noi possiamo do.but ho ottenuto la mia soluzione appena dato via alle particolari js o CSS con la seguente

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

per gli altri che hanno problema come questo poi basta recuperare la css/js file con il <%=request.getContextPath()%>

grazie a tutti voi. In qualche modo mi avete aiutato a raggiungere questo obiettivo.

fonte

2012-10-13 07:26:12

Questo mi ha aiutato quando ho avuto bisogno di aggiungere alcune immagini al mio portlet. Ho creato una cartella/img/sotto docroot e ho messo le immagini lì. ho potuto riferimento nella mia JSP via – CatsAndCode

thats oh buon ... atleast ho aiutato qualcuno –

A proposito,' 'e' 'in' view.jsp 'di un portlet? Non è giusto! E questo approccio potrebbe creare problemi quando si usa' https'. –

URL che non inizia con / vengono interpretati in relazione alla directory nell'URL che li fa riferimento. Quindi se una pagina con l'URL http://domain.com/docroot/jsps/view.jsp accede a docroot/css/something.css, cercherà lo http://domain.com/docroot/jsps/docroot/css/something.css.

Provare a utilizzare percorsi come ../css/[filename].css e ../js/[filename].js. ../ significa salire di un livello nella gerarchia di directory.

fonte

2012-10-13 06:51:18 Barmar

hai ragione e l'ho provato anche io.ma non so perché ancora non funziona.piace vedere alla fine ho aggiornato la mia risposta come hai suggerito.ma il suo non funzionante –

Invece di usare <link href="docroot/js/jquery-1.2.6.min.js" type="text/javascript">, è possibile utilizzare:

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

Questo è il percorso assoluto per il file, il / significa la cartella docroot. Btw, Liferay css carico di difetto di uso e il file js che è definito in docroot\WEB-INF\liferay-portlet.xml come questo:

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

modo da poter cambiare o includere js o CSS a questi file da caricare per l'intestazione.

fonte

2012-10-13 07:00:43

devo aggiungere più di un css e js ? e cosa significa per capo css e header js? –

header css e header js saranno chiamati per impostazione predefinita sul tuo portlet, non è necessario includerlo di nuovo –

Scusa? Non riesco a trovarlo !! sto chiedendo che cosa è la diffrence bewen header css e header js e lo stesso con footer js e footer css –

Come @Taiki indica In Liferay c'è un file descrittore XML che permette di impostare il CSS e JavaScript utilizzato nel portlet sia l'intestazione o piè di pagina portale

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>

Se si colloca questo nel vostro WEB-INF regolare i percorsi di conseguenza e vi sono buone per andare non c'è bisogno di fare riferimento ai file nella vista

fonte

2012-10-14 10:04:07

ya..ho capito ... grazie a te e @Taiki –

JavaScript e CSS non funzionano nel portlet liferay

risposta

Problemi correlati