High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

[Js] Appel div avec nom variable concaténé?

Dernière réponse le 27 nov 2008 à 23:33:28 lomic2, le 27 nov 2008 à 19:44:45 
 Signaler ce message aux modérateurs

Bonjour,

Un petit souci, je bute dessus sans trouver, peut-être des yeux extérieurs y verront plus clair...

Je vous expose le problème:

Une carte, des points sur cette carte, au survol des points, un div contenant des informations pop en haut de page, jusque là rien d'extraordinaire.

Là où ça se complique c'est lorsque je veux afficher des infos distinctes sur chaque point, ma méthode:

Côté serveur, je créé en PHP
- Tous les points, chacun dispose d'une fonction "onMouseOver" qui lance ma fonction javascript "pop_div" en lui passant en argument le numéro du point, "no"
- Tous les divs "infos_no" (autant qu'il existe de points sur la carte) contenant les infos qui doivent s'afficher au survol du point associé.

Résultat sur la page générée en prenant par exemple le point 3:
côté js:

<script type="text/javascript">
function pop_div(no){ var element = document.getElementById.eval("infos_"+no); element.style.visibility = "visible"; }
function close_div(no){ var element = document.getElementById.eval("infos_"+no); element.style.visibility = "hidden"; }
</script>
le spot "3":
<div id="mon_point_3" style="position:relative;top:256px;left:482px;z-index:2">
  <img src="images/spot.png" border="0" alt="mon_point_3" onMouseOver="pop_div(3);">
</div>
le div "3" à faire poper 
<div id="infos_3" style="position:absolute;top:10px;left:10px;visibility:hidden;z-index:6">{contenu html}</div>
dans mes fonctions js, eval("infos"+no) est censé pour moi valoir "infos_3" si je survole le point 3, et donc s'appliquer au div qui porte le nom "infos_3" et dans la fonction "pop_div" le rendre "visible", dans la fonction close_div, le rendre "hidden"

cependant ça ne fonctionne pas... et je cherche sans trouver pourquoi...

voilà si quelqu'un peut me mettre le nez sur ce qui coince, ça serait très sympa :)
Configuration: Windows XP
Firefox 3.0.4

Meilleures réponses pour « [Js] Appel div avec nom variable concaténé? » dans :
Concaténer les vecteurs ou les matrices sous Matlab VoirL'opération de concaténation des variables de Matlab consiste à regrouper ces variables dans une seule (vecteur ou matrice). Exemple : |2 3 4| X= |1 2 5| |0 2 7| Avec : |9 6 8| Y= |5 6 2| |3 2 1| Donne...
[Shell] Tester une variable numérique VoirTester une variable numérique    Préambule Dans un environnement "shell", les variables sont, par défaut, de type "chaîne de caractères". De ce fait il n'est pas possible de déclarer une variable de type "entier" (enfin, ceci n'est pas tout à...
Javascript - split() VoirLa fonction split() permet de scinder une chaîne de caractère et de retourner les résultats dans un tableau, grâce à une chaîne définie comme séparateur. Dans l'exemple ci-dessous, la fonction split() permet de découper la date selon le caractère...
Javascript - Les variables VoirLe concept de variable Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront être modifiées lors de l'exécution du programme. En Javascript, les noms de variables peuvent être aussi long que l'on désire,...
Javascript - L'objet window VoirLes particularités de l'objet window L'objet window est l'objet par excellence dans Javascript, car il est le parent de chaque objet qui compose la page web, il contient donc : l'objet document: la page en elle-même l'objet location: le lieu de...
Javascript - Les fonctions VoirLa notion de fonction On appelle fonction un sous-programme qui permet d'effectuer un ensemble d'instructions par simple appel de la fonction dans le corps du programme principal. Cette notion de sous-programme est généralement appelée fonction...
Posez votre question Répondre

1

Alain_42, le 27 nov 2008 à 20:19:38

Bonsoir,

var element = document.getElementById.eval("infos_"+no);

habituellement c'est de la forme: 

var element = document.getElementById('id');


donc dans ton cas: 

var element = document.getElementById(eval("infos_"+no));


ou essayes même: 

var element = document.getElementById.l("infos_"+no);

   
Répondre à Alain_42

2

lomic2, le 27 nov 2008 à 20:37:00

Merci pour ta réponse, hélas ça ne change rien à mon souci.

Cependant, comme j'ai le sentiment d'être proche de la solution et qu'en prime ta réponse m'incite à penser que je ne fais pas complètement n'importe quoi, j'élargis ma recherche...

Hypothèse 1: ça fonctionne mais je ne vois pas le div car il pope hors de ma vue
=> je pense pas car j'ai retiré toutes les contraintes de dimensions sur le div qui contient tout ce petit monde

Hypothèse 2: c'est l'appel à la fonction qui coince, j'ai positionné un 

alert('fonction pop div');
à l'intérieur pour avoir une boite d'alerte lors de l'appel à la fonction...
=> la boite n'apparait pas :-?, la fonction est bien déclarée avant son appel, et lorsque j'appelais la version précédente de la fonction (qui ne prenait pas de paramètre), ça fonctionnait bien...

Je creuse toujours...

   
Répondre à lomic2

3

Alain_42, le 27 nov 2008 à 20:57:12

Je vois que tu as Firefox, alors utilises tu la console d'erreurs du menu Outils ?

Elle te sort les erreurs Javascript

   
Répondre à Alain_42

4

lomic2, le 27 nov 2008 à 21:25:20

Pas bête mais rien d'intéressant à part quelques warning à propos d'une propriété "filter" abandonnée mais elle est là pour des questions de compatibilité avec d'autres navigateurs ;)

   
Répondre à lomic2

5

Alain_42, le 27 nov 2008 à 22:38:42

En y regardant de plus près:

function pop_div(no)

change le nom de l'argument " no" est peut être un nom réservé ??

ensuite dans l'appel de la fonction:

onMouseOver="pop_div(3)

il faut passer une valeur: 

onMouseOver="pop_div('3')


3 est considéré comme une variable si elle n'est pas entre '

   
Répondre à Alain_42

6

lomic2, le 27 nov 2008 à 22:44:42

Je vais tenter de changer mon nom de variable tu as peut-être raison.

Pour les quotes j'y ai pensé après et j'en ai ajouté, cependant ça ne change pas :)

