par
Phil93 » 04 mars 2007, 15:45
Bonjour à tous,
J'avais essayé d'intégrer du php dans le javascript sans succès mais j'avoue que je n'ai pas essayé l'inverse.
Insérer du php dans le javascript ???… On nage en pleine science-fiction, là

. PHP est interprété côté serveur, et javascript travaille côté client. Comment serait-il possible d'insérer du php dans le javascript ?!
Sinon, pour ton problème, bien sûr qu'il est résolvable très facilement, et sans que ce soit lourd.
Deux conseils, si tu le permets.
Premier conseil : plutôt que de faire des listes entre crochets (javascript) telles que tu les fais avec ton `menuItems`, il vaut souvent mieux créer des objets, c'est beaucoup plus facile à manipuler, et souvent plus lisible pour le programme.
Je ne sais pas à quoi exactement correspondent tes éléments de liste, dans ce `menuItems` (je parlais de lisibililté, justement), donc mon exemple sera peut-être erroné, mais tu le corrigeras sans problème.
Donc, au lieu de ça :
Code : Tout sélectionner
var menuItems = [
["|Compléter un rapport",""],
["||Premier cycle",""],
["|||1-01","formulaire_rapport.php?id=101"],
["|||1-02","formulaire_rapport.php?id=102"]
]
C'est nettement mieux d'avoir :
Code : Tout sélectionner
var menuItems = [
{label: "|Compléter un rapport", lien: null},
{label: "||Premier cycle", lien""},
{label: "|||1-01", lien: "formulaire_rapport.php?id=101"},
{label: "|||1-02", lien "formulaire_rapport.php?id=102"},
];
Note que les `label` et `lien` que j'utilise n'ont rien de définitif ou de réservé. Tu mets ce que tu veux au lieu de `label` et `lien`.
Note aussi l'utilisation des accolades au lieu des crochets
Un exemple tout de suite pour te dire comment tu facilites et tu éclaircis ton code ensuite : tu veux par exemple t'occuper de ton 3e menus (donc d'indice 2 — 0-start pour les tableaux).
Tu le prends bien sûr en faisant :
C'est maintenant que ça devient intéressant :
Au lieu de faire…
… tu peux faire maintenant :
L'idée de clarté n'apparaît peut-être pas sur une simple ligne, mais sois sûr que lorsque tu en as 2000, avec 500 paramètres, ça compte beaucoup.
Sans compter le fait qu'il n'y a rien de plus facile de se tromper dans une liste. Tu oublies une virgule et tout foire.
Ici, dans un "objet", tu peux même mettre les éléments dans le désordre, ça ne changera rien. Ce que j'ai appelé "label" restera toujours l'attribut "label" de l'élément.
Si j'avais à créer ce menu dans la page par javascript, je pourrais faire :
Code : Tout sélectionner
/*
Pré-requis :
Dans le code HTML en dur que j'ai mis dans mon fichier, j'ai
juste écrit :
<select id="mon-menu-truc"></select>
sans aucun "option"
*/
/* Ma fonction javascript qui va construire les items de menu */
// Je prends d'abord mon menu créé ci-dessus en dur
var monMenu = document.getElementById("mon-menu-truc");
/* Je boucle dans mon liste de menus */
var dataItem, oOption ; // pour la clarté (cf-ci-dessous)
for (var iMenu in menuItems ) {
// Je prends les données de mon menu
dataItem = menuItems[iMenu] ;
// Je crée un objet DOM item de menu :
oOption = document.createElement('option') ;
// Je mets mes valeurs dedans
oOption.setAttribute("value") = dataItem.lien ;
oOption.innerHTML = dataItem.label ;
// Ça, ça pourrait être + propre, mais je simplifie
// Et je mets mon item dans le menu
monMenu.appendChild(oOption) ;
// —> il apparaît dans la page
} // fin de la boucle sur chaque item de menu
Le second conseil, si je peux me permettre, c'est celui-là : pourquoi surcharger la liste avec des "formulaire_rapport.php" ? Dès qu'il y a des données redondantes, il vaut mieux les faire disparaître.
Dans ta liste, je n'ai vu qu'une alternative :
— Soit un lien est défini, et il utilise "formulaire_rapport.php"
— Soit il n'y a pas de lien (ou égal à "")
Donc ton tableau, au lieu de :
Code : Tout sélectionner
var menuItems = [
["|Compléter un rapport",""],
["||Premier cycle",""],
["|||1-01","formulaire_rapport.php?id=101"],
["|||1-02","formulaire_rapport.php?id=102"],
etc.
… gagnerait à devenir :
Code : Tout sélectionner
var menuItems = [
{ menu: "|Compléter un rapport", id: null},
{ menu: "||Premier cycle", id: null},
{ menu: "|||1-01", id: 101],
{ menu: "|||1-02", id: 102],
{ menu: "||Deuxième cycle", id: null}
etc.
Tu noteras que je n'ai gardé que la donnée essentielle : l'identifiant. Tout le reste est parti à la poubelle, puisque ça ne sert à rien.
Il suffirait ensuite de dire à ta fonction qui construit les menus de s'occuper de ça :
Code : Tout sélectionner
if ( dataMenu.id == null ) {
/* ne rien faire */
}
else {
leLien = "formulaire_rapport.php?id=" + dataMenu.id ;
}
Là, je t'ai décortiqué les choses. Dans la vraie vie, on utiliserait un truc du genre…
Code : Tout sélectionner
var lelien = (lid=dataMenu.id)
? "formulaire_rapport.php?id=" + lid
: null ;
Voilà, j'espère que ça pourra t'apporter une aide quelconque et que je n'ai été ni trop long ni trop abscons.
Bonne chance à toi, et sois sûr que ce que tu cherches à faire est possible,
Phil
Bonjour à tous,
[quote="dick-perron"]J'avais essayé d'intégrer du php dans le javascript sans succès mais j'avoue que je n'ai pas essayé l'inverse.[/quote]
Insérer du php dans le javascript ???… On nage en pleine science-fiction, là :lol:. PHP est interprété côté serveur, et javascript travaille côté client. Comment serait-il possible d'insérer du php dans le javascript ?!
Sinon, pour ton problème, bien sûr qu'il est résolvable très facilement, et sans que ce soit lourd.
Deux conseils, si tu le permets.
Premier conseil : plutôt que de faire des listes entre crochets (javascript) telles que tu les fais avec ton `menuItems`, il vaut souvent mieux créer des objets, c'est beaucoup plus facile à manipuler, et souvent plus lisible pour le programme.
Je ne sais pas à quoi exactement correspondent tes éléments de liste, dans ce `menuItems` (je parlais de lisibililté, justement), donc mon exemple sera peut-être erroné, mais tu le corrigeras sans problème.
Donc, au lieu de ça :
[code]
var menuItems = [
["|Compléter un rapport",""],
["||Premier cycle",""],
["|||1-01","formulaire_rapport.php?id=101"],
["|||1-02","formulaire_rapport.php?id=102"]
]
[/code]
:(
C'est nettement mieux d'avoir :
[code]
var menuItems = [
{label: "|Compléter un rapport", lien: null},
{label: "||Premier cycle", lien""},
{label: "|||1-01", lien: "formulaire_rapport.php?id=101"},
{label: "|||1-02", lien "formulaire_rapport.php?id=102"},
];
[/code]
:D
Note que les `label` et `lien` que j'utilise n'ont rien de définitif ou de réservé. Tu mets ce que tu veux au lieu de `label` et `lien`.
Note aussi l'utilisation des accolades au lieu des crochets
Un exemple tout de suite pour te dire comment tu facilites et tu éclaircis ton code ensuite : tu veux par exemple t'occuper de ton 3e menus (donc d'indice 2 — 0-start pour les tableaux).
Tu le prends bien sûr en faisant :
[code]
var mon3eMenu = menuItems[2] ;
[/code]
C'est maintenant que ça devient intéressant :
Au lieu de faire…
[code]
var monLabelPourMenu = mon3eMenu[0] ;
[/code]
:(
… tu peux faire maintenant :
[code]
var monLabelPourMenu = mon3eMenu.label ;
[/code]
:D
L'idée de clarté n'apparaît peut-être pas sur une simple ligne, mais sois sûr que lorsque tu en as 2000, avec 500 paramètres, ça compte beaucoup.
Sans compter le fait qu'il n'y a rien de plus facile de se tromper dans une liste. Tu oublies une virgule et tout foire.
Ici, dans un "objet", tu peux même mettre les éléments dans le désordre, ça ne changera rien. Ce que j'ai appelé "label" restera toujours l'attribut "label" de l'élément.
Si j'avais à créer ce menu dans la page par javascript, je pourrais faire :
[code]
/*
Pré-requis :
Dans le code HTML en dur que j'ai mis dans mon fichier, j'ai
juste écrit :
<select id="mon-menu-truc"></select>
sans aucun "option"
*/
/* Ma fonction javascript qui va construire les items de menu */
// Je prends d'abord mon menu créé ci-dessus en dur
var monMenu = document.getElementById("mon-menu-truc");
/* Je boucle dans mon liste de menus */
var dataItem, oOption ; // pour la clarté (cf-ci-dessous)
for (var iMenu in menuItems ) {
// Je prends les données de mon menu
dataItem = menuItems[iMenu] ;
// Je crée un objet DOM item de menu :
oOption = document.createElement('option') ;
// Je mets mes valeurs dedans
oOption.setAttribute("value") = dataItem.lien ;
oOption.innerHTML = dataItem.label ;
// Ça, ça pourrait être + propre, mais je simplifie
// Et je mets mon item dans le menu
monMenu.appendChild(oOption) ;
// —> il apparaît dans la page
} // fin de la boucle sur chaque item de menu
[/code]
Le second conseil, si je peux me permettre, c'est celui-là : pourquoi surcharger la liste avec des "formulaire_rapport.php" ? Dès qu'il y a des données redondantes, il vaut mieux les faire disparaître.
Dans ta liste, je n'ai vu qu'une alternative :
— Soit un lien est défini, et il utilise "formulaire_rapport.php"
— Soit il n'y a pas de lien (ou égal à "")
Donc ton tableau, au lieu de :
[code]
var menuItems = [
["|Compléter un rapport",""],
["||Premier cycle",""],
["|||1-01","formulaire_rapport.php?id=101"],
["|||1-02","formulaire_rapport.php?id=102"],
etc.
[/code]
:(
… gagnerait à devenir :
[code]
var menuItems = [
{ menu: "|Compléter un rapport", id: null},
{ menu: "||Premier cycle", id: null},
{ menu: "|||1-01", id: 101],
{ menu: "|||1-02", id: 102],
{ menu: "||Deuxième cycle", id: null}
etc.
[/code] :D
Tu noteras que je n'ai gardé que la donnée essentielle : l'identifiant. Tout le reste est parti à la poubelle, puisque ça ne sert à rien.
Il suffirait ensuite de dire à ta fonction qui construit les menus de s'occuper de ça :
[code]
if ( dataMenu.id == null ) {
/* ne rien faire */
}
else {
leLien = "formulaire_rapport.php?id=" + dataMenu.id ;
}
[/code]
Là, je t'ai décortiqué les choses. Dans la vraie vie, on utiliserait un truc du genre…
[code]
var lelien = (lid=dataMenu.id)
? "formulaire_rapport.php?id=" + lid
: null ;
[/code]
Voilà, j'espère que ça pourra t'apporter une aide quelconque et que je n'ai été ni trop long ni trop abscons.
Bonne chance à toi, et sois sûr que ce que tu cherches à faire est possible,
Phil