[DOM] Passage de paramètre à une fonction : echec

Version imprimable

Bonsoir,

Je travaille sur un très modeste site web : http://location.btz.free.fr/

Le menu de gauche est chargé par une fonction Javascript.
En somme, chaque page de mon site charge le menu en appelant cette fonction. Chaque page s'identifie par le paramètre de la fonction ("cuisine", "salon", etc.). Cela me permet de personnaliser le menu en fonction de la page appelante.

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
function import_menu(page)
{
  // A chaque bouton du menu,
  // - on charge le bouton avec le texte souligné si c'est celui de la page appelante
  // - on charge le bouton sans le texte souligné si ce n'est pas celui de la page appelante
  // Ce système permet de savoir sur quelle page on est actuellement : le bouton "cuisine" est souligné, par exemple.
 
  var html_data = "";
 
  if (page == "accueil")
  { html_data += "    <div id=\"div_accueil\">       <a href=\"index.html\">       <img src=\"images/menu/etiquette_accueil_u.png\" />      </a></div>               "; }
  else
  { html_data += "    <div id=\"div_accueil\">       <a href=\"index.html\">       <img src=\"images/menu/etiquette_accueil.png\" />      </a></div>               "; }
 
  if (page == "cuisine")
  { html_data += "    <div id=\"div_cuisine\">       <a href=\"cuisine.html\">     <img src=\"images/menu/etiquette_cuisine_u.png\" />      </a></div>               "; }
  else
  { html_data += "    <div id=\"div_cuisine\">       <a href=\"cuisine.html\">     <img src=\"images/menu/etiquette_cuisine.png\" />      </a></div>               "; }
 
  if (page == "salon")
  { html_data += "    <div id=\"div_salon\">         <a href=\"salon.html\">       <img src=\"images/menu/etiquette_salon_u.png\" />        </a></div>               "; }
  else
  { html_data += "    <div id=\"div_salon\">         <a href=\"salon.html\">       <img src=\"images/menu/etiquette_salon.png\" />        </a></div>               "; }
 
  if (page == "chambres")
  { html_data += "    <div id=\"div_chambres\">      <a href=\"chambres.html\">    <img src=\"images/menu/etiquette_chambres_u.png\" />     </a></div>               "; }
  else
  { html_data += "    <div id=\"div_chambres\">      <a href=\"chambres.html\">    <img src=\"images/menu/etiquette_chambres.png\" />     </a></div>               "; }
 
  if (page == "salle_eau")
  { html_data += "    <div id=\"div_salle_eau\">     <a href=\"salles_eau.html\">  <img src=\"images/menu/etiquette_salle_eau_u.png\" />    </a></div>               "; }
  else
  { html_data += "    <div id=\"div_salle_eau\">     <a href=\"salles_eau.html\">  <img src=\"images/menu/etiquette_salle_eau.png\" />    </a></div>               "; }
 
  if (page == "calendrier")
  { html_data += "    <div id=\"div_calendrier\">    <a href=\"calendrier.php\">   <img src=\"images/menu/etiquette_calendrier_u.png\" />   </a></div>               "; }
  else
  { html_data += "    <div id=\"div_calendrier\">    <a href=\"calendrier.php\">   <img src=\"images/menu/etiquette_calendrier.png\" />   </a></div>               "; }
 
  if (page == "tarifs")
  { html_data += "    <div id=\"div_tarifs\">        <a href=\"tarifs.html\">      <img src=\"images/menu/etiquette_tarifs_u.png\" />       </a></div>               "; }
  else
  { html_data += "    <div id=\"div_tarifs\">        <a href=\"tarifs.html\">      <img src=\"images/menu/etiquette_tarifs.png\" />       </a></div>               "; }
 
  if (page == "carte")
  { html_data += "    <div id=\"div_carte\">         <a href=\"carte.html\">       <img src=\"images/menu/etiquette_carte_u.png\" />        </a></div>               "; }
  else
  { html_data += "    <div id=\"div_carte\">         <a href=\"carte.html\">       <img src=\"images/menu/etiquette_carte.png\" />        </a></div>               "; }
 
  if (page == "contacts")
  { html_data += "    <div id=\"div_contacts\">      <a href=\"contacts.html\">    <img src=\"images/menu/etiquette_contacts_u.png\" />     </a></div>               "; }
  else
  { html_data += "    <div id=\"div_contacts\">      <a href=\"contacts.html\">    <img src=\"images/menu/etiquette_contacts.png\" />     </a></div>               "; }
 
  if (page == "partenaires")
  { html_data += "    <div id=\"div_partenaires\">   <a href=\"partenaires.html\"> <img src=\"images/menu/etiquette_partenaires_u.png\" />  </a></div>               "; }
  else
  { html_data += "    <div id=\"div_partenaires\">   <a href=\"partenaires.html\"> <img src=\"images/menu/etiquette_partenaires.png\" />  </a></div>               "; }
 
  document.write(html_data);
  //alert(page);
}