Merci encore pour ton aide ;)

   
Répondre à lomic2

7

lomic2, le 27 nov 2008 à 22:52:21

Petit progrès...

J'ai changé mon "onMouseOver" en "onClick" pour déclencher plus sûrement l'affichage du div et là j'ai une erreur javascript qui me parait intéressante:

"infos_1 is not defined"

côté div il y en a bien un qui s'appelle "infos_1" par contre c'est peut-être au niveau de ma fonction "pop_div" avec le document.getElementById qui ne trouverait pas l'élément qui s'appelle "infos_1" ?

Je creuse je creuse, je sens que c'est pas loin :D

Je retente les variantes de syntaxe de cette partie avec "eval" ou "l"

   
Répondre à lomic2

8

Alain_42, le 27 nov 2008 à 22:55:04

Il faut : 

var element = document.getElementById(eval("infos_"+no));

   
Répondre à Alain_42

9

lomic2, le 27 nov 2008 à 22:56:31

Oui je viens de tester avec 

document.getElementById.l("infos_"+no);
et il me pointe une erreur sur 
document.getElementById.l
"is not a function" ;)

retour à 
var element = document.getElementById(eval("infos_"+div_number));
(no est devenu div_number)

retour à l'erreur "infos_1 is not defined"

   
Répondre à lomic2

11

Alain_42, le 27 nov 2008 à 23:27:38

Tu as une erreur la:

document.getElementById.l("infos_"+no);

il y a un point et un l ou un 1 en trop, il ne faut rien entre getElementById et les ()

   
Répondre à Alain_42

10

lomic2, le 27 nov 2008 à 23:26:25

J'avance... j'avance ;)

à coup de boite d'alerte, je constate que l'appel à la fonction est ok, quel le paramètre est bien passé, j'ai un peu modifié:

var div_number = "infos_" + numero; alert('div number: ' + div_number); var element = document.getElementById(div_number); element.style.visibility = "visible";
là j'ai bien une alerte qui me dit "div_number: infos_1", impeccable
et je vois apparaitre furtivement mon div, reste à voir pourquoi il disparait, comme si le passage à "visible" ne tenait pas...

ça avance!

   
Répondre à lomic2

12

lomic2, le 27 nov 2008 à 23:31:27

Bon ben ça fonctionne, code final: 

<script type="text/javascript">
function popup_div(numero){ var div_number = "infos_" + numero; var element = document.getElementById(div_number); element.style.visibility = "visible"; }
function close_div(numero){ var div_number = "infos_" + numero; var element = document.getElementById(div_number); element.style.visibility = "hidden"; }
</script>

pour les appels aux fonctions: 
<img src="images/spot.png" border="0" alt="mon_point_3" onMouseOver="popup_div('3');">
<img src="images/close.png" onclick="close_div('3')"


merci Alain tu m'as permis d'y voir plus clair!

   
Répondre à lomic2

13

 Alain_42, le 27 nov 2008 à 23:33:28

Ok, mets résolu

bonne nuit

@lain

   
Répondre à Alain_42
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net