Appel d'une fonction Javascript dans le code HTML

Bonjour à tous,

J'ai un problème avec des fonctions javascript qui ne sont pas prises en compte sur IE7 alors qu'elles fonctionnent bien sur Firefox.

Il s'agit des fonctions déplier et replier que vous trouverez dans l'onglet Thème de l'application suivante : http://cartographie.bretagne-environnement.org/

Voici le passage du Template qui fait appel à ces fonctions :

<a href="javascript:expandAll('layersroot');">{t}expand tree{/t}</a> -
<a href="javascript:closeAll('layersroot');">{t}closetree{/t}</a><br/>

et les fonctions javascripts :

  function expandAll(id) {
  var mydiv = document.getElementById(id);
  var divs = mydiv.getElementsByTagName('div');
  var key;
  
  openNodes = new Array();
  
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.display = 'block';
    var nid = divs[i].id;
    openNodes.push(nid.substr(2));
    key = document.getElementById('x' + nid);
    if (key) replacePic(key, 'plus', 'minus');
  }
 
  writeOpenNodes(true);
}
 
function closeAll(id) {
  var mydiv = document.getElementById(id);
  var divs = mydiv.getElementsByTagName('div');
  var key;
  
  for (var i = 0; i < divs.length; i++) {    
    key = document.getElementById('x' + divs[i].id);
    if (key) replacePic(key, 'minus', 'plus');
      
    if (divs[i].getAttribute('id')) {
        divs[i].style.display = 'none';    
    }
  }
 
  openNodes = new Array();
  writeOpenNodes(true);
}

Pensez-vous que ce problème vienne du code Javascript ou HTML? Si oui, avez-vous une idée sur la manière pour rendre ces fonctions utilisables avec IE7?

Désolé, si ma question semble simple, mais mes connaissances en javascript et html sont minimes.
Erwann[/i][/i][/i][/i][/i]
Modifié par erwann (22 May 2008 - 15:19)

Bonjour et bienvenue
le salon DOM, JavaScript est plus adapté à ta demande > Sujet déplacé
Modifié par Hermann (22 May 2008 - 15:42)

Bonjour erwann,

Cela fonctionne sous IE7 et IE6 en tout cas chez moi...
Un problème de cache peut-être ?

Cdt,
Sylvain

Merci pour votre réponse.
Mais alors là je ne comprends pas du tout pourquoi ces fonctions fonctionnent chez vous!

J'ai testé de plusieurs ordinateurs différents et à chaque fois avec IE6 ou 7 les fonctions déplier et rplier ne fonctionnent pas.
D'ailleurs les infobulles n'ont plus (qui sont également générées par du code javascript).

Et, ce qui est très étonnant c'est qu'il y'a un autre site http://cartographie.bretagne-environnement.org/eolien.php
qui fonctionne de la même façon, et qui utilise les mêmes codes javascript et html, sur lequel les fonctions déplier/replier fonctionnent très bien sur IE.

Erwann
Modifié par erwann (22 May 2008 - 16:30)

Je viens de trouver la solution. Dans le template de la page j'ai supprimer ces trois lignes

<input type="hidden" name="X" id="X" value="" />
<input type="hidden" name="Y" id="Y" value="" />
<input type="hidden" name="actif" id="actif" value="0" />

Pourriez-vous me dire ce qu'elles signifient?
Modifié par erwann (22 May 2008 - 16:57)

...elles signifient qu'un formulaire envoie des variables "invisibles" (non-déterminées par le visiteur) nommées X, Y et actif, qui ont pour valeur rien, rien et 0.... Supprimer ces lignes n'est pas une excellente idée : probablement que passer des valeurs vides sert à écraser des valeurs créées précédemment. Faudrait voir à quoi elles servent exactement avant de prendre cette décision

Effectivement, c'est plus prudent.

Et savez pourquoi ces lignes bloquent le code javascript sur Internet Explorer?

C'est ta ligne

<input type="hidden" name="X" id="X" value="" />

qui doit poser problème.

D'après le code de tes fonctions, il doit récupérer (de manière erronée) cet élément au lieu d'un div du menu (qui ont des id de la forme "X...").

Teste simplement en modifiant l'id (mettre par exemple id="XX") de la ligne sus-citée (attention de ne pas toucher à la valeur du name par contre !)

Attention, si tu accèdes par ailleurs à cet élément, il fait aussi modifier sa récupération : mettre un getElementById("XX") là où il y aurait un getElementById("X")

