calendrier developpez

Version imprimable

Salut

je tente de mettre en place le calendrier du tuto de developpez. Ca se passe plutôt pas mal sauf que lorsque je rafraichis la page, il m'affiche un calendrier tout vide.

en cherchant le problème:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
function remplirCalendrier(reponsejson) {
       //on utilise la fonction evalJSON de prototype pour parser la réponse JSON
       var data=reponsejson.responseText.evalJSON();
  alert('1');
	   //On place les liens suivants,précédents et le mois en cours
       $('link_suivant').onclick=function(){eval(data.lien_suivant) ;};
  alert('2');
       $('link_precedent').onclick=function(){eval(data.lien_precedent);};
	   $('titre').innerHTML=data.mois_en_cours;
       //Maintenant, on affiche tous les jours du calendrier
       var compteur=1;
       var id='';
       while(compteur<43){
          id=compteur.toString();
          $(id).innerHTML=data.calendrier[(compteur-1)].fill;
          compteur++;
       }
 
}

alert('1') s'affiche mais pas le 2. Apparament il bloque sur $('link_suivant') qu'il ne trouve pas.

Voilà, je sais pas trop le pourquoi du comment, donc j'en appelle à votre aide.
Merci d'avance

22/04/2008, 08h29
shaun_the_sheep

Salut,

Je l'ai mis en place sans problème et il fonctionne bien.

Vérifie:

1) la réponse JSON si tu passes bien le parametre lien_suivant
2) que le bouton lien_suivant existe bien dans ta page

Essai de remplacer:
$('link_suivant') par document.getElementById('link_suivant')

Ajoute si cela n'est pas déjà fait:

Citation:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="Expires" content="0" />

J'ai rencontré des problème de cache et d'Ajax (sous IE) que j'ai réglé comme cela.
22/04/2008, 08h33
SpaceFrog

sinon dans les contributions il y en a un autre beaucoup mieux ...
22/04/2008, 08h39
shaun_the_sheep

Ah ?
22/04/2008, 08h41
le_ben

Merci beegood, je teste ça dés que j'ai un peu de temps

Citation:

Envoyé par SpaceFrog

sinon dans les contributions il y en a un autre beaucoup mieux ...

Ah ouai ! :D lequel ? j'ai fait un peu le tour mais j'en ai pas vu d'autres.
22/04/2008, 09h06
SpaceFrog

jette un oeil par là :
http://www.developpez.net/forums/sho...ght=calendrier
22/04/2008, 10h18
le_ben

Citation:

Envoyé par beegood

Salut,

Je l'ai mis en place sans problème et il fonctionne bien.

Vérifie:

1) la réponse JSON si tu passes bien le parametre lien_suivant
2) que le bouton lien_suivant existe bien dans ta page

Essai de remplacer:
$('link_suivant') par document.getElementById('link_suivant')

Ajoute si cela n'est pas déjà fait:

J'ai rencontré des problème de cache et d'Ajax (sous IE) que j'ai réglé comme cela.

Je viens de tester, ça ne fonctionne pas. Mais c'est effectivement un problème de cache. Si je rafraichit au bout de 10 minutes, il n'y a pas de problème. Je continue mes recherches.
22/04/2008, 16h54
le_ben

ça fonctionne à présent.
J'ai trouvé une solution pas trés élégante mais qui fonctionne.
je rajoute:

Code:

calendrier.php?d=" + (new Date()).getTime();

dans le liens.

je laisse ouvert un peu si quelqu'un a mieux ensuite je resolutionnerai ce message.
22/04/2008, 17h02
SpaceFrog

oui l'autre calendrier :D
22/04/2008, 18h26
shaun_the_sheep

Gére aussi le cache coté php et html

Même soucis...

Bonjour,
je ne sais pas si je dois mettre mon sujet à la suite d'un existant (désolée si je ne devais pas), mais j'ai à peu près le même probleme avec ce calendrier :
la fonction remplirCalendrier ne remplit rien :-/
Comme Le_ben, j'ai mis des alert pour tester :
Code:

