Discussion :

[guigui69]

Bonjour à tous,

j'essaie d'adapter un code qui a été fait avec prototype pour jquery.


J'ai ce code:

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
 
tableau = function(mois,annee)
{
 
 $.ajax({
   type: "GET",
   url: "./ajax/ajax_calendrier.php",
   data: 'mois=' + mois + '&annee=' + annee,
	success: function(html){
  }
 })
 
 
 
}

Et je doit appeler la fonction suivante après le succes de la premier:
"function remplirCalendrier(reponsejson);"

Comment mettre ca en place avec jQuery? fonction Complete?

Merci d'avance


guigui69

[Alexdezark]

Bonjour,

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
 
tableau = function(mois,annee)
{
 
 $.ajax({
   type: "GET",
   dataType: "json",
   url: "./ajax/ajax_calendrier.php",
   data: 'mois=' + mois + '&annee=' + annee,
   success: function(jsonResp){
     remplirCalendrier(jsonResp);
  }
 })
 
 
 
}

avec bien sur json_encode et header json coté php

Bonne journée

voir : http://api.jquery.com/jQuery.ajax/

[guigui69]

Merci,


La seconde fonction est executé:

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
 
function remplirCalendrier(reponsejson) {
		alert('test');
 
       var data=reponsejson.responseText.parseJSON();
       //On place les liens suivants,précédents et le mois en cours
	   alert('test'+data);
       $('link_suivant').onclick=function(){parse(data.lien_suivant) ;};
       $('link_precedent').onclick=function(){parse(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++;
       }

Voici la réponse a ma premiere fonction:

Code :

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

1
2
 
{"mois_en_cours" : "Avril 2010" , "lien_suivant" : "tableau('05','2010')" , "lien_precedent" : "tableau('03','2010')" ,  "calendrier" : [  { "fill" : "" } ,  { "fill" : "" } ,  { "fill" : "" } ,  { "fill" : "1" } ,  { "fill" : "2" } ,  { "fill" : "3" } ,  { "fill" : "4" } ,  { "fill" : "5" } ,  { "fill" : "6" } ,  { "fill" : "7" } ,  { "fill" : "8" } ,  { "fill" : "9" } ,  { "fill" : "10" } ,  { "fill" : "11" } ,  { "fill" : "12" } ,  { "fill" : "13" } ,  { "fill" : "14" } ,  { "fill" : "15" } ,  { "fill" : "16" } ,  { "fill" : "17" } ,  { "fill" : "18" } ,  { "fill" : "19" } ,  { "fill" : "20" } ,  { "fill" : "21" } ,  { "fill" : "22" } ,  { "fill" : "23" } ,  { "fill" : "24" } ,  { "fill" : "25" } ,  { "fill" : "26" } ,  { "fill" : "27" } ,  { "fill" : "28" } ,  { "fill" : "29" } ,  { "fill" : "30" } ,  { "fill" : "" } ,  { "fill" : "" } ,  { "fill" : "" } ,  { "fill" : "" } ,  { "fill" : "" } ,  { "fill" : "" } ,  { "fill" : "" } ,  { "fill" : "" } ,  { "fill" : "" }  ]  }

Mon but est de parser les réponses json j'ai trouver evalJson pour prototype mais j'ai essayer les equivalent pourQjery mais cela ne fonctionne pas.

Quel paramètre j'ai omis de mettre?

Code :

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

1
2
 
var data=reponsejson.responseText.parseJSON();

Merci d'avance pour votre aide

guigui69

[guigui69]

je pense avoir trouver mon erreur,

maintenant si je fait un alert avec les différents élément json il s'affiche dans la boite de dialogue.
Maintenant je cherche comment en jquery je peut inserer les informations retourner par json dans un span

Code :

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

1
2
 
$('titre').innerHTML=reponsejson.mois_en_cours;

Merci

guigui69

[Alexdezark]

Je pense que pour un Span ce sera comme pour une div :

il faut que la cible ait un identifiant unique :

Code :

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

<div id="maDiv"></div>

et coté jQuery :

Code :

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

$("#maDiv").html(reponsejson.mois_en_cours)

le dièse est requis par jQuery dans ce cas.

Voir :

ID Selector (“#id”)
Selects a single element with the given id attribute.

Profite-en pour étudier la doc de jQuery car elle est suffisamment bien faite pour y trouver de bonnes réponses

note : regarde aussi du coté de append()

[guigui69]

Merci j'avais trouver mon erreur se matin j'ai avancée dans mon code.

Mais je bloc plus sur un probleme classique javascript

Code :

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

1
2
 
<a onmouseover="showEvent("2010/03/1", 1); alert (1);" class="info" href="#">1<span class="hidden" id="visu_info1"></span></a>

la fonction showevent arrive a bien reconnaitre le premier paramètre , mais le seconde (1) il me le déclare indéfini. Le alert derrière était pour tester et il m'affiche le 1 correctement.
Le second paramètre sera toujours des chiffres.

Je suis sur ce petit problème depuis 1 heure. (et je suis sur que cela doit etre tout bete)

Merci d'avance

guigui69

[guigui69]

J'ai encore trouver mon erreur

Par contre la je vait vraiment avoir besoin d'un coup de main:


Le script de calendrier que j'ai modifier etait basé sur le tuto:
http://j-seignalet.developpez.com/tu...ax/calendrier/
mais comme j'utilise jquery j'ai adapter le code.

Tout semble fonctionner parfaitement sauf un élément.

si j'avance ou je recule dans le calendrier de 3 mois le script s'emballe.
Exemple je suis sur janvier, j'avance de 3 mois et ben le calendrier passe au mois d'avril revient au

mois de mars, repart au mois d'avril. Au niveau de l'affiche je reste sur le mois de mars par contre

dans les donnée json c'est bien celle du mois d'avril.

Voici ma page function.js:

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
67
68
 
tableau = function(mois,annee)
{
 
 $.ajax({
   type: "GET",
   dataType: "json",
   url: "./ajax/ajax_calendrier.php",
   data: 'mois=' + mois + '&annee=' + annee,
	success: function(jsonResp){
    remplirCalendrier(jsonResp);
 
  }
 })
 
 
 
}
function remplirCalendrier(reponsejson) {
		//alert('<<<>>>'+reponsejson.lien_suivant+'<<<>>>'+reponsejson.lien_precedent+'<<<');
	   $('#titre').text(reponsejson.mois_en_cours)
       //$('titre').innerHTML=reponsejson.mois_en_cours;
	   //on utilise la fonction evalJSON de prototype pour parser la réponse JSON
       //var data=reponsejson.responseText.parseJSON();
       //On place les liens suivants,précédents et le mois en cours
	   //alert('test'+data);
       $('#link_suivant').click(function(){eval(reponsejson.lien_suivant) ;});
       $('#link_precedent').click(function(){eval(reponsejson.lien_precedent);});
 
       //Maintenant, on affiche tous les jours du calendrier
       var compteur=1;
       var id='';
       while(compteur<43){
          id=compteur.toString();
		  $('#j'+id).empty().append(reponsejson.calendrier[(compteur-1)].fill)
		  //$('#'+id).text(reponsejson.calendrier[(compteur-1)].fill);
          //$(id).innerHTML=data.calendrier[(compteur-1)].fill;
          compteur++;
       }
 
 
 
 
}
function showEvent(date, visuinfo){
 
$.ajax({
   type: "GET",
   url: "./ajax/ajax_commentaires.php",
   data: 'date=' + date ,
	success: function(html){
    remplirCommentaires(html, visuinfo);
 
  }
 })
 
}
function remplirCommentaires(reponse, visuinfo){
		//alert (reponse);
 
         var commentaires=reponse.responseText;
		 //alert (visuinfo);
         $('#visu_info'+visuinfo).empty().append(reponse);
		          // var commentaires=reponse.responseText;
         // $('Evenements').innerHTML=commentaires;
         // PullDown.panel = Rico.SlidingPanel.top( $('outer_panel'), $('inner_panel'));
         // PullDown.panel.toggle();
}

La page ajax (json):

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
<?php
     header('Content-Type: text/x-json; charset: UTF-8');
     //on se connecte à la bdd
     include("../conf/func_calendrier.php");
	 include("../conf/mysql.php");
     //On récupère le mois et l'année pour le traitement
     $mois=$_GET['mois'];
     $annee=$_GET['annee'];
     ///////////////////////////////////////////////////////////////////////////////////
     //   on va formater ici un flux JSON qui va pouvoir etre lu par le js client.
     //   Format du JSON:
     //   {
     //      "mois_en_cours" : $mois_en_cours
     //      "lien_precedent" : $lien_vers_le_mois_precedent ,
     //      "lien_suivant" : $lien_vers_le_mois_suivant ,
     //      "calendrier": [
     //            {
     //
     //               "fill": $contenu_a_afficher //(rien, jour du mois ou jour
     //                                           //du mois avec lien
     //            },
     //                    ]
     //   }
     //
     //
     //
     ///////////////////////////////////////////////////////////////////////////////////
     //
     //                    On prépare le début du retour au format JSON
     ///////////////////////////////////////////////////////////////////////////////////
     $retour_json='';
     ///////////////////////////////////////////////////////////////////////////////////
     //On détermine d'abord les liens "suivant" "precedent" et le "mois en cours" du calendrier
     ///////////////////////////////////////////////////////////////////////////////////
     $mois=$_GET['mois'];
     $annee=$_GET['annee'];
     $retour_json='{';
     //mois en cours
     $mois_fr=getMois($mois);
     $titre=htmlentities($mois_fr." ".$annee,ENT_QUOTES);
     $retour_json.='"mois_en_cours" : "'.$titre.'" , ';
     //lien suivant
     $date_suivant=getSuivant($mois,$annee,1);
     $lien_suivant="tableau('".$date_suivant[$mois]."','".$date_suivant[$annee]."')";
     $retour_json.='"lien_suivant" : "'.$lien_suivant.'" , ';
     //lien précédent
     $date_precedent=getSuivant($mois,$annee,-1);
     $lien_precedent="tableau('".$date_precedent[$mois]."','".$date_precedent[$annee]."')";
     $retour_json.='"lien_precedent" : "'.$lien_precedent.'" , ';
 
 
     //Maintenant, on peut peupler le calendrier sous forme d'un tableau de 6 lignes * 7 colonnes
     //On crée notre tableau de 6semaines*7jours soit 42 éléments.
     //On récupère le jour qui démmarre le mois
     //ON va stocker tous les jours du mois dans un tableau tab_jours php
     $tab_jours=array();
 
     $num_jour=getFirstDay($mois,$annee);
     $compteur=1;
     $num_jour_courant=1;
 
     while($compteur<43){
     if($compteur<$num_jour){
          $tab_jours[$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 commande_cap where date_cc='".$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=\'#\' class=\'info\' onmouseover=\'showEvent(\\"'.$date.'\\", 
 
\\"'.$num_jour_courant.'\\");\'>'.$num_jour_courant.'<span id=\'visu_info'.$num_jour_courant.'\' 
 
class=\'hidden\'></span></a>';
                     $tab_jours[$compteur]=$lien;
                  }else
                  {
 
                    $tab_jours[$compteur]=$num_jour_courant;
                  }
                  mysql_free_result($ress);
              }
              $num_jour_courant++;
 
         }else
         {
           $tab_jours[$compteur]='';
         }
 
     }
       $compteur++;
     }
 
     ///////////////////////////////////////////////////////////////////////////////////
     // Maintenant que l'on a notre tableau d'évènements pour chaque jour du mois
     // On finit de construire la réponse JSON
     ///////////////////////////////////////////////////////////////////////////////////
     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.=' ] ';
     }
     $retour_json.=' } ';
 
     echo $retour_json;
 