Effectivement, lorsque je laisse les lignes

<input type="hidden" name="Y" id="Y" value="" />

<input type="hidden" name="actif" id="actif" value="0" />

la fonction marche sous IE.

Par contre, je dois modifier le id et le name de la ligne

<input type="hidden" name="X" id="X" value="" />

avec

<input type="hidden" name="XX" id="XX" value="" />

pour que la fonction marche.

Si je ne change que le id, alors, la fonction ne marche pas.

Comment savoir si ces changements ont des répercussions sur d'autres endroits du site ?

Merci encore pour votre précieuse aide.

Erwann

Ha la la... cet IE... En fait, c'est son getElementById() qui merde. Il te remonte l'élément <input> alors qu'il ne devrait pas s'il n'a pas l'id = "x" (x minuscule). Ça, c'est pas bien grave, par contre qu'il te le remonte quand c'est uniquement le name qui a la valeur "X" (et l'id = "XX") ... Là c'est n'importe quoi...
Bon ça c'était un compliment pour Microsoft .

Si tu changes le name de ton input, ça bloque bien le problème mais ça va sans doute impacter sur la page d'après, car ça va changer le nom de ce paramètre qui lui est envoyé. Donc, sauf si ce paramètre est inutile, il ne faut pas toucher à son name.

Pour s'en sortir, j'ai ajouté quelques lignes à tes fonctions, qui devraient bloquer le problème d'IE. Ces 4 lignes sont préfixées par "$$" pour les faire ressortir (mais ne recopie pas ces deux caractères hein )
Et pour l'input, remet le dans l'état initial (name et id = "X")

function expandAll(id) {
  var mydiv = document.getElementById(id);
  var divs = mydiv.getElementsByTagName('div');
  var key;

  openNodes = new Array();

  for (var i = 0; i < divs.length; i++) {
    divs.style.display = 'block';
    var nid = divs[i].id;
    openNodes.push(nid.substr(2));
$$  if (nid!="") {
      key = document.getElementById('x' + nid);
      if (key) replacePic(key, 'plus', 'minus');
$$  }
  }

  writeOpenNodes(true);
}

 
function closeAll(id) {
  var mydiv = document.getElementById(id);
  var divs = mydiv.getElementsByTagName('div');
  var key;

  for (var i = 0; i < divs.length; i++) {    
$$  if (divs[i].id!="") {
      key = document.getElementById('x' + divs[i].id);
      if (key) replacePic(key, 'minus', 'plus');
$$  }

    if (divs[i].getAttribute('id')) {
        divs[i].style.display = 'none';    
    }
  }
  openNodes = new Array();
  writeOpenNodes(true);
}

[/i][/i][/i][/i][/i]
Modifié par chadom (27 May 2008 - 23:07)

Merci beaucoup chadom. Tes lignes de codes rajoutées au JavaScript fonctionnent parfaitement.
Je ne sais pas trop ce qu'elles signifient, mais bon. Il va falloir que je me plonge plus profondément dans le JavaScript...pour comprendre toutes ces subtilités.

Sinon, pour rester dans ces problèmes de compatibilité IE et Firefox, j'ai une autre fonction Javascript qui ne marche pas sous IE.
Il s'agit de l'apparition d'infobulle au passage de la souris. Par exemple, dans l'arborescence de l'onglet Theme de l'application http://cartographie.bretagne-environnement.org/, au passage de la souris sur l'icon orange associée à la couche "Scan 25", il devrait y avoir une définition qui apparaît. Sous Firefox, nikel, sous IE, rien.

Voici la syntaxe dans mon template :

{capture name=glossary}
{ if $element.layerMeta.glossary}
<a href="javascript: void(0);" onmouseover="return overlib({$element.layerId}_glossary, CAPTION, 'D&eacute;finition');"  onmouseout="return nd();">
<img src="{r type=gfx plugin=layers}IconGloss.gif{/r}" alt="info" class="pic"></a>
{/if}
{/capture}

Encore merci ton aide.

Erwann
Modifié par erwann (28 May 2008 - 09:31)

Sans conviction : si le 1er paramètre de la fonction overlib() doit-être une chaine, alors il manque les cotes (des simples pas des doubles) autours de celle-ci :

... overlib([b]'[/b]{$element.layerId}_glossary[b]'[/b], CAPTION ...

Sinon le problème est dans le code de cette fonction, mais si elle vient d'une bibliothèque ça risque d'être complexe...

Merci, le problème est réglé. Il venait du fichier glossary.js