rechargement d'une image map en ajax
Bonjour,
Je dois recharger une image et sa map à intervalle régulier via Jquery.
Code html :
Code:
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:
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 ? 8O