1 2 3 4 5 6 7 8 9 function remplirCalendrier(reponsejson) { alert('0'); //on utilise la fonction evalJSON de prototype pour parser la réponse JSON var data=reponsejson.responseText.evalJSON(); alert('1'); //On place les liens suivants,précédents et le mois en cours $('link_suivant').onclick=function(){eval(data.lien_suivant) ;}; alert('2'); $('link_precedent').onclick=function(){eval(data.lien_precedent);};
Il n'y a que le alert('0') qui s'affiche, les autres ne font rien. Je n'arrive pas à tester pour savoir ce qui se passe au niveau de reponsejson.responseText.evalJSON
Quelqu'un peut m'aider?
Merci beaucoup!
Sabrina.

23/04/2008, 11h09
shaun_the_sheep

Salut,

Si la fonction ne passe pas ce stade var data=reponsejson.responseText.evalJSON(); c'est la réponse json qui est erronné.

Revois la réponse renvoyé par la page php en amont (celle qui calcul les dates).
23/04/2008, 11h22
sabou94

Quand tu parles de la page php en amont, tu parles de celle qui appelle la fonction tableau() où on construit le calendrier?
Ou la page de fonction de date qui renvoie le nom du mois en francais, etc...
Désolée je suis un peu perdue...
23/04/2008, 11h25
le_chomeur

pourquoi ne test tu pas l'autre calendrier ^^
23/04/2008, 11h28
sabou94

En fait, celui là me convient pour le fait qu'on puisse ajouter des evenements sur une date en BD, c'est ce dont j'ai besoin!
L'autre a l'air pas mal, j'ai regardé, mais je crois pas qu'il ait cette fonctionnalité là?
23/04/2008, 11h36
le_chomeur

Effectivement , l'autre , n'est qu'un date picker , mais l'adaptation n'est pas bien difficile :)
tant pis ;)
23/04/2008, 11h42
SpaceFrog

oui y'a pas grand chose à faire...
23/04/2008, 11h49
sabou94

Je suppose, j'avais pris l'autre dans un soucis de temps, mais bon c'est vrai que si je mets 3jours pour l'adapter à mon environnement de travail...
Je vais quand meme encore essayer de voir ce qui cloche et si je n'y arrive pas, je verrais avec l'autre calendrier ;)
23/04/2008, 12h25
sabou94

Bon j'ai réussi à le faire fonctionner correctement, merci quand meme! :D
23/04/2008, 12h27
le_ben

salut

est ce que tu as suivi le tuto et créé le code ou alors tu as téléchargé les sources (en fin de tuto) ? Parce que dans le tuto, il n'y a pas tout. Je dis ça parce que c'est ce que j'ai fait au début et que je me suis retrouvé dans le même cas que toi.
23/04/2008, 12h28
le_ben

Citation:

Envoyé par sabou94

Bon j'ai réussi à le faire fonctionner correctement, merci quand meme! :D

ah ok. Content pour toi alors :D
Bon je résoud.
23/04/2008, 14h38
sabou94

Ah oui j'ai téléchargé les sources tout en suivant le tuto en fait et j'ai modifié un peu!
D'ailleurs, je n'arrive pas à colorier la cellule contenant le lien dans le calendrier (jour ayant un événement) ! Je ne vois pas à quel moment mettre ca... Tu vois comment faire?
Merci pour le résolu! :-p
23/04/2008, 16h40
sabou94

Bouh j'y arrive pas, pourtant l'auteur du tuto met à la fin que ca devrait être simple de colorier les cellules contenant des événements mais je n'y arrive pas :(
23/04/2008, 16h53
SpaceFrog

tu as le lien du tuto ?
23/04/2008, 16h56
sabou94

Voui :
http://j-seignalet.developpez.com/tu...ax/calendrier/

