Bonjour à tous,

Mon jsf contient une image que je voudrais annoter grâce à un plugin javascript. J'ai déjà testé le plugin par l'insertion de l'image dans une page html et il fonctionne bien. Mais lorsque je crée mon projet seam et essaie de refaire le même travail dans un jsf, j'arrive pas à annoter l'image. J'ai bien vérifié en inspectant la page depuis le navigateur google que les fichiers js et css sont bien inclus, mais on m'affiche l'erreur suivante :
Uncaught TypeError: Object #<Object> has no method 'annotateImage'.

Voilà le code de mon jsf :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
      xmlns:a="http://richfaces.org/a4j">
<head>
<title></title>
<!--  <style type="text/css" media="all">@import "css/annotation.css";</style> -->
<link type="text/css" rel="stylesheet" href="resources/css/annotation.css"/>
<script type="text/javascript" src="resources/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui-1.7.1.js"></script>
<script type="text/javascript" src="resources/js/jquery.annotate.js"></script>
<script language="javascript">
window.onload=function() {
	$("#toAnnotate").annotateImage({
		editable: true,
		useAjax: false,
		notes: [ { "top": 286,
				   "left": 161,
				   "width": 52,
				   "height": 37,
				   "text": "Small people on the steps",
				   "id": "e69213d0-2eef-40fa-a04b-0ed998f9f1f5",
				   "editable": false },
				 { "top": 134,
				   "left": 179,
				   "width": 68,
				   "height": 74,
				   "text": "National Gallery Dome",
				   "id": "e7f44ac5-bcf2-412d-b440-6dbb8b19ffbe",
				   "editable": true } ]
	});
};
 
</script>
</head>
<body>
<div>
			<img id="toAnnotate" src="resources/images/trafalgar-square-annotated.jpg" alt="Trafalgar Square" width="600" height="398" />
		</div>
</body> 
</html>
Merci d'avance.