Discussion :

[Nick_Rivers]

Bonjour,

à partir de ma bdd j'essaye de constituer un objet JS pour par la suite l'utiliser dans un tableau :

je m'explique :

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
29
30
 
var data = 
    { 
       	"mbre_crea":<?php echo '1320';?>,
       	"offre": <?php echo '50'; ?>,
		"date_heure" : {
        	<?php 
                        $cpt = 0;       
                $sql = "SELECT DATE_FORMAT(duree, '%Y-%m-%d') as ma_date,
                                DATE_FORMAT(duree, '%H:%i') AS mon_heure
                                FROM evenement_n";      
                $res = send_sql('mum_module',$sql)or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
                
                while($data = mysql_fetch_assoc($res)) 
                        {
                                $d = $data['ma_date'];
                                $h = $data['mon_heure'];
                                if($cpt!=0) { echo ','; }
                                                                
                        ?>	
			"<?php echo $d; ?>":{
				"date_jour" :"<?php echo $d; ?>",
				"heures_jour" :"<?php echo $h; ?>"
			}
		<?php
                        $cpt++;
                        }
                ?> 
    }     
};

quand j'affiche ma source j'obtiens bien

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
29
 
        var data = 
		{ 
       	"mbre_crea":1320,
       	"offre": 50,
		"date_heure" : {
 
			"2010-03-16":{
				"date_jour" :"2010-03-16",
				"heures_jour" :"10:00"
			}
		,	
			"2010-03-17":{
				"date_jour" :"2010-03-17",
				"heures_jour" :"12:00"
			}
		,	
			"2010-03-19":{
				"date_jour" :"2010-03-19",
				"heures_jour" :"15:00"
			}
		,	
			"2010-03-25":{
				"date_jour" :"2010-03-25",
				"heures_jour" :"08:30"
			}
 
    }     
};

mais je ne suis pas sûr de la forme de celui-ci

il faut que je puisse interpréter les données dans mes boucles qui constitue mon tableau dans ce genre la :

Code :

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

1
2
3
4
5
6
7
8
 
 
if(cell.le_jour == '2010-3-23' & tes_heures[j-1] == '11:30'){
	cell.className = "cellule_check";
 
} else {
	cell.className = "cellule_";
}

Merci

[SpaceFrog]

il faut que ton php génère le code suivant:

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
 
{ 
       	mbre_crea:1320,
       	offre: 50,
		date_heure : {
 
			"2010-03-16":{
				date_jour :"2010-03-16",
				heures_jour :"10:00"
			}
		,	
			"2010-03-17":{
				date_jour :"2010-03-17",
				heures_jour :"12:00"
			}
		,	
			"2010-03-19":{
				date_jour :"2010-03-19",
				heures_jour :"15:00"
			}
		,	
			"2010-03-25":{
				date_jour :"2010-03-25",
				"heures_jour" :"08:30"
			}
 
    }     
}

puis coté js

Code :

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

var data= eval( '('+le_string_json+')')

par contre je ne vois pas l'utilité de date_jour... ni de heur_jour du coup ^^

Code :

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

{ ...,"2010-03-25":"08:30", ..}

suffirait...
mais peut être as tu des impératifs que je ne connais pas

[Nick_Rivers]

par contre je ne vois pas l'utilité de date_jour... ni de heur_jour du coup ^^

bien c'était pour avoir deux propriétés ?

pour que ma boucle test la condition ci-dessus :

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
 
 
for(var i = 0; i < 6; i++) {
               cell = document.createElement("td");
 
...
 
if(cell.le_jour == data.date_jour[i] & tes_heures[j-1] == data.heures_jour[i]){
	cell.className = "cellule_check";
 
} else {
	cell.className = "cellule_";
}
 
}

enfin je pensais à quelque chose du genre

en fait parcourir l'ensemble de l'objet, tester la date et l'heure et le signaler par un changement de couleur de cellule dans le tableau

[emmanuel.remy]

Salut,

Pour rebondir sur ce qu'écrit SpaceFrog: le eval est fait quand on souhaite manipuler une chaine au format JSON, par exemple en réponse à une requête AJAX. Or toi tu es dans le cas général de la génération de ta page HTML et de son code javascript ce qui est un peu différent. Tu n'as techniquement pas besoin de faire cet eval. D'un autre côté l'aspect pratique voudrait que tu utilises la fonction PHP json_encode ce qui t'éviterait de réinventer la roue de JSON...