voilà comment tu pourrais faire (ça marche même si c'est surement pas le top).

Dans le fichier calendrier_ajax.php tu remplis un tableau tab_jours. Dedans tu mets soit un chiffre, soit un lien. Le lien, c'est si tu as des commentaires.
Tu peux donc créer un tableau en parrallèle avec une variable qui dis si c'est un lien ou pas.

exemple (ce sera plus simple):
Je remplis mon tableau tab_jours et le nouveau : tab_liens

si lien alors tab_liens vaut 'ok', sinon il vaut 'no'

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
while($compteur<43){
     if($compteur<$num_jour){
          $tab_jours[$compteur]='';
		  $tab_lien[$compteur]='';
     }else
     {
         //si la date existe, on affiche alors le jour dans la cellule du tableau
         if(checkdate($mois,$num_jour_courant,$annee)){
              //On vérifie si un évènement a lieu ce jour ci
              $date=$annee."/".$mois."/".$num_jour_courant;
              $contenu='';
              $requete="select * from evenements where evenement_date='".$date."'";
              $ress=mysql_query($requete);
              if($ress){
                  $nbre=mysql_num_rows($ress);
 
                  if($nbre>0){
                     //lien vers le script qui va déclencher l'affichage des évènement pour le jour donné
                     $lien='<a href=\'#\' onclick=\'showEvent(\\"'.$date.'\\");\'>'.$num_jour_courant.'</a>';
                     $tab_jours[$compteur]=$lien;
					 $tab_lien[$compteur]='ok';
                  }else
                  {
                    $tab_jours[$compteur]=$num_jour_courant;
					$tab_lien[$compteur]='no';
                  }
                  mysql_free_result($ress);
              }
              $num_jour_courant++;
 
         }else
         {
           $tab_jours[$compteur]='';
		   $tab_lien[$compteur]='';
         }
 
     }
       $compteur++;
     }

ensuite tu insères dans json tes tableaux tab_jours et tab_liens :

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
if(!empty($tab_jours)){
        $retour_json.=' "calendrier" : [ ';
        $compteur=1;
        while($compteur<43){
           if($compteur==42){
            $retour_json.=' { "fill" : "'.$tab_jours[$compteur].'" } ';
           }else
           {
            $retour_json.=' { "fill" : "'.$tab_jours[$compteur].'" } , ';
           }
        $compteur++;
        }
        $retour_json.=' ] , ';
     }
 
 
	 if(!empty($tab_lien)){
        $retour_json.=' "lien" : [ ';
        $compteur=1;
        while($compteur<43){
 		   if($compteur==42){
            $retour_json.=' { "fill" : "'.$tab_lien[$compteur].'" } ';
           }else
           {
            $retour_json.=' { "fill" : "'.$tab_lien[$compteur].'" } , ';
           }
        $compteur++;
        }
        $retour_json.=' ] ';
     }
     $retour_json.=' } ';
 
     echo $retour_json;

Du coup tu peux dans le fichier function inspecter ton tableau et si t'as ok alors tu changes la couleur de la cellule

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function remplirCalendrier(reponsejson) {
       //on utilise la fonction evalJSON de prototype pour parser la réponse JSON
       var data=reponsejson.responseText.evalJSON();
	   //On place les liens suivants,précédents et le mois en cours
       $('link_suivant').onclick=function(){eval(data.lien_suivant) ;};
       $('link_precedent').onclick=function(){eval(data.lien_precedent);};
	   $('titre').innerHTML=data.mois_en_cours;
       //Maintenant, on affiche tous les jours du calendrier
       var compteur=1;
       var id='';       
	   while(compteur<43){
          id=compteur.toString();
          $(id).innerHTML=data.calendrier[(compteur-1)].fill;
//ici on inspecte le tableau lien		
  if (data.lien[(compteur-1)].fill=='ok'){
		$(id).style.background='#eeeeee';
		  }
          compteur++;
       }
}

plus simple sinon !!!
Tu regardes la valeur de data.calendrier[(compteur-1)].fill dans la fonction remplirCalendrier
Si ça commence par "<a href" alors c'est qu'il y a un lien donc tu grises la case.

voili voilou

24/04/2008, 14h43
sabou94

Bonjour et merci pour ta réponse!
J'ai testé le fait de tester la valeur de data.calendrier[(compteur-1)]... et en fait si j'ai un événement le 3avril, ma case est bien coloré comme je le voulais, seulement si je change de mois et que je passe en mai, mon 3 mai est coloré aussi :-/
Je vais continuer à chercher de mon coté mais si vous avez des conseils n'hésitez pas, ca doit etre un truc nul en plus...
Merci beaucoup en tout cas!
:D
24/04/2008, 15h07
sabou94

Au temps pour moi, j'avais oublié de mettre le else si ca ne commencait pas par href, maintenant ca fonctionne correctement, merci à tous ceux qui m'ont aidé! ;)