Discussion :

[danamaro]

Bonjour,
Je construis actuellement une barre de navigation pour un calendrier.

]

On clique sur un mois et il s'affiche dans le calendrier, bref un truc banal.
J'utilise une fonction qui d'abord atteint l'ID (JAN, FEB, MAR, etc...) pour y insérer un Onclick pour déclencher un script qui se nomme chargeCal
Le script chargeCal contient deux arguments la valeur du mois (01, 02 ,03 etc..) et l'année en cours
Le onclick renvoie donc par exemple chargeCal(01,2014) et à partir de là le calendrier se construit.

Mais ma fonction qui génère le onclick interprète bizarrement la réponse JSON
Pour l'exemple j'ai construit la fonction avec les 3 premier mois, donc une boucle toute bête avec comme compteur countMONTH <4

Le résultat est curieux :
Les trois onclick sont bien construit (Tous les ID ont bien été ciblés), mais quand je clique sur les boutons le lien me renvoie toujours sur le mois qui correspond à la dernière valeur de la boucle FOR

Donc je devrais avoir
ChargeCal(01,2015)
ChargeCal(02,2015)
ChargeCal(03,2015)

Mais j'ai :
ChargeCal(03,2015)
ChargeCal(03,2015)
ChargeCal(03,2015)

Bon, je suis certain que c'est une erreur de Noob de débutant, mais à force de retourner le code dans tous les sens, je ne vois plus où est l'erreur.
Merci d'avance

P.S : j'ai deux fois le même ID car j'utilise Boostrap en responsive

Code :

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

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
 
*****************************************
**********Le code de la fonction*************
*****************************************
function navbarMONTH(arg) {
    var datas = eval('(' + arg + ')')
 
    var jsonMONTH = {
        "a1": "JAN",
        "a2": "FEB",
		"a3" : "MAR",
        "b1": "01",
        "b2" : "02",
		"b3" : "03"
    }
 
    for (var countMONTH = 1; countMONTH < 4; countMONTH++) {	
		var buttonMONTH = document.querySelectorAll('#' + jsonMONTH['a' + countMONTH])
		varMONTH = jsonMONTH['b' + countMONTH]
		var nb_buttonMONTH = buttonMONTH.length
 
			for (var i = 0; i < nb_buttonMONTH; i++) {
				buttonMONTH[i].onclick = function () {
					eval('chargeCal(' + varMONTH + ',' + datas.year + ')')
				}
			}
    }
}

[melka one]

jour

utilise setAttribute

Code :

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

1
2
3
 
buttonMONTH[i].setAttribute("onclick","chargeCal(" + varMONTH + "," + datas.year + ")")
				}

[SpaceFrog]

normal il prent le dernier indexe de la boucle.
Tu dois à chaque itération rattacher l'indice de la boucle à l'objet

http://jsfiddle.net/Lbn85vk6/1

[danamaro]

Un grand Merci pour les deux réponses. J'aurais dû ouvrir cette discussion plutôt car j'ai galéré dessus un certain temps
J'étais à des années de lumière de la solution (et au delà aussi).

Bon pour le moment la logique d'exécution de mon code de départ m'échappe complètement
(moi je résonne par étape dans la boucle, du genre à la première itération le script donne bien ChargeCal(01,2015), puis ChargeCal(02,2015).
mais non, le code prend la dernière valeur pour la mettre dans le première ????)

Bref je vais approfondir cela.

Merci encore !

P.S : j'ai bien noté que je dois mettre mes copiages de code entre # (c'est vrai que je n'avais pas lu le mode d'emploi )

[Watilin]

Une remarque à propos de cette ligne :

Code :

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

var buttonMONTH = document.querySelectorAll('#' + jsonMONTH['a' + countMONTH]);

Si tu fais bien les choses, chaque id est unique dans la page, du coup en sélectionnant des éléments par id (avec #), tu obtiens toujours un seul élément. Tu peux donc simplifier :

Code :

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

var buttonMONTH = document.getElementById(jsonMONTH['a' + countMONTH]);

Et après tu n'as plus besoin de la boucle for.

Tu peux éviter les appels à eval. Si tu ne le sais pas déjà, eval is evil pour plusieurs raisons, la principale étant que ça permet l'exécution de code arbitraire (problème de sécurité), et la deuxième que ça empêche la pré-compilation du code (problème de performance).
Dans le cas de arg, si c'est un objet qui respecte la syntaxe JSON (et il semble que c'est le cas), tu peux utiliser la fonction JSON.parse disponible sous tous les navigateurs pas trop vieux.

Dans le cas du eval qui est dans le onclick, je ne comprends vraiment pas à quoi il sert.
En reprenant le code de SpaceFrog, ça donne ça :

Code :

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

1
2
3
buttonMONTH.onclick = function() {
  chargeCal(this.MONTH, datas.year);
};

Moi je te propose une approche différente, qui te permet de ne pas ajouter de propriétés sur les objets button. En effet, les objets DOM implémentent tellement d'interfaces qu'on n'est jamais sûr de ne pas causer un conflit de nom de propriété, aujourd'hui ou à l'avenir.
L'approche que je te propose repose sur un dictionnaire / map / table de hashage / tableau associatif comme en PHP / appelle ça comme tu veux. Comme tu as fait avec jsonMONTH, mais en plus simple en fait

Tes boutons portent une information sur le mois directement dans leur id, on va donc simplement utiliser cet id.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var dico = {
  "JAN": "01",
  "FEB": "02",
  "MAR": "03",
  "APR": "04",
  "MAY": "05",
  "JUN": "06",
  "JUL": "07",
  "AUG": "08",
  "SEP": "09",
  "OCT": "10",
  "NOV": "11",
  "DEC": "12",
};

Ensuite il te suffit d'utiliser ce dictionnaire avec l'id du bouton.

Code :

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

1
2
3
buttonMONTH.onclick = function() {
  chargeCal(dico[this.id], datas.year);
};

Voilà le code final : http://jsfiddle.net/Lbn85vk6/2/

[danamaro]

Bonjour Watilin,
Merci d'avoir compléter la reponse de SpaceFrog.

Le but de tout cela est la création d'un calendrier :



► Concernant la répétition de l'ID, j'ai voulu faire du RESPONSIVE en utilisant BOOTSTRAP.
Comme c'est la première fois je patauge un peu.
Pour passer d'un display ECRAN ordinateur à Mobile, je dois répéter mon code HTML deux fois (ce qui est mal )
soit j'ai :

Code :

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

<div class="container visible-sm visible-md visible-lg"><!--View screen et laptop-->

ou

Code :

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

<div class="container visible-xs"><!--View phone-->

et à l'intérieur de cette DIV j'ai la barre de navigation
Pour le moment je n'ai pas trouvé comment éviter cette répétition. D'où la boucle FOR pour référencer tous les ID identiques.

► Pour les "eval", c'est vrai que j'utilise cela sans vraiment avoir compris pourquoi.
J'ai appris les bases d'AJAX et de JSON sur Video2Brain : "les fondamentaux d'AJAX" de Birnou SEBARTE
Il utilise

Code :

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

var datas = eval( '('+arg+')')

car d'après ce que j'ai compris le fichier texte (arg) qui nous arrive en JSON est une chaine de caractères et qu'il faut le transformer en Objet en utilisant EVAL ???
Bon c'était déjà pas très clair, après je l'ai repris dans le onclick un peu abusivement. Je vais étudier le "JSON.parse".

► Le "concept" de dico est excellent, cela rend le code plus léger et clair.

Merci encore pour cette contribution qui me permet de progresser d'avantage. (mais la route est encore longue )