?>

func calendrier.php

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
 
<?php
     //Quelques fonctions utiles pour la gestion d'un calendrier
     
     //Transforme un numéro de mois en son nom en français
     function getMois($mois){
       $mois=sprintf("%d",$mois);
       
 
$tab_mois=array(1=>"Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre

","Novembre","Décembre");
       return $tab_mois[$mois];
     }
     
     //fonction qui renvoit le mois et l'année  dans le calendrier en fonction du pas
     //un pas de 1 signifie la date pour le mois suivant celui passé en paramètre
     //un pas de -1 signifie la date pour le mois précédent celui passé en paramètre
     function getSuivant($mois,$annee,$pas){
       $tmstp_suivant=mktime(0,0,0,($mois+$pas),1,$annee);
       $date_suivante[$mois]=date("m",$tmstp_suivant);
       $date_suivante[$annee]=date("Y",$tmstp_suivant);
       return $date_suivante;
     }
     
     //fonction qui retourne le premier jour du mois
     //0->Lundi
     //1->Mardi
     //...
     //6->Dimanche
     function getFirstDay($mois,$annee){
       $tmstp=mktime(0,0,0,$mois,1,$annee);
       //on récupère le numéro du jour de la semaine... mais au format anglais (0->dimanche, ...) mais
       //nous on veut un calendrier commençant le lundi !!
       $jour=date("w",$tmstp);
 
       $tab_jour=array(0=>7,1=>1,2=>2,3=>3,4=>4,5=>5,6=>6);
       
       return $tab_jour[$jour];
     }
?>

Je n'arrive pas voir pourquoi le script s'emballe de cette maniere


je l'ai uploader sur un espace perso:
http://bloomy021.free.fr/fichier/cal...calendrier.php

login/mdp: essai essai

avancer ou recule de au moins 3 mois vous aller voir le probleme (si vous avez firebug pour pourrez-voir les execution des pages ajax.

Quel est le probleme ?

Merci d'avance pour votre aide.

guigui69

[Alexdezark]

Salut,

écoute, je pense que tu t'embète vraiment à vouloir ré-inventer un truc qui existe depuis longtemps dans jQuery : le calendrier...

Regarde ceci : http://docs.jquery.com/UI/Datepicker

Totalement paramétrable, jour de début, langage, evènements etc..

Je te mets juste un bout d'exemple pour l'initialiser en français :

Code :

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

1
2
3
4
5
6
7
8
9
10
$("#date").datepicker({
		monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
		monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun','Jul','Aoû','Sep','Oct','Nov','Déc'],
		dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
		dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
		dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
		dateFormat: 'dd-mm-yy', firstDay: 0, 
		isRTL: false,
		onSelect:function(dateText,inst){/*code à executer*/}	
});

Je te le re-dis si tu veux utiliser jQuery fais bien le tour de la doc car il y a vraiment tout ce qu'il faut pour gagner un maximum de temps sur le développement.

PS : tout ça c'est dans jQuery UI : http://jqueryui.com/

[guigui69]

Merci pour ton aide j'ai justement tomber sur ceci hier soir.

j'ai remarquer l'option beforeShowDay pour indiquer un évènement voulu, mais je ne trouve pas comment lui indiquer qu'il doit interroger a travers php une bdd pour récupérer les date des évènement et le retranscrit dans le calendrier (en changement la couleur du numéro).

je pense qu'on l'on faire appel à une fonction ajax, mais je ne voit pas comment et quoi retourner date ou bien true ou false?

Merci d'avance pour votre aide.

guigui69