JavaScript et CSS ne fonctionnant pas dans mon portlet liferay

Je dois utiliser du JavaScript et du CSS pour mon portlet. J'utilise du jQuery datable pour le tri et un affichage interactif, mais ça ne marche pas.JavaScript et CSS ne fonctionnant pas dans mon portlet liferay

Quelqu'un peut-il me guider là où je fais une erreur?

C'est ma structure de répertoire de docroot où mon JS et CSS sont conservés.

enter image description here

Voici mon fichier view.jsp dans lequel je suis remplir dynamiquement des données.

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

Peut-être qu'il ne trouve pas le CSS et JavaScript? J'ai essayé avec le chemin href=/css/[filename] mais cela ne fonctionne pas alors j'ai donné docroot/css/ [filename].

Merci et salutations Bhavik Kama

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

Source

2012-10-13 Bhavik Kama

essayer 'href = « css/[nom de fichier] » ' –

merci pour la réponse, mais avez essayé that.its ne fonctionne pas.une autre suggestion? –

vérifier html généré, indique-t-il à lieu prévu? pouvez-vous obtenir des fichiers css/js avec l'URL directe? (comme 'http: // domain.com/css/my.css') quelle URL de view.jsp? c'est dans docroot ou dans docroot/other_dir/ou autre_dir? –

@tairi que nous pouvons aussi do.but je suis ma solution juste a chemin aux particuliers js ou css avec les éléments suivants

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

pour d'autres qui ont des problèmes comme celui-ci alors juste récupérer votre css/js fichier avec le <%=request.getContextPath()%>

merci à vous tous.quelque chose vous m'a aidé à y parvenir.

Source

2012-10-13 07:26:12

Cela m'a aidé lorsque j'ai dû ajouter des images à mon portlet. J'ai créé un dossier/img/sous docroot et y ai placé les images. je pouvais les référencer dans mes jsps via CatsAndCode

des thats oh bon ... j'ai aidé quelqu'un atleast –

Par ailleurs,' 'et' '' dans view.jsp 'd'un portlet? Ce n'est pas juste! Et cette approche pourrait créer des problèmes lors de l'utilisation de' https'. –

URL qui ne commence pas par / sont interprétées par rapport au répertoire dans l'URL qui les références. Donc, si une page avec l'URL http://domain.com/docroot/jsps/view.jsp accède à docroot/css/something.css, elle recherchera http://domain.com/docroot/jsps/docroot/css/something.css. Essayez des chemins comme ../css/[filename].css et ../js/[filename].js. ../ signifie monter d'un niveau dans la hiérarchie des répertoires.

Source

2012-10-13 06:51:18 Barmar

ya vous avez raison et j'ai essayé cela aussi.mais je ne sais pas pourquoi toujours ne fonctionne pas.veuillez voir à la fin j'ai mis à jour ma réponse comme vous suggéré.son ne fonctionne pas –

Au lieu d'utiliser <link href="docroot/js/jquery-1.2.6.min.js" type="text/javascript">, vous pouvez utiliser:

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

Ceci est le chemin absolu de votre fichier, le / signifie que le dossier docroot. BTW, Liferay utilisation par défaut le chargement et le fichier css js qui est défini dans docroot\WEB-INF\liferay-portlet.xml comme ceci:

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

Vous pouvez modifier ou inclure js ou css de ces fichiers à charger pour en-tête.

Source

2012-10-13 07:00:43

dois-je ajouter plus d'un css et js ? et qu'est-ce que cela signifie en tête css et en-tête js? –

header css et header js seront appelés par défaut à votre portlet, vous n'avez pas besoin de l'ajouter à nouveau –

Désolé, je ne peux pas l'obtenir !! Je demande quelle est la différence bewen header css et header js et même avec footer js et footer css –

Comme @Taiki indique dans Liferay il y a un fichier descripteur XML qui vous permet de définir le javascript et css utilisé dans le portlet dans l'en-tête de portail ou pied de page

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>

Si vous placez dans votre WEB-INF modifier les chemins en conséquence et vous êtes bon pour aller pas besoin de référencer les fichiers dans votre vue

Source

2012-10-14 10:04:07

ya..i l'ai eu..thnks à u et @Taiki –

JavaScript et CSS ne fonctionnant pas dans mon portlet liferay

Répondre

Questions connexes