L'accès à tes valeurs est différent; étant tu les nommes en utilisant parfois un caractère qui ne sont pas valables (-), tu devras faire:

Code :

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

1
2
 alert(data.mbre_crea);
alert(data.date_heure["2010-03-17"].date_jour);

.

Enfin attention à ce code:

Code :

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

if(cell.le_jour == data.date_jour[i] & tes_heures[j-1] == data.heures_jour[i]){

il faut inscrire && et pas &


ERE

[Nick_Rivers]

bonjour,

merci de ta réponse


Donc si je comprends bien il faudrait que j'encode en Json le résultat de ma requête

soit créer un tableau associatif et ensuite l'encoder ?

et ensuite traiter cette chaine

autrement d'accord

Code :

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

alert(data.date_heure["2010-03-17"].date_jour);

mais je dois zapper quelque chose pour l'utiliser dans ma boucle et ainsi récupérer toute les dates et heures

Code :

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

alert(data.date_heure[i].date_jour);

en fait c'est surtout comment "parcourir" cet objet ici j'ai une clé sous forme de caractère exact ?

[SpaceFrog]

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
<script type="text/javascript">
var data={ 
       	mbre_crea:1320,
       	offre: 50,
			date_heure : {
        		"2010-03-16":"10:00",
				"2010-03-17":"12:00",
				"2010-03-19":"15:00"	,	
				"2010-03-25":"08:30"
			}
 
    	}     
 
contenu=""
for (elt in data.date_heure){
    contenu += elt +"\t=>" + data.date_heure[elt] +'\n';
    }
 alert (contenu)   
</script>

[Nick_Rivers]

je comprends plus ou moins !

ici tu déplaces les "variables heures" dans les propriétés de l'objet qui sont les dates


est ce qu'il faut qu'a partir de ça je créé deux nouveau tableaux ? séparer la date et l'heure ?

et ensuite utiliser ma condition du type :

Code :

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

if(cell.le_jour == '2010-3-24' && tes_heures[j-1] == '11:30' )

ou je peux atteindre "contenu" et faire ma condition

j'avoue être perdu

Merci en tout cas

[Nick_Rivers]

Suite à la discussion :]

voilà une partie la structure de mon tableau ainsi que la solution pour l'objet JS que tu as expliqués plus haut.

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
29
30
31
32
33
34
35
 
 
var data2={ 
         mbre_crea:1320,
         offre: 50,
        	date_heure : {
                		"2010-03-23":"10:00",
        			"2010-03-24":"12:00",
        			"2010-03-25":"15:00",	
        			"2010-03-26":"08:30"
        	      }
            	}
 
		        contenu= [];
		        for (var elt in data2.date_heure){
		        	contenu[elt]= data2.date_heure[elt] ;
		        }
 
 
for(var j = 0; j < 25; j++) {
            row = document.createElement("tr");
			row.id = j;
 
            for(var i = 0; i < 6; i++) {
                cell = document.createElement("td");
 
                ..................................
 
 
		document.body.appendChild(cell);
		row.appendChild(cell);
 
            }
            tablebody.appendChild(row);
        }

ce que je cherche à faire c'est que dans ma deuxième boucle, je compare les dates et heures qui sont dans l'objet avec les proprietés des cellules qui sont aussi des dates et heures. si il y a "égalité" on colorise les cellules concernées.

voici ma condition :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
cell.le_jour = +d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
cell.lheure = tes_heures[j-1];
 
if(cell.le_jour == '2010-3-24' && cell.lheure == '11:30' ){
	cell.className = "cellule_check";
}
else {
	cell.className = "cellule_";
}

ici je force une date et une heure ainsi ça me colorise la cellule concernée.

avec une boucle classique je vois comment récupérer les dates et l'heure qui lui correspond mais la je patauge un peu beaucoup pour tester toute les dates et heures de l'objet

j'espère avoir été plus clair sur mon problème ! ^^

[SpaceFrog]

Code :

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

1
2
3
4
5
6
7
8
for (elt in data2.date_heur){
   if(cell.le_jour == elt && cell.lheure == data2.date_heure[elt] ){
	cell.className = "cellule_check";
   }
   else {
	cell.className = "cellule_";
   }
}

[SpaceFrog]

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
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
63
64
65
66
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type="text/javascript">
var data2={ 
       	mbre_crea:1320,
       	offre: 50,
			date_heure : {
        		"2010-03-16":"10:00",
				"2010-03-17":"12:00",
				"2010-03-19":"15:00"	,	
				"2010-03-25":"08:30"
			}
	}
 
 
function colorise(){
tabtr =document.getElementsByTagName('tr')
var i=0;
 
 
while(tabtr[i++]){
var thisone=0;
  var tabtd=tabtr[i-1].getElementsByTagName('td')
  var le_jour =tabtd[0]
  var lheure=tabtd[1]
 
for (elt in data2.date_heure){
   if((le_jour.innerHTML == elt) && (lheure.innerHTML== data2.date_heure[elt]) ){
	        thisone++;
	          	}
 
   	le_jour.parentNode.className = (thisone>0)?"cellule_check":"cellule_";
 	}
 }	  
} 
 
 
</script>
<style type="text/css">
.cellule_check {background-color:red;}
.cellule_ {background-color:green;}
</style>
</head>
 
<body onload="colorise()">
 
<table>
	<tr>
		<td>2010-03-16</td>
		<td>10:00</td>
	</tr>	
	<tr>
		<td>2010-03-26</td>
		<td>12:00</td>
	</tr>	
	<tr>
		<td>2025-03-26</td>
		<td>12:00</td>
	</tr>	
 
 
 
</body>

[Nick_Rivers]

C'est exactement ça

maintenant le plus dur il faut que j'adapte à mon code ! lol

Edit :

ce que je comprends pas :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var thisone=0
for (var elt in data2.date_heure){
	if(i!=0 & j!=0) {
	      if(cell.le_jour == elt && cell.lheure == data2.date_heure[elt] ){
			thisone++;
		}
	}
	cell.className = (thisone)?"cellule_check":"cellule_"; 
}

cette boucle je la place bien au bon endroit ça devrait marcher

elle parcourt pourtant bien toutes les dates (elt) et toutes les heures (data2.date_heure[elt])

et compare bien avec les propriétés des cellules

[emmanuel.remy]

Salut,

Attention une fois de plus:

Code :

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

