plugin Week Calendar, exploitation des données dans la fonction de rappel

Version imprimable

plugin Week Calendar, exploitation des données dans la fonction de retour

Bonjour,

J'utilise le plugin Jquery Week Calendar (du moins j'essaie :aie:) et j'ai quelques problèmes pour exploiter les données.

De ce que j'ai compris, pour récupérer des horaires et les afficher dans le calendrier, il faut utiliser la fonction javascript suivante et retourner un code en JSON : (fourni dans les fichiers de la démo)
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 function getEventData() { var year = new Date().getFullYear(); var month = new Date().getMonth(); var day = new Date().getDate(); return { events : [ { "id":1, "start": new Date(year, month, day, 12), "end": new Date(year, month, day, 13, 30), "title":"Lunch with Mike" }, { "id":2, "start": new Date(year, month, day, 14), "end": new Date(year, month, day, 14, 45), "title":"Dev Meeting" } ] }; }
Le code JSON des différents horaires est codé en dur dans la démo.

Comme le code renvoyé est du JSON, j'ai donc essayé de faire une fonction qui renvoi du JSON pour pouvoir récupérer des horaires dynamiquement. J'ai donc modifié la fonction précédente en ajoutant la fonction getJSON :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function getEventData() { var year = new Date().getFullYear(); var month = new Date().getMonth(); var day = new Date().getDate(); var test = 'ok'; var url = "test.php?t1=1&t2=2"; // j'aurai pu mettre {t1:1, t2:2} apres le "url," $.getJSON(url, function(json) { alert( test ); $.each(json.horaires, function(i,horaire) { alert(horaire.id); }); }); }
Mon fichier "test.php" appelé : (dans le même répertoire que mon fichier javascript et html)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <?php if( 1 == 1 ) // ce test ne sert effectivement à rien pour l'instant ^^ { $tab = '{ "id":1, "start": Thu May 20 2010 12:00:00 GMT+0200, "end": Thu May 20 2010 13:00:00 GMT+0200, "title":"Lunch with Mike" }'; } else { $tab = '{ "id" : 0, }'; } echo '{"horaires":['.json_encode( $tab ).']}'; ?>
Dans Firebug je vois bien que le traitement s'effectue, mais le callback de la fonction getJSON ne fonctionne pas. Le alert( test ); passe mais pas la boucle suivante. Je ne sais pas comment faire sachant qu'aucune erreur ne s'affiche dans firebug.

Ensuite quand je saurais récupérer les données correctement avec cette fonction, il faudra passer les données au return, et là aussi je bloque, j'ai essayer de mettre directement le code JSON d'un horaire dans une variable mais ça ne fonctionne pas.

J'ai aussi un autre soucis de transcription de date de PHP à JS. Dans le code JS la date est créer comme ceci....
Code:

1 2 3 4 year = new Date().getFullYear(); month = new Date().getMonth(); day = new Date().getDate(); new Date(year, month, day, 12)
....et m'affiche : Thu May 20 2010 12:00:00 GMT+0200
Je n'arrive pas à reproduire la date en langage php dans mon fichier test.php.

Si une âme charitable passait pas là et pouvait m'aider ce serait vraiment sympa.
Je vous remercie par avance :ccool:

Cordialement

Bon j'ai viré la fonction getJSON et je l'ai remplacé par une requête XMLHttpRequest, je récupère bien mes données XML mais il y a toujours le problème du retour des données :
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 var retour = '['; $.ajax({ type: 'GET', url: './test.php', async: true, data: "retour=" + retour, success: function(xml) { $(xml).find('un_horaire').each(function() { var id = $(this).find('id').text(); var start = $(this).find('start').text(); var end = $(this).find('end').text(); var title = $(this).find('title').text(); retour += '{"id":"' + id + '","start":"' + start + '","end":"' + end + '","title":"' + start + '"},'; }); retour = retour.substring( 0, retour.length-1 ) + ']'; } }); alert(retour); // M'affiche juste "[" return{ events : retour };
Dans le callback "success" j'utilise la variable "retour", mais une fois le callback exécuté je n'ai plus accès aux données de cette variable, comment régler le problème de porté de cette variable ?

En ce qui concerne le return{ events : retour }; j'ai toujours une soucis, si je fais ça (code original), ça marche :
Code:

1 2 3 4 5 6 7 8 9 10 11 return { events : [ { "id":1, "start": new Date(year, month, day, 12), "end": new Date(year, month, day, 13, 30), "title":"Lunch with Mike" } ] };
Mais quand je fais cela, non :
Code:

1 2 3 4 5 6 retour = 'events : [{"id":"1",' +'"start":"'+new Date(year, month, day, 12) +'","end":"'+new Date(year, month, day, 13, 30) +'","title":"Lunch with Mike"}]'; return{ eval(retour) };
Comment faire pour que ça fonctionne :?

Merci d'avance :ccool:

21/05/2010, 19h06
danielhagnoul

Bonsoir.

En jQuery 1.4 le format du code JSON est très important, voir : http://api.jquery.com/jQuery.getJSON/

Bonjour,

J'ai apporté quelques modifications au code. Mais le problème du retour des données à la fin de la fonction getEventData() est toujours là.
Pour cette application on utilise JQ 1.3.1 et JQ UI 1.7.2.
Je suis en mode synchrone de manière à pouvoir utiliser les données que je récupère en Ajax lors du return.

Maintenant j'ai ce code Javascript :

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
function getEventData()  
{
  var year = new Date().getFullYear();
  var month = new Date().getMonth();
  var day = new Date().getDate();
  var retour  = '';
 
  $.ajax({            
    type:  'GET',        
    url:  './test.php',    
    async:  false,        
    success: function( xml ) 
    {        
      $(xml).find('un_horaire').each(function() 
      {          
        var idhoraire = $(this).find("id").text();
        var annee = $(this).find("annee").text();
        var mois = eval($(this).find("mois").text() - 1);
        var jour = $(this).find("jour").text();
        var heureDeb = $(this).find("heureDeb").text();
        var minuteDeb = $(this).find("minuteDeb").text();
        var heureFin = $(this).find("heureFin").text();
        var minuteFin = $(this).find("minuteFin").text();
        var titre = $(this).find("titre").text();
 
        retour += '{';
        retour += '"id":"' + idhoraire + '",';
        retour += '"start":"' + new Date( annee, mois, jour, heureDeb, minuteDeb ) + '",';
        retour += '"end":"' + new Date( annee, mois, jour, heureFin, minuteFin ) + '",';
        retour += '"title":"' + titre + '"';
        retour += '},';
      });
      retour = retour.substring( 0, retour.length-1 );
    }
  });
  return jsonParse('{"events":['+retour+']}');
}

Et mon code PHP :

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
 
<?php
  header( "Content-Type: text/xml" );
  echo '<?xml version="1.0"?>';
  require_once( dirname( __FILE__) . '/../../../../config.inc.php' );
  require_once( dirname( __FILE__) . '/../../../../' . $config[ 'path' ][ 'modele' ] . '/phppdo.class.php' );
  
  $db = db_connect();
  $req = 'SELECT * FROM `edt_cour`;';
  $resultat = $db->query( $req );
  
  if( $resultat )
  {
    echo '<horaires>';
    while( $ligne = $resultat->fetch( PDO::FETCH_ASSOC ) )
    {
      echo '<un_horaire>';
      echo '  <id>', $ligne[ 'id_cr' ] ,'</id>';
      echo '  <annee>', substr( $ligne[ 'date_cr' ], 0, 4) , '</annee>';
      echo '  <mois>', substr( $ligne[ 'date_cr' ], 5, 2) , '</mois>';
      echo '  <jour>', substr( $ligne[ 'date_cr' ], 8, 2) , '</jour>';
      echo '  <heureDeb>', substr( $ligne[ 'heure_deb_cr' ], 0, 2) , '</heureDeb>';
      echo '  <minuteDeb>', substr( $ligne[ 'heure_deb_cr' ], 3, 2) , '</minuteDeb>';
      echo '  <heureFin>', substr( $ligne[ 'heure_fin_cr' ], 0, 2) , '</heureFin>';
      echo '  <minuteFin>', substr( $ligne[ 'heure_fin_cr' ], 3, 2) , '</minuteFin>';
      echo '  <titre>Lunch with Mike</titre>';
      echo '</un_horaire>';
    }
    echo '</horaires>';
  }
?>

J'ai testé ma chaine de caractères (variable retour) sur le site http://json.parser.online.fr/ et la syntaxe de ma chaine est bien écrite.
J'obtiens exactement cette ligne :

Code:

{"events":[{"id":"1","start":"Fri May 21 2010 09:00:00 GMT+0200","end":"Fri May 21 2010 14:00:00 GMT+0200","title":"Lunch with Mike"}]}

La chaine étant bien formée, j'ai trouvé une bibliothèque qui permet de parser une chaine en un objet JSON avec la fonction jsonParse(chaine) (ICI)

L'objet renvoyé est bien du JSON bien formé mais toujours rien ne s'affiche.
Aucune erreur ne s'affiche aussi. Le calendrier s'affiche sans mes horaires chargés alors que quand il avait une erreur le calendrier ne s'affichait même pas.

Je commence à désespérer là, JSON de *?!*£$ . Qué passa ?

Bonsoir.

Idée : dans la documentation du plug-in Week Calendar le format de date n'est pas le même.
Code:

1 2 3 4 5 events:[{"id":10182, "start":"2009-05-03T12:15:00.000+10:00", "end":"2009-05-03T13:15:00.000+10:00", "title":"Lunch with Mike" }
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 // le format de date du plugin Week Calendar // 2009-05-03T12:15:00.000+10:00 // https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Date // The following example shows how to format a date in an ISO 8601 format using UTC: function ISODateString(d){ function pad(n){ return ((n < 10) ? ('0'+n) : (n)); } return d.getUTCFullYear()+'-' + pad(d.getUTCMonth()+1)+'-' + pad(d.getUTCDate())+'T' + pad(d.getUTCHours())+':' + pad(d.getUTCMinutes())+':' + pad(d.getUTCSeconds())+'Z'; } // 2010-05-23T17:10:32Z console.log(ISODateString(new Date()));
Suggère de réaliser un essai avec ce format.

Dans la documentation du plugin il y a également une fonction pour la manipulation des dates :

Citation:

$(”#calendar”).weekCalendar(”formatDate”, date, [format]); //formats the date as a date based on the format of the current calendar instance or the format if supplied.

Et en dessous, je trouve à l'instant :

Citation:

Calendar events have the following format

id – [integer] – id of the calendar event
title – [string] – The title for display in the calendar
start – [date, ISO8601 String, IETF String or timestamp] – the start date / time of the event.
end – [date, ISO8601 String, IETF String or timestamp] – the end date / time of the event.

25/05/2010, 21h10
MeHo_

Effectivement il y avait un problème au niveau du formatage de la date.
Uniquement ça -___-'

Je créé et renvois la date depuis le code PHP. Mais il faut modifier le format en ISO 8601, en ajoutant les microsecondes pour arriver à ce format "2009-05-03T12:15:00.000+10:00" car sans les microsecondes le système n'accepte pas correctement la date.