JavaScript y CSS no funcionan en mi portlet liferay

Tengo que usar JavaScript y CSS para mi portlet. Estoy usando datable jQuery para ordenar y algunas pantallas interactivas, pero no funciona.JavaScript y CSS no funcionan en mi portlet liferay

¿Alguien puede guiarme a donde estoy cometiendo un error?

Esta es mi estructura de directorios de docroot donde se guardan mis JS y CSS.

enter image description here

Aquí está mi archivo view.jsp en el que estoy llenando los datos de forma dinámica.

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

¿No puede encontrar el CSS y JavaScript? Lo he intentado con la ruta href=/css/[filename] pero esto tampoco funciona, así que he dado docroot/css/ [filename].

Gracias y Saludos Bhavik Kama

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

Fuente

2012-10-13 Bhavik Kama

tratar 'href = "/ [nombre de archivo] css" ' –

gracias por su respuesta, pero lo he intentado. ¿No funciona? ¿Alguna otra sugerencia? –

comprobar generado html, ¿apunta al lugar esperado? ¿puedes obtener archivos css/js con url directa? (como 'http: // domain.com/css/my.css') ¿qué URL del view.jsp? está dentro de docroot o dentro de docroot/other_dir/u other_dir? –

@tairi que también podemos do.but tengo mi solución justa dio camino a los particulares js o css con la siguiente

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

para otras personas que tienen un problema como éste a continuación, sólo recuperar su css/js archivo con el <%=request.getContextPath()%>

gracias a todos ustedes. De alguna manera me ayudaron a lograr esto.

Fuente

2012-10-13 07:26:12

Esto me ayudó cuando necesité agregar algunas imágenes a mi portlet. Creé una carpeta/img/debajo de docroot y coloqué las imágenes allí. pude hacer referencia a ellos en mis páginas JSP mediante – CatsAndCode

oh eso es bueno ... al menos yo ayudamos a alguien –

Por cierto,' 'y' '' en view.jsp 'de un portlet? que simplemente no es correcto! Y este enfoque podría crear problemas cuando se usa' https'. –

URL que no comience con / se interpretan en relación con el directorio en el URL que hace referencia a ellos. Entonces, si una página con URL http://domain.com/docroot/jsps/view.jsp tiene acceso a docroot/css/something.css, buscará http://domain.com/docroot/jsps/docroot/css/something.css.

Intente utilizar rutas como ../css/[filename].css y ../js/[filename].js. ../ significa subir un nivel en la jerarquía del directorio.

Fuente

2012-10-13 06:51:18 Barmar

ya tienes razón y yo también lo he intentado.pero no sé por qué aún no funciona.por favor, mira al final he actualizado mi respuesta como sugeriste. Pero no funciona –

En lugar de utilizar <link href="docroot/js/jquery-1.2.6.min.js" type="text/javascript">, puede utilizar:

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

Ésta es la ruta absoluta para el archivo, el / significa la carpeta docroot. Por cierto, Liferay uso por defecto de carga css y js que se define en docroot\WEB-INF\liferay-portlet.xml así:

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

para que pueda cambiar o incluir JS o CSS a partir de estos archivos para cargar de cabecera.

Fuente

2012-10-13 07:00:43

debo agregar más de un css y js ? y qué significa con encabezado css y encabezado js? –

header css y header js se llamarán de forma predeterminada a su portlet, no es necesario que lo vuelva a incluir –

¿Lo siento? No puedo obtenerlo. Estoy preguntando cuál es la diferencia entre header css y header js y lo mismo con footer js y footer css –

Como indica @Taiki En liferay hay un archivo descriptor XML que le permite establecer el CSS y JavaScript se utiliza en el portlet en el encabezado o pie de página del portal

liferay portlets.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>

Si coloca esto en su WEB-INF ajustar los caminos en consecuencia y que son buenos para ir sin necesidad de hacer referencia a los archivos en su opinión

Fuente

2012-10-14 10:04:07

ya ... lo tengo ... y tú @Taiki –

JavaScript y CSS no funcionan en mi portlet liferay

Respuesta

Cuestiones relacionadas