JavaScript et CSS ne fonctionne pas dans mon liferay portlet

J'ai utiliser un peu de JavaScript et de CSS pour ma portlet. Je suis à l'aide de certains datable de jQuery pour le tri et certains d'affichage interactif, mais cela ne fonctionne pas.

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

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

Voici mon point de vue.fichier jsp dans qui suis-remplissage des données de façon dynamique.

<%@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 peut pas localiser le fichier CSS et JavaScript?
J'ai essayé avec le chemin href=/css/[filename] mais cela ne fonctionne pas donc 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">

essayez href="css/[filename]"
merci pour la réponse,mais ont tenté de la faire.sa ne fonctionne pas.toute autre suggestion?
vérifier le code html généré, est-il point à l'endroit prévu? vous pouvez obtenir des fichiers css/js direct avec l'url ? (comme http://domain.com/css/my.css) l'url de la vue.jsp ? c'est à l'intérieur du point d'entrée unique ou à l'intérieur de docroot/other_dir/ ou other_dir ?
c'est le lien que je reçois sur ma source de html dans le navigateur et quand suis-cliquez sur celle-alors, c'est la page avec l'erreur que j'ai obtenu"La page que vous essayez de vue ne peut pas être affichée car elle utilise un invalide ou non pris en charge format de compression."
mon point de vue.jsp est à l'intérieur de docroot/jsp/vue.jsp
Cette erreur sonne comme il y a un problème avec la configuration de votre serveur, c'est envoyer un mauvais Content-Encoding.
désolé?je ne pourrais pas obtenir de vous..pouvez-vous m'expliquer?

InformationsquelleAutor User 1531343 | 2012-10-13

5

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">
```
C'est le chemin absolu de votre fichier, l' / signifie la docroot dossier.
Btw, liferay utiliser la valeur par défaut de chargement des css et le fichier 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>
```
De sorte que vous pouvez modifier ou d'inclure js ou css à partir de ces fichiers à charger pour l'en-tête.
- dois-je ajouter plus d'un css et js? et que signifie dirigé par la css et de l'en-tête de js?
- en-tête de la css et de l'en-tête js sera appelé par défaut de votre portlet, vous n'avez pas besoin de l'inclure à nouveau
- Désolé?je ne peux pas l'obtenir!! je demande quelle est la diffrence bewen en-tête de la css et de l'en-tête de js et même avec le pied de page js et pied de page css
- l'en-tête css à charger votre css par défaut, l'en-tête js pour charger votre script javascript par défaut de l'en-tête de votre portlet de la page et le pied de page de css et de js est à la charge sur le pied de page. I. E, vous pouvez ajouter quelques init js de votre en-tête de js, et quelque chose comme $(document).ready(function()) à votre pied de page js. C'est facultatif
InformationsquelleAutor Ta Duy Anh
4

@tairi également que nous pouvons faire.mais j'ai eu ma solution a juste chemin vers le particulier js ou css avec le suivant
```
<script src="<%=request.getContextPath()%>/js/jquery-1.2.6.min.js" type="text/javascript"></script>
```
pour les autres qui ont des problèmes comme cela, puis il suffit de récupérer votre css/js fichier avec l' <%=request.getContextPath()%>

grâce à vous tous.de toute façon vous m'a aidé à atteindre cet objectif.
- Cela m'a aidé quand j'en avais besoin pour ajouter une image à mon portlet. J'ai créé un /img/ dossier en vertu du point d'entrée unique et de mettre les photos là. Je pourrais référence dans ma jsp via <img alt="Redirection" src="<%=request.getContextPath() %>/img/ajax-loader.gif" />
- oh c'est bon...au moins j'ai aidé quelqu'un
- Par la voie, <html> et <DOCTYPE> dans view.jsp d'un portlet? c'est juste pas le droit! Et cette approche pourrait créer des problèmes lors de l'utilisation de https.
InformationsquelleAutor User 1531343

Comme @Taiki indique Dans liferay il y a un xml descripteur de fichier qui vous permet de définir le css et le javascript utilisé dans la portlet dans le portail de l'en-tête ou le 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 placer dans votre WEB-INF ajuster les chemins en conséquence et vous êtes bon pour aller pas besoin de faire référence à des fichiers de votre vue

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

InformationsquelleAutor Shaun Hare

1

Url qui ne commencent pas par / est interprété relativement au répertoire dans l'URL qui y fait référence. Donc, si une page avec l'URL http://domain.com/docroot/jsps/view.jsp accède docroot/css/something.css, il va chercher les http://domain.com/docroot/jsps/docroot/css/something.css.

Essayez d'utiliser les chemins comme ../css/[filename].css et ../js/[filename].js. ../ moyens pour remonter d'un niveau dans la hiérarchie des répertoires.
- ya vous avez raison et j'ai essayé aussi.mais je ne sais pas pourquoi cela ne fonctionne toujours pas.veuillez voir à la fin j'ai mis à jour ma réponse u comme suggéré.mais sa ne fonctionne pas
InformationsquelleAutor Barmar

Vous devez vous connecter pour publier un commentaire.