Discussion :

[psykoleouf]

Bonjour,

Je dois recharger une image et sa map à intervalle régulier via Jquery.

Code html :

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
<!-- le src de l'image est mise à jour via la fonction javascript "reloadImage" -->
<img id="image" src="/SVGImageBuilderServlet' />" usemap="#idMap" alt="" />
<div id="divMap">
<!-- Le code HTML de la map "idMap" est placé dans cette div via la fonction javascript "reloadMap" -->
</div>


<script type="text/javascript" src="<c:url value='/scripts/test.js' />"></script>

<script type="text/javascript">
$(document).ready(function(){ 	
        test.reloadImage();
	test.reloadMap();
}); 
</script>

Code javascript de test.js :

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
 
// namespaces
if (test === undefined) var test = {};
 
test = function() {
 
	/**
	 * Provoque le rechargement de l'image
	 */
	 var reloadImage = function() {
		var img = $("#image");
                // imgUrl pointe vers une servlet qui génère un svg et transcode en jpg
		var imgUrl = img.attr("src");
		imgUrl = test.utils.setUrlParam(imgUrl, "goal", "reloadImg");
		imgUrl = test.utils.setUrlParam(imgUrl, "timestamp", new Date().getTime());
		img.attr("src", imgUrl);
	};
 
	/**
	 * Recharge la map
	 */
	var reloadMap = function() {
		var img = $("#image");
                // Pour le rechargement de la map, on utilise la même servlet mais avec un goal différent. 
                // La servlet nous renvoi le code html de la map
		var imgUrl = img.attr("src");
		imgUrl = test.utils.setUrlParam(imgUrl, "goal", "reloadMap");
		imgUrl = test.utils.setUrlParam(imgUrl, "timestamp", new Date().getTime());
		$("#divMap").load(imgUrl, {goal : "reloadMap"});
 
	};
return {
		reloadImage:reloadImage,
		reloadMap:reloadMap,
	};
}();

J'appelle les deux fonctions reloadImage et reloadMap :
- après un $(document).ready(function() au chargement de ma page
- dans un callback d'une progressBar
- sur l'évènement click de cette même progressBar

Au premier chargement de la page, la map est bien prise en compte.
Le problème se situe sur les rechargements "Ajax" de la progressBar. La nouvelle map n'est pas prise en compte dans le navigateur alors qu'elle est bien à jour dans le code généré. Le DOM est donc bien modifié mais le navigateur ne le prend pas en compte. Je penche pour un espèce de problème de cache.

J'ai donc tenté les choses suivantes sans succès :
- désactivation du cache via FireBug
- génération d'un id unique pour le usemap de l'image et le nom de la map pour forcer l'image à reloader sa map
- reloader d'abord la map puis l'image

Peut être que je ne comprend pas très bien les mécanismes de chargement des image map mais là je n'ai plus de piste

Quelqu'un ?

[SpaceFrog]

tu attribues le map direct en innerHTML ...
essaye de te faire une petite routine qui passerait pas la creation DOM du map


[edit]
a piroiri il faut aussi reloader l'image pour qu'elle prenne en compte son map ...

[psykoleouf]

Je comprend pas ce que tu veux dire par :
"petite routine qui passerait pas la creation DOM du map"
Tu peux préciser ?

Existe-t-il une technique pour forcer le reload complet d'une image, parce que à part la technique de l'update du src de l'image avec un timestamp, je n'ai rien trouvé d'autre.

Que pensez vous de cette piste : ne charger l'image qu'à la fin du chargement de la map dans le DOM ? C'est possible de faire ca avec Jquery ?

Merci d'avance

[psykoleouf]

J'ai une solution fonctionnant sans reload complet de l'image (que je trouve un lourd juste pour prendre en compte une mise à jour de map).

Extrait de la fonction ReloadMap :

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
 
var reloadMap = function() {
		var img = $("#image");
                // Pour le rechargement de la map, on utilise la même servlet mais avec un goal différent. 
                // La servlet nous renvoi le code html de la map
		var imgUrl = img.attr("src");
		imgUrl = test.utils.setUrlParam(imgUrl, "goal", "reloadMap");
		imgUrl = test.utils.setUrlParam(imgUrl, "timestamp", new Date().getTime());
 
                $("#divMap").load(imgUrl, {goal : "reloadMap"},function() {
			if ($.browser.msie){
				// Pas besoin d'id unique pour la bonne prise en compte
				// de la nouvelle map sous IE
				img.attr("usemap", "#imgMap");
			}else{
				// Sinon on passe par l'utilisation d'un id unique pour l'attribut 
                                // usemap de l'image et name de la map
				var idUnique = new Date().getTime();
				$("#divMap map#imgMap").attr("name","imgMap"+idUnique);
				img.attr("usemap", "#imgMap"+idUnique);
			}
		});
                // l'attribut name et id de la map générée est "imgMap" 
 
	};

J'utilise une fonction en callback du load() qui recharge uniquement l'attribut usemap de l'image et ca suffit.

Merci à SpaceFrog pour son aide via MP

[Macois]

Faut passer en résolu : Done