Insertion calendrier JQuery/JS dans une page JSP

Version imprimable

Bonjour,

Je souhaite insérer dans une de mes jsp ce calendrier : http://arshaw.com/fullcalendar/

Mon soucis est que j'obitens une page blanche avec ma jsp, alors que le même code (à l'exception de la ligne

Code:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

) dans une page html fonctionne très bien !

Dans chrome, avec le gestionnaire de ressources, je vois ceci en rouge au début de chacun de mes fichiers .js inclus dans ma page :

Citation:

fullcalendar.min.js:-1Resource interpreted as Script but transferred with MIME type text/html.
fullcalendar.min.js:2Uncaught SyntaxError: Unexpected token <

Même si je retire la partie contentType de ma première ligne, la première erreur disparait mais la deuxième reste et j'ai toujours un page blanche.

Voici le code de ma jsp:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel='stylesheet' type='text/css' href='js/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='js/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='js/jquery-1.5.2.min.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.8.11.custom.min.js'></script>
<script type='text/javascript' src='js/fullcalendar.min.js'></script>
<script type='text/javascript'>
        try 
        {
                $(document).ready(function()
                {
                        var date = new Date();
                        var d = date.getDate();
                        var m = date.getMonth();
                        var y = date.getFullYear();
                        
                        $('#calendar').fullCalendar(
                        {
                                editable: true,
                                events: [
                                        {
                                                title: 'All Day Event',
                                                start: new Date(y, m, 1)
                                        },
                                        {
                                                title: 'Long Event',
                                                start: new Date(y, m, d-5),
                                                end: new Date(y, m, d-2)
                                        },
                                        {
                                                id: 999,
                                                title: 'Repeating Event',
                                                start: new Date(y, m, d-3, 16, 0),
                                                allDay: false
                                        },
                                        {
                                                id: 999,
                                                title: 'Repeating Event',
                                                start: new Date(y, m, d+4, 16, 0),
                                                allDay: false
                                        },
                                        {
                                                title: 'Meeting',
                                                start: new Date(y, m, d, 10, 30),
                                                allDay: false
                                        },
                                        {
                                                title: 'Lunch',
                                                start: new Date(y, m, d, 12, 0),
                                                end: new Date(y, m, d, 14, 0),
                                                allDay: false
                                        },
                                        {
                                                title: 'Birthday Party',
                                                start: new Date(y, m, d+1, 19, 0),
                                                end: new Date(y, m, d+1, 22, 30),
                                                allDay: false
                                        },
                                        {
                                                title: 'Click for Google',
                                                start: new Date(y, m, 28),
                                                end: new Date(y, m, 29),
                                                url: 'http://google.com/'
                                        }
                                ]
                        });
                        
                });
        } catch (e) {
            console.log (e.message);    //this executes if jQuery isn't loaded
        }
</script>
<style type='text/css'>
 
	body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}
 
	#calendar {
		width: 100%;
		margin: 0 auto;
		}
 
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

Merci d'avance pour votre aide.

06/08/2011, 17h15
Viish

Je viens de remarquer quelque chose d'étrange : le code affiché dans l'explorateur de ressources par Chrome comme étant le contenu de mes .js est en fait celui de la page d'accueil de mon application (le code de la jsp affiché lors d'une requête sur "/").

Quelqu'un saurait d'où cela peut-il venir ?
06/08/2011, 17h20
Viish

Même chose avec firebug, le contenu de tout ce qui passe par src"..." est en fait le code source de ma page d'accueil. Je suppose donc qu'il s'agit là d'une erreur de configuration de Tomcat ou bien de mon projet.

Quelqu'un saurait-il m'éclairer là dessus s'il vous plait ? Je débute en JEE...
07/08/2011, 22h04
hhfr

à vue de nez
Salut, à vue de nez, je vois deux possibilités :
- Premiere possibilité :
  Le navigateur ne trouve pas le fichier relatif à ton script :
  fullcalendar.min.js
  comme le serveur ne trouve pas le fichier en question, il retourne une page html d'erreur générique, ce qui te génère les messages d'erreurs suivants :
  Code:
  
  1 2 fullcalendar.min.js:-1Resource interpreted as Script but transferred with MIME type text/html. fullcalendar.min.js:2Uncaught SyntaxError: Unexpected token <
  Vérifie bien la présence des fichiers (ainsi que des autres fichiers nécessaires à l'exécution des scripts et cela devrait fonctionner.
  
  Pour vérifier la présence ou l'absence du fichier, tu peux taper dans ton navigateur l'url de ces fichiers, ici :
  
  Code:
  
  http://tonip:tonport/applicationname/js/fullcalendar.min.js
  
  Enfin, ces fichiers devraient être dans ton répertoire web de ton application dans le war du coté serveur, au même endroit que tes jsps en fait, mais dans un répertoire "js".
- Autre possibilité, la redirection inconditionnel des requêtes vers l'url "/", cela serait dût à un mauvais paramétrage du fichier de déploiement.
  Montre nous ton fichier web.xml qui se trouve dans ton répertoire "WEB-INF" de ton application.
Voilà en espérant que cela t'aura aidé. Tiens nous au courant
08/08/2011, 18h54
Viish

Salut,

Merci pour ta réponse.
En effet je pense que l'url d'accès à mon fichier était pas bon.

C'est vraiment con des fois les erreurs pénibles...