Exemple d'appel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD> 
        <META http-equiv="Content-Type" Content="text/html; charset=ISO-8859-1">
        [...]
        <script src="load_data.js" type="text/javascript"></script>
  </HEAD>
  <BODY>
 
<TABLE width="100%" border="0"><TR valign="top">
<TD width="150px">
    <script type="text/javascript">import_menu("cuisine");</script>
</TD>
<TD>
[...]

Mon problème est relativement simple : j'ai un problème de passage de paramètre entre la page HTML et la page Javascript.

Comme on peut le voir sur le site, certains appels ne posent aucun soucis : depuis les pages "accueil", "calendrier", "tarifs", "contacts" et "partenaires". Si on utilise ces liens, alors le menu change et souligne la page courante dans le menu.
Mais si on utilise les autres liens :
- ca fonctionne sous IE7
- ca ne fonctionne plus sous Firefox2 (la valeur du paramètre est "undefined")

Je ne comprends pas ce qu'il se passe... C'est comme si ca dépendait de la valeur du paramètre :aie:

Avez-vous une idée, s'il vous plait ?

20/10/2007, 02h05
lvr

Je teste à l'instant et je ne vois pas vraiment de problème !
Je bosse avec Firefox 2.0 !
20/10/2007, 02h26
Nyphel

C'est à dire que à chaque fois que vous cliquez un lien du menu, celui-ci est alors souligné ? Pour les 10 liens du menu ?

Pour ma part seuls certains d'entre eux fonctionnent correctement.
Peut-être est-ce mon Firefox qui bug un peu... Un plug-in, par exemple...

Quelqu'un d'autre pourrait confirmer, s'il vous plait ?

Merci pour votre aide :)
20/10/2007, 02h35
lvr

Yep, vous m'avez bien entendu. Ca fonctionne pour les 10 !
20/10/2007, 02h38
lvr

Par contre, la technique du "document.write" n'est plus très tendance !!! :roll: Il y a moyen de faire beaucoup mieux de manière très semblable. Cf la FAQ (X)HTML.
20/10/2007, 08h35
Nyphel

D'accord, merci !
Je regarderai ca dès que possible, bien que ca me surprenne :D
20/10/2007, 19h00
Nyphel

Bonsoir,

Je ne trouve pas la suggestion appropriée dans la FAQ (X)HTML. De quoi me parliez-vous ? :?
20/10/2007, 21h00
lvr
Sans vouloir refaire tout un cours sur le DOM (pour lequel je n'ai de tout façon pas le niveau), sache que le DOM c'est le Document Object Model.
C'est une modélisation orientée objet de ta page HTML.

Ton document.write(...) c'est déjà du DOM puisque que tu dis à l'objet document d'écrire un certain texte. Simplement se contenter d'instructions document.write(...) donne un résultat plutôt statique puisque que ce que tu demandes d'écrire sera écrit au moment où tu le demandes à la suite du reste.

En DOM tu écris ce que tu veux où tu le veux et surtout quand tu le veux !

Imagine que ton menu soit dans un <DIV id="divMenu">, et bien à tout moment, tu peux aller ajouter du contenu à ton menu en écrivant:
Code:

1 2 var menu=document.getElementById("divMenu"); menu.innerHTML+="<a href='mapage.html'>Voir ma page</a>";
Et ça c'est pas encore très DOM ;)
Le mieux serait
Code:

1 2 3 4 5 6 var menu=document.getElementById("divMenu"); var a=document.createElement("a"); a.href='mapage.html'; a.innerHTML='Voir ma page'; a.class=... menu.appendChild(a);
DOM + javascript c'est en fait la base de tout ce qui est DynamicHTML, Ajax, ... Et tout ça c'est tendance et surtout efficace.

Pour plus d'info regarde ici sur Developpez.com.
Je te conseille aussi http://developer.mozilla.org/en/docs/Main_Page, une bonne source d'info sur tout ce qui tourne autour de ces domaines.
20/10/2007, 23h11
Nyphel

Bonsoir,

Merci pour ces précisions :).
J'utilise fréquemment l'approche DOM et les sections <DIV> pour gérer du contenu dynamique avec du Javascript... Mais dans le cas présent cela ne m'est pas nécessaire ;)

En effet, je souhaite simplement charger un menu flottant positionné en CSS de façon absolue. Qui plus est, le contenu de ce menu est statique, défini, et non modifié. Par conséquent je pense qu'un simple document.write est amplement suffisant :)