Discussion :

[fanfouer]

Bonjour à tous,

A la suite de ce topic ouvert il y a deux jours je cherche maintenant à charger les éléments d'une map HTML en AJAX (document JSON contenant chaque zone de la map) depuis un service côté serveur puis de l'ajouter au DOM en utilisant $.append() de jQuery.

J'ai ce code en HTML que le serveur me donne au chargement de la page :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="container">
  <map name="map" id="map"/>
 
  <img src="monImage.png" usemap="#map" alt=""/>
</div>

La map est donc vide de base.

Ensuite j'ai le code javascript suivant qui s’exécute dès que le DOM est totalement prêt et après avoir chargé la liste des polygones de la map (data provient du décodage JSON et comporte les données attendues) :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$.each (data, function (k, v){
	$("#map").append('<area shape="'+v.shape+'" coords="'+v.coords+'" href="'+v.href+'" title="'+v.title+'" target="'+v.target+'"/>');
});

Lorsque j'utilise la même map en HTML statique cela fonctionne bien sous IE mais pas avec ma méthode et j'obtiens le résultat joint à ce message (sous FF 4.0 tout fonctionne bien et il en est de même sur les versions antérieures) :
- L'image a une bordure bleue vif, ce qui n'est ni précisé dans le CSS ni ailleurs. Dès que j'enlève l'attribut usemap, la bordure disparait.
- Aucune zone cliquable n'est utilisable, pas de changement de pointeur, etc...

Je pense que cela vient du fait que je complète la map une fois que le DOM est chargé et IE doit mal l'interprêter.
Il faudrait donc essayer de lui dire de "rafraichir" l'arbre mais je ne connais pas de moyens de le faire.

J'utilise IE7 et jQuery 1.5.2
Quelqu'un a une idée d'où cela peut-il venir et comment je peux régler le soucis?

Merci par avance

[Bovino]

A mon avis, c'est surtout dû au fait que IE a du mal à faire un append sur un élément vide.
Essaye en déclarant ton map comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<map name="map" id="map">&nbsp;</map>

[fanfouer]

Merci Bovino de ta réponse et bien essayé mais cela ne donne pas d'effet

[fanfouer]

J'ai trouvé la solution, c'était "tout bête".

Cela venait du javascript, IE supporte assez mal la fonction append() en effet.
Il suffisait d'utiliser html() à la place.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
var html = "";
$.each (data, function (k, v){
	html += '<area shape="'+v.shape+'" coords="'+v.coords+'" href="'+v.href+'" title="'+v.title+'" target="'+v.target+'"/>';
});
 
$("#map").html(html);