if(i!=0 & j!=0) {

il faut && et non &

ERE

[Nick_Rivers]

oui pour la syntaxe

bon je suis toujours bloqué avec mon DOM pour trouver une solution

je vais essayer de me re pencher un peu plus sur l'exemple de SF pour l'adapter une fois de plus

Pourtant la boucle ci-dessus remplie bien son rôle !! je comprends pas.

[Nick_Rivers]

petit dépoussiérage en règle !

Petit récapitulatif :

comme indiqué plus haut j'utilise maintenant json_encode et récupère mon objet via un traitement Ajax)

Code :

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

1
2
3
4
5
6
7
 
$tab_event = array();
array_push($tab_event, '"'.$ma_date.'":"'.$mon_heure.'"');
 
....
 
header("X-JSON: " . json_encode($tab_event));

ce qui me donne le format :

Code :

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

"2010-05-18":"08:00","2010-05-18":"10:00","2010-05-18":"11:00","2010-05-18":"12:00",

Dans l'exemple du dessus de SpaceFrog

l'objet est ainsi :

Code :

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

1
2
3
4
5
6
 
var data2={ 
       	mbre_crea:1320,
       	offre: 50,
	date_heure : {'2010-03-16':'10:00',"2010-03-17":"12:00","2010-03-19":"15:00","2010-03-25":"08:30"}
	}

de mon coté :

Code :

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

1
2
3
4
5
6
7
8
onSuccess: function(transport, json) {
	if (transport.status == 200) {
	document.getElementById('reponse').innerHTML = json;
		var data2={ 
		   date_heure : json
		};
...
},

mais ça ne va pas.

le innerHTML me permet de visualiser l'objet json retourné.

au niveau de var data2 j'ai essayé de différente manière

que ce soit avec : { transport.responseJSON } ou eval() mais aucun résultat.

une petite idée ?

Merci

[SpaceFrog]

Code :

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

json= eval('('+json+')')

[Nick_Rivers]

Presque bon

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
29
30
31
32
33
34
 
onSuccess: function(transport, json) {
	if (transport.status == 200) {
		document.getElementById('reponse').innerHTML = json;
 
		//var json2 = transport.responseText.evalJSON();
		var data2={ 
			date_heure : json= ('('+json+')')
		};
 
 
		tabtr =document.getElementsByTagName('tr')
		var i=0;
 
		while(tabtr[i++]){
			var thisone=0;
			var tabtd=tabtr[i-1].getElementsByTagName('td');
			var le_jour =tabtd[0];
			var lheure=tabtd[1];
 
			for (elt in data2.date_heure){
 
				if((le_jour.innerHTML == elt) && (lheure.innerHTML== data2.date_heure[elt]) ){
					thisone++;
				}
 
				le_jour.parentNode.className = (thisone>0)?"cellule_check":"cellule_";
			}
		}	  
 
		} else {
			document.getElementById('reponse').innerHTML = 'NO JSON';
		}
},

j'ai essayé avec le

Code :

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

json= eval('('+json+')')

et même sans le json= aucun résultat. parcontre si je vire eval();

si je reprends ton exemple :

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
 
<table> 
	<tr> 
		<td>2010-05-18</td> 
		<td>08:00</td> 
	</tr>	
	<tr> 
		<td>2010-03-16</td> 
		<td>10:00</td> 
	</tr>	
	<tr> 
		<td>2010-03-26</td> 
		<td>12:00</td> 
	</tr>	
	<tr> 
		<td>2025-03-26</td> 
		<td>12:00</td> 
	</tr>	
 </table>

tout se colorise en vers.

il y a pourtant une date ds l'objet json qui est bonne avec le tableau donc qui devrait être colorisée en rouge. (comme ton exemple )

si je reprends ton objet plus haut, ça marche nickel donc ça vient vraiment de l'interprétation du mien.

[Nick_Rivers]

Autre petit problème soulevé :

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 data2={ 
            mbre_crea:1320,
            offre: 50,
        		date_heure : {
                		"2010-6-7":"10:00",
        			"2010-6-8":"12:00",// premier event ce jour là
        			"2010-6-8":"14:00",// second event même jour
        			"2010-6-9":"15:00",	
        			"2010-6-10":"10:30",
        			"2010-6-11":"8:30",
        			"2010-6-11":"9:30"
        		}
            	}

Mon objet JSON ne va pas.
ici si plusieurs horaires le même jours un seul est prit en compte.

tout simplement parce que les clés d'un objet doivent être uniques il me faudrait donc apparemment quelque chose dans ce genre là :

Code :

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

"2010-6-8":["12:00","14:00"],

?

comment accéder à cette clé ducoup ?

[SpaceFrog]

Oui bien vu la clef soit être unique en json et ton contournement est juste parfait car la syntaxe en devient super ergonomique:

Code :

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

1
2
json["2010-6-8"][0]
json["2010-6-8"][1]

vu qu'il s'agit d'un array

[Nick_Rivers]

Oui


j'ai donc bien réussi à créer mon objet de la sorte :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
       var data2={ 
               	mbre_crea:1320,
               	offre: 50,
	                date_heure : {
	          		  "2010-6-14":["10:00", "12:00"],
	          		  "2010-6-15":["12:00","14:00"],
	          		  "2010-6-16":["15:00"],
	          		  "2010-6-17":["10:30"],
	          		  "2010-6-18":["8:30","9:30"]
	          		}
            	}

donc la bien dans le cas de clé unique pour chaque date


il me reste simplement quelques difficultés à le parcourir ça parait pourtant évident

cette première boucle

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var thisone=0
   for (var elt in data2.date_heure){
	if(i!=0 & j!=0) {
	   if(cell.le_jour == elt && cell.lheure == data2.date_heure[elt] ){
		thisone++;
	  }
	}
	cell.className = (thisone)?"cellule_check":"cellule_"; 
  }

ou alors celle-ci

Code :

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

1
2
3
4
5
6
 
for (var elt in data2.date_heure){
	for(var i=0,l=elt.length;i<l;i++) {
	....		
        }
}

sans résultat donc je dois vraiment m'y prendre comme un pied pour le parcourir !

Edit :

je pense pas être loin ...

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
 
for (var elt in data2.date_heure){	
   	  	if(cell.le_jour == elt){
			if(data2.date_heure[elt].length > 0){
				var  reg =new  RegExp("[ ,;]+", "g");
				var test = String(data2.date_heure[elt]);
				var tableau = test.split(reg);
				for  (var  i=0; i<tableau.length; i++)  {
				 	if(cell.lheure == tableau[i] ){
						thisone++;
					}
				}
			}
		}
		cell.className = (thisone)?"cellule_check":"cellule_"; 
	 }