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

**MeHo_** · 20/05/2010, 16h52

Bonjour,

J'utilise le plugin Jquery Week Calendar (du moins j'essaie

) 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 :

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
 
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 :

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
 
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 :

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
 
<?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 :

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

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

Cordialement

**MeHo_** · 21/05/2010, 10h45

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 :

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
 
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 :

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

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 :

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

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

**danielhagnoul** · 21/05/2010, 19h06

Bonsoir.

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

**MeHo_** · 23/05/2010, 16h42

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 :

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
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 :

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
 
<?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 :

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

{"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 ?

**danielhagnoul** · 23/05/2010, 19h22

Bonsoir.

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

Code :

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

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 :

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
// 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 :

$(”#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 :

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.

**MeHo_** · 25/05/2010, 21h10

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.

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager