11547 sujets

JavaScript, DOM et API Web HTML5

Jquery / javascript / ajax - impossible de récupérer valeur PHP

Bonjour,

Premier post ici ! Bon alors, j'ai un script javascript avec jquery et un script php. J'ai bien lu la doc sur tout ça, et globalement, je m'en sors bien, sauf qu'il y a quelques petits trucs qui m'échappent, et j'ai besoin de lumière en français !

mon script à pour but de générer des graphiques grâce à Flot
ça marche bien, sauf que dans les options ajax que je propose à mon utilisateur, il peut choisir une représentation en valeur relative (%) ou en valeur absolue (données brutes) pour l'axe des ordonnées.

Alors donc le truc que je ne pige pas c'est :
1- comment, au chargement d'une page dans le navigateur, envoyer une requête au script php et ensutie passer la valeur de retour à une variable globale que j'utilise tout au long de mon script (et qui contient les données utilisées pour générer le graphique sous forme d'une chaine json)

Mon code js fait ça :

$(document).ready(function () {

/********************************************************
 * Definition des valeurs des courbes à partir de PHP
 */
//var datasets='';
// var NbreEleveValueType='';
	NbreEleveValueType=$('input[name="NbreEleveValueType"]:checked').attr('value');
	$.post(//methode jquery
	'comparaisonYearExam-GraphData.php',// url cible
	{'NbreEleveValueType':NbreEleveValueType},//données
	function success(retour)
		{
			datasets=retour;
		});
});
console.log(datasets);


ce qui est pénible, c'est que si je fais un alert(datasets); juste en dessous de datasets=retour; datasets contient bien les données mises en forme. Mais console.log(datasets) est vide !

Donc visiblement, problème de variable en dehors de la function success(). J'ai essayé de déclarer ma variable datasets de différentes manières et à différents endroit, mais rien n'y fait. Alors que firebug me retour comme résultat du post la bonne valeur pour datasets.

Donc je pense que c'est ma logique qui n'est pas bonne. Peut-etre faut-il procéder autrement pour charger des données via une requête ajax au chargement de la page ?

Bon, je ne suis pas sur d'être très clair, n'hésitez pas à me demander s'il vous manque des infos pour m'aider !
Toute piste à explorer (même en anglais Smiley langue ) serait vraiment appréciée !!

Merci !
Modifié par daeavelwyn (21 Dec 2011 - 18:33)
Déjà une chose que je ne comprends pas.

Si ta requete tu l'as fais dès le chargement ... pourquoi ne pas directement la transmettre en PHP vers ton JS, plutôt que de demander de faire une requete Ajax en plus ?

Tu pourrais "init" ton JS avec ta variable dès le chargement par exemple.

Sinon, pour déclarer (ce que tu sembles avoir testé ...), c'est bien de mettre

var datasets;


avant l'ouverture d'une fonction ou d'un événement


var datasets,
     NbreEleveValueType;

NbreEleveValueType = $('input[name="NbreEleveValueType"]:checked').attr('value');

$.post(
	'comparaisonYearExam-GraphData.php',
	{'NbreEleveValueType':NbreEleveValueType},
	function success(retour){
			datasets=retour;
        }
);

console.log(datasets);


Hum, en faisant ça, je comprend ton soucis, ton 
console.log(datasets);

se trouve EN DEHORS de ton $(document).ready.

Par conséquent, si tu veux que ta variable soit disponible en dehors de $(document).ready, ta déclaration de variable (var machin;) doit être également en dehors de $(document).ready (c'est à dire juste avant).
Bonsoir,

Ce que dit kenor est vrai mais la variable sera toujours vide Smiley smile .
Par défaut dans jquery, les fonctions post, get et ajax sont asynchrone. Le script continue donc de s'exécuter sans attendre qu'elles ce termines. Donc si tu à besoin de faire quelque chose de 'retour', fait le dans la fonction de succès et oubli datasets.
L'autre moyen serais de faire une requête synchrone mais pendant ce temps le js est 'bloqué'.
Salut les gars

Merci pour vos réponses . Bon, en fait dans le cop/coll que j'ai fait, j'ai mis le $(document).ready à l'arrache, mais dans mon script, il est bien placé et le console.log ne me sert pas en vrai vu que j'utilise firebug.

Pour la var datasets, en fait, j'ai lu dans la doc javascript qu'il y a plusieurs manière de déclarer une variable dans ou à l'extérieur d'une fonction.

J'ai choppé ça sur un forum anglais, mais je ne sais plus où :
var v1; // this variable has global scope

function func1(){
var v2; // this variable is only visible inside func1
// v1 is still visible here
}


function func2(){
var v3; // v3 is only visible inside func2()
// v1 is also visible here
// v2 is not visible here

function func3(){
var v4; // v4 is only visible inside func3()
// v1 is also visible here
// v2 is not visible here
// v3 is also visible here
}

}

Bon, je trouvais ça clair quoi. Mais comme tu le signales au début de ton post, ça doit être un problème logique, donc je vais détailler le truc pour avoir ton avis.

Je suis sur une page avec un tableau. sur cette page, il y a un lien "générer un graphique" quand on clique sur ce lien, on arrive sur la page contenant mon code buggé.

dans cette page buggé, je ne mets pas de php, je veux séparer le traitement de donnée de la présentation (pour des questions de maintenance du code et de débuggage)

Bon, en fait, j'ai fini par prendre un papier et un crayon et me faire des jolis dessins représentant le parcours des données ! Bilan, c'est bien ma logique qui est en cause, c'est impossible de charger la page la première fois puisque pour ça, il faut d'abord que les données soient en forme JSON.

Tu as raison jo_link_noir, c'est la vision asynchrone de tout ça qui me met le cerveau en frille !
donc voilou, merci de votre aide, ça m'a permis de mettre mes idées au claire ! Smiley lol
Modifié par daeavelwyn (21 Dec 2011 - 19:37)
Ok, le principal c'est que ce soit claire dans ta tête Smiley langue

Sinon c'est bien ça au niveau de la déclaration (ce que tu as copié du site anglais).
Erf, bon, apparement, c'est pas si clair dans ma tete :-p

Bon je vous mets le code entier, attention, c'est long ! L'idée c'est que quand je coche les radio qui sont dans "#NbreEleveValueType" ça me change l'axe des ordonnées....Je prends toutes les suggestions !

<?php
session_start();
require('../config.inc.php');
require('../functions.inc.php');
SqlConnect(); //connexion a la base
SqlVerifyIfDbExist(); //verification de l'existence de la bdd

$LyceeArray=$_SESSION['lycee'];
$ClasseArray=$_SESSION['classe'];
$GlobalDisplay=$_SESSION['GlobalDisplay'];
// print_r($GlobalDisplay);//DEBUG

/*************************************
 *		PREPARATION DES DONNÉES
*/

foreach($LyceeArray As $lycee)
{//Pour chaque type de lycée
foreach($GlobalDisplay As $key => $value)
{//on parcours l'ensemble des données
if(PeriodeDecoupeAnnee($GlobalDisplay[$key]['Classe']) == 'Trimestre')
{//En fonction de la découpe de l'année
$periodeCut="Trimestre";
foreach($GlobalDisplay[$key]['NoteMatiere'] As $key2 => $value2)
{
	if($value2 !="")
	{
		switch (substr($key2,-1))
		{
			case '1':
				$MoyTrim1PerMatiere[$key2][]=round($GlobalDisplay[$key]['NoteMatiere'][$key2],0);
				break;
			case '2':
				$MoyTrim2PerMatiere[$key2][]=round($GlobalDisplay[$key]['NoteMatiere'][$key2],0);
				break;
			case '3':
				$MoyTrim3PerMatiere[$key2][]=round($GlobalDisplay[$key]['NoteMatiere'][$key2],0);
				break;
			case '4':
				$MoyAnneePerMatiere[$key2][]=round($GlobalDisplay[$key]['NoteMatiere'][$key2],0);
				break;
			case '5':
				$NoteExamPerMatiere[$key2][]=$GlobalDisplay[$key]['NoteMatiere'][$key2];
				break;
		}
	}
}
}
elseif(PeriodeDecoupeAnnee($GlobalDisplay[$key]['Classe']) == 'Semestre')
{/*Si on fonctionne par semestre on a les deux notes des semsetres (MATHS1 et MATHS2) puis la moyenne de l'année (MATHS3)
	Puis la note à l'exam (MATHS4)
	*/
	$periodeCut="Semestre";
	foreach($GlobalDisplay[$key]['NoteMatiere'] As $key2 => $value2)
	{
		if($value2 !="")
		{
			switch (substr($key2,-1))
			{
				case '1':
					$MoySem1PerMatiere[$key2][]=round($GlobalDisplay[$key]['NoteMatiere'][$key2],0);
					break;
				case '2':
					$MoySem2PerMatiere[$key2][]=round($GlobalDisplay[$key]['NoteMatiere'][$key2],0);
					break;
				case '3':
					$MoyAnneePerMatiere[$key2][]=round($GlobalDisplay[$key]['NoteMatiere'][$key2],0);
					break;
				case '4':
					$NoteExamPerMatiere[$key2][]=$GlobalDisplay[$key]['NoteMatiere'][$key2];
					break;
			}
		}
	}
}
}
}

// print_r($MoyTrim1PerMatiere);//DEBUG
// print_r($MoyTrim2PerMatiere);//DEBUG
// print_r($MoyTrim3PerMatiere);//DEBUG
// print_r($MoySem1PerMatiere);//DEBUG
// print_r($MoySem2PerMatiere);//DEBUG
// print_r($MoyAnneePerMatiere);//DEBUG
// print_r($NoteExamPerMatiere);//DEBUG


/*
 *	Mise en forme des données pour les intégré à Flot
 */

$NbreTotalEleve=count($GlobalDisplay);
// echo $NbreTotalEleve;//DEBUG

$ValueTypeRelative='';
//Gestion valeur des Y en relative (% d'élèves) ou absolue (Nbre d'élève)
if(isset($_POST['NbreEleveValueType']) && !empty($_POST['NbreEleveValueType']))
{
	// 	echo $_POST['NbreEleveValueType'];//DEBUG
	if($_POST['NbreEleveValueType'] == 'relative')
	{
		$ValueTypeRelative=TRUE;
	}
	elseif($_POST['NbreEleveValueType'] == 'absolute')
	{
		$ValueTypeRelative=FALSE;
	}
	// 	echo $ValueTypeRelative;//DEBUG
}
else
{
	$ValueTypeRelative=TRUE;
}

$dataArray=array();

if(!empty($MoyTrim1PerMatiere))
	{$dataArray[]=MoyCourbeCreation($MoyTrim1PerMatiere,$NbreTotalEleve,$periodeCut,$ValueTypeRelative,FALSE);}
if(!empty($MoyTrim2PerMatiere))
	{$dataArray[]=MoyCourbeCreation($MoyTrim2PerMatiere,$NbreTotalEleve,$periodeCut,$ValueTypeRelative,FALSE);}
if(!empty($MoyTrim3PerMatiere))
	{$dataArray[]=MoyCourbeCreation($MoyTrim3PerMatiere,$NbreTotalEleve,$periodeCut,$ValueTypeRelative,FALSE);}
if(!empty($MoySem1PerMatiere))
	{$dataArray[]=MoyCourbeCreation($MoySem1PerMatiere,$NbreTotalEleve,$periodeCut,$ValueTypeRelative,FALSE);}
if(!empty($MoySem2PerMatiere))
	{$dataArray[]=MoyCourbeCreation($MoySem2PerMatiere,$NbreTotalEleve,$periodeCut,$ValueTypeRelative,FALSE);}
if(!empty($MoyAnneePerMatiere))
	{$dataArray[]=MoyCourbeCreation($MoyAnneePerMatiere,$NbreTotalEleve,$periodeCut,$ValueTypeRelative,FALSE);}
if(!empty($NoteExamPerMatiere))
	{$dataArray[]=MoyCourbeCreation($NoteExamPerMatiere,$NbreTotalEleve,$periodeCut,$ValueTypeRelative,FALSE);}

$JSON_String='';

foreach($dataArray As $key =>$value)
{
	foreach($dataArray[$key] As $value2)
	{
		$JSON_String.=$value2.',';
	}
}
$JSON_String=substr($JSON_String,0,-1);//on affiche en enlevant la dernière virgule

if($_POST['ajaxLoad']==1)
{
	echo $JSON_String;
}
?>
<html>
<head>
	<title>Graphique</title>
	<script type="text/javascript" src="../lib/jquery.js" > </script>
	<script type="text/javascript" src="../lib/flot/jquery.flot.js" > </script>
	<script type="text/javascript" src="../lib/flot/curvedLines.js" > </script>
	<script type="text/javascript" src="../lib/jquery.corner.js" > </script>
	<script type="text/javascript">
		$(document).ready(
			function()
			{//Quand le document est chargé on exécute une fonction
				$("#content").corner();
				$("#GraphDisplay").corner();
				$("#white-border").corner();
			}
			)
	</script>

	<link type="text/css" rel="stylesheet" media="screen" href="../style-graph.css" />
	<link type="text/css" rel="stylesheet" media="print" href="../style-print-graph.css" />
</head>
<body>

<div id="debug"></div>

<div id="header-menu">
	<div id="header-menu-inside">
		<h3>
			<?php
			/*
			*	Affichage de la (des) classe(s) dans l'entête
			*/	echo 'classe : ';
				foreach($_SESSION['classe'] As $classe)
					{
						echo $classe.'  ';
					}
			?>
		</h3>

		<ul>
			<li id="ToolTip">
				<input id="enableTooltip" type="checkbox" checked="checked">
				<label>Activer/D&eacute;sactiver les infos-bulles</label>
			</li>
			<li id="NbreEleveValueType">
			Axe des ordonn&eacute;es en :
				<input type="radio" name="NbreEleveValueType" value="relative">
				<label>Valeur relative</label>
				<input type="radio" name="NbreEleveValueType" value="absolute">
				<label>Valeur absolue</label>
			</li>
			<li id="hoverdata">
				Pourcentage d'&eacute;l&egrave;ve : <span id="y">0</span>%
				Note sur 20 : <span id="x">0</span>
			</li>
		</ul>
		<div class="clearfloats"></div>
	</div>
</div>

<div id="content" <?php if (empty($_SESSION['username'])) {echo 'style="display:none;"';  }?> >
	<div id="content-inside" >
		<fieldset class="alone">
		<legend>Montrer/Cacher</legend>
			<div id="choices"></div>
		</fieldset>
	</div>
</div>

<div id="GraphDisplay" <?php if (empty($_SESSION['username'])) {echo 'style="display:none;"';  }?> >
	<div id="white-border">
		<div id="placeholder">
		</div>
	</div>
</div>

<script type="text/javascript">

$(document).ready(function () {

/********************************************************
 * Definition des valeurs des courbes à partir de PHP
 */

var datasets={<?=$JSON_String;?>};

/********************************************************************/

/*******************************************************************
 *	Paramètre des checkboxes
 */

function CheckboxParam(datasets)
{
    // hard-code color indices to prevent them from shifting as
    // graph-lines are turned on/off
    var i = 0;
    $.each(datasets, function(key, val) {
        val.color = i;
        ++i;
    });

    // insert checkboxes
    choiceContainer = $("#choices");
    $.each(datasets, function(key, val) {
        choiceContainer.append('<input type="checkbox" name="' + key +
                               '" checked="checked" id="id' + key + '">' +
                               '<label for="id' + key + '">'
                                + val.label + '</label>');
    });
    choiceContainer.find("input").click(plotAccordingToChoices);

	var ValueTypeContainer = $("NbreEleveValueType");
	ValueTypeContainer.find("input").click(plotAccordingToChoices);
}
CheckboxParam(datasets);
/******************************************************************/

/********************************************************
*	make the chart redrawing according to checked boxes
*/
    function plotAccordingToChoices() {
        var data = [];
        choiceContainer.find("input:checked").each(function () {
            var key = $(this).attr("name");
            if (key && datasets[key])
                data.push(datasets[key]);
        });
        if (data.length > 0)
			$.plot($("#placeholder"), data, {
                yaxis: { min: 0 },
                xaxis: { tickDecimals: 0, tickSize:1, min:0, max:20, ticks:20 },
				series: {
					curvedLines: {active: true, show: true, lineWidth: 2.5, fit: true, fitPointDist: 0.000010},//utilise le plugin ../lib/flot/curvedLines.js
					lines: { show: false },//si on utilise le plugin curvedLines, on masque les lignes par defaut
				   points: { show: true }
				},
				grid: { hoverable: true}
            });
    }
    plotAccordingToChoices();
/*****************************************************************/

/*****************************************************************
 *	Apparence des tooltips
 */
	function showTooltip(x, y, contents) {
		$('<div id="tooltip">' + contents + '</div>').css( {
			position: 'absolute',
			display: 'none',
			top: y + 5,
			left: x + 5,
			border: '1px solid #fdd',
			padding: '2px',
			'background-color': '#fee',
			opacity: 0.80
		}).appendTo("body").fadeIn(200);
	}

	//tooltip definition and text
	var previousPoint = null;
	$("#placeholder").bind("plothover", function (event, pos, item) {
		$("#x").text(pos.x.toFixed(2));
		$("#y").text(pos.y.toFixed(2));

		if ($("#enableTooltip:checked").length > 0) {
			if (item) {
				if (previousPoint != item.dataIndex) {
					previousPoint = item.dataIndex;

					$("#tooltip").remove();
		var x = item.datapoint[0].toFixed(2),
			y = item.datapoint[1].toFixed(2);

			showTooltip(item.pageX, item.pageY,
						item.series.label +"<br/> " + y + " % d'&eacute;l&egrave;ve ont "  + x + "/20");
				}
			}
			else {
				$("#tooltip").remove();
		previousPoint = null;
			}
		}
	});
/*************************************************************************/

/*****************************************************************
 *	Gestion de l'axe Y soit valeur relative, soit valeur absoule
 */
$("#NbreEleveValueType").change(
	function(){
		var NbreEleveValueType='';
		NbreEleveValueType=$('input[name="NbreEleveValueType"]:checked').attr('value');
		$.post(//methode jquery
		'comparaisonYearExam-GraphData.php',// url cible
		 {'ajaxLoad':1,'NbreEleveValueType':NbreEleveValueType},//données
		 function(retour)
		 {
			 $("#GraphDisplay").empty().append(
				 function(){
					 datasets=retour;
				}
			);
			 $("#NbreEleveValueType").empty().append(retour);
		 }
		 );
	});
});
</script>

</body>
</html>
bon, en fait, je bloque surtout là :

/*****************************************************************
 *	Gestion de l'axe Y soit valeur relative, soit valeur absoule
 */
$("#NbreEleveValueType").change(
	function(){
		var NbreEleveValueType='';
		NbreEleveValueType=$('input[name="NbreEleveValueType"]:checked').attr('value');
		$.post(//methode jquery
		'comparaisonYearExam-GraphData.php',// url cible
		 {'ajaxLoad':1,'NbreEleveValueType':NbreEleveValueType},//données
		 function(retour)
		 {
			 $("#GraphDisplay").empty().append(
				 function(){
					 ???????????????????????????????????????????
				 });
			 $("#debug").empty().append(retour);
		 }
		 );
	});


Un peu marre de pas piger là....j'vais aller miamer quand meme ^_^
J'ai un peu regarder le code et voici quelques remarques:

Tu peux indiquer l'encodage de ton document, ça éviterais les entités (&eacute; et co)
http://www.alsacreations.com/astuce/lire/69-declarer-encodage-des-caracteres.html

Il manque une partie au niveau du label dans ton formulaire: http://www.alsacreations.com/astuce/lire/6-utiliser-element-label-input-formulaires.html

Au environ de la ligne 235 il y a '$("NbreEleveValueType");'. Mais ne serais-ce pas plutôt '$("#NbreEleveValueType");' ?
Au final je pense que tu peux l'enlever, ça ne fait rien et visiblement ça ne t'as pas gêné…

utiliser la virgule si tu veux capturer plusieurs éléments dans un sélecteur.
$("#content").corner();
$("#GraphDisplay").corner();
$("#white-border").corner();
//devient
("#content, #GraphDisplay, #white-border").corner();


var NbreEleveValueType='';
NbreEleveValueType=$('input[name="NbreEleveValueType"]:checked').attr('value');

En une ligne (je chipote ^^)
var NbreEleveValueType=$('input[name="NbreEleveValueType"]:checked').attr('value');



Finalement pour le problème d'origine, il faut un peu expliquer ce que contient result, ce sera plus simple pour t'aider.
D'après ce que j'ai comprit il faudrait faire

		 function(retour)
		 {
			 datasets=result;
			 plotAccordingToChoices();
			 $("#NbreEleveValueType").empty().append(retour);
		 }

Mais rien n'est moins sûr Smiley lol .
Who, alors, merci pour ta réponse Smiley smile Dans l'ordre :
1-j'utilise aussi l'encodage, mais certains navigateur (au hasard, mais vraiment au hasard IE) produisent des résultats éxotiques et puis j'ai pris l'habitude de penser mes texte comme ça, méthode solide, donc bon, on verra quand IE aura 100% au test ACID3...
2-Merci pour les labels, j'avais jamais fait gaffe à cette histoire du for....je vais me renseigner sur l'utilité de la chose...
3-Ouai, le code est crade, et je vais corriger tout ça, mais dès que j'aurais pigé ce qui merde dans mon truc Smiley smile
4- Bon alors entrons dans le vif du sujet !!!

la var retour contient une chaine comme celle là :
{ label: "y = 3", data: [[0, 3], [10, 3]]}

Mais en fait, je récupère bien la chaine, ça y a pas de soucis. Ce qui ne marche pas, c'est le refresh du graphique !
j'ai créé un id de debuggage en haut de la page, et je vois bien quand je clique sur le bouton radio que les données sont reçu et cohérentes avec ce que j'attends ( $("#debug").empty().append(retour);)

MAIS, impossible de faire un refresh du graphique plotAccordingToChoices(); ne semble pas etre prise en compte Smiley eek

Voilà ce que j'ai pour l'instant dans mon post :

		$.post(//methode jquery
		'comparaisonYearExam-GraphData.php',// url cible
		 {'ajaxLoad':1,'NbreEleveValueType':NbreEleveValueType},//données
		 function(retour)
		 {
			 $("#debug").empty().append('{'+retour+'}');
			datasets='{'+retour+'}';
			 plotAccordingToChoices();
			 $("#GraphDisplay").empty().append(retour);
		 }

alors ce qui est fou, c'est que $("#GraphDisplay").empty().append(retour); m'affiche bien en lieu et place du graphique, la chaine json qui sert normalement de données au graphique, et si je commente cette ligne, ploAccordingToChoices() devrait s'exécuter et me redessiner le graphique, mais ça ne le fait pas ! Rien à signaler de la part de firebug non plus Smiley ohwell
J'ai pas trop d'outil pour debbugger et démêler ce mer***r(credi)....
Merci à toi jo_link_noir et aussi à kenor pour vous penchez sur mon problème !
Modifié par daeavelwyn (22 Dec 2011 - 16:04)
Pour être plus précis, voilà exactement le format de données que je récupère :

{ label: "Foo", data: [ [10, 1], [17, -14], [30, 5] ] },
    { label: "Bar", data: [ [11, 13], [19, 11], [30, -7] ] }

Modifié par daeavelwyn (22 Dec 2011 - 16:15)
Je pense que le type n'est pas bon.
En fait datasets est une chaîne de caractère, mais tu veux un objet ? Ou un tableau d'objets ? J'ai un doute '^^
Pour le moment un `typeof datasets` retourne "string", regarde du côté de jQuery.parseJSON.
Modifié par jo_link_noir (22 Dec 2011 - 17:19)
Yo !
Bon, ça avance (grâce à toi jo_link_noir, encore un grand merci!), mais je galère toujours sur un truc con de conversion de données.
dans ce block de code :

		 function(retour)
		 {
			 $("#debug").empty().append(retour);
			 var JsonStringToParse = retour.split(",");
			 alert(typeof JsonStringToParse+JsonStringToParse);
			 datasets=jQuery.parseJSON(JsonStringToParse);
			 alert(typeof datasets+datasets);
			plotAccordingToChoices();
		 });

la première boit d'alert me renvoi bien object comme type et les données espérées, mais une fois passé par jQuery.parseJSON(JsonStringToParse), le type est toujours égal à object, mais le contenu est vide !!!! ça me renvoi null Smiley eek
J'ai raté quoi là ??? Smiley biggol Smiley sweatdrop
Modifié par daeavelwyn (22 Dec 2011 - 18:09)
Tout Smiley biggol
Normalement il y a juste besoin d'utiliser parseJSON, pas de split et autres bidouilles.
Le seul soucis vient de 'retour' qui n'est pas bien formater json (pas très clair).

En reprenant ce format:
{ label: "Foo", data: [ [10, 1], [17, -14], [30, 5] ] },
    { label: "Bar", data: [ [11, 13], [19, 11], [30, -7] ] }

Les clefs doivent être entouré de guillemet double et il ne faut qu'un seul objet. Pour le moment, il y en a 2. Le plus simple est de faire un tableau (avec […]), ce qui donne:
[
{"label": "Foo", "data": [ [10, 1], [17, -14], [30, 5] ] },
{"label": "Bar", "data": [ [11, 13], [19, 11], [30, -7] ] }
]


Avec ça un datasets=$.parseJSON(JsonStringToParse) et c'est fini.
En fessant bien les choses, on préciser à $.post le type récupéré (4ème param), le parseJSON devient transparent et 'retour' est directement un objet, si c'est pas beau.
Si seulement....Mais non ! :-p
Bon, voici en donnée brut le contenu de retour :
"AGL1-Trim.1":{"label":"AGL1-Trim.1","data":[[0.0,0],[1.0,0],[2.0,0],[3.0,0],[4.0,0],[5.0,2],[6.0,0],[7.0,0],[8.0,0],[9.0,2],[10.0,3],[11.0,4],[12.0,3],[13.0,9],[14.0,6],[15.0,3],[16.0,1],[17.0,1],[18.0,1],[19.0,0],[20.0,0]]},"AGL1-Trim.2":{"label":"AGL1-Trim.2","data":[[0.0,0],[1.0,0],[2.0,0],[3.0,1],[4.0,0],[5.0,1],[6.0,1],[7.0,3],[8.0,1],[9.0,2],[10.0,5],[11.0,3],[12.0,2],[13.0,5],[14.0,7],[15.0,1],[16.0,2],[17.0,1],[18.0,0],[19.0,0],[20.0,0]]},"AGL1-Trim.3":{"label":"AGL1-Trim.3","data":[[0.0,0],[1.0,0],[2.0,0],[3.0,0],[4.0,1],[5.0,0],[6.0,0],[7.0,0],[8.0,3],[9.0,2],[10.0,5],[11.0,4],[12.0,3],[13.0,2],[14.0,8],[15.0,4],[16.0,0],[17.0,2],[18.0,1],[19.0,0],[20.0,0]]},"AGL1-Moy.Annee":{"label":"AGL1-Moy.Annee","data":[[0.0,0],[1.0,0],[2.0,0],[3.0,0],[4.0,1],[5.0,0],[6.0,1],[7.0,0],[8.0,1],[9.0,4],[10.0,3],[11.0,5],[12.0,4],[13.0,4],[14.0,6],[15.0,3],[16.0,1],[17.0,2],[18.0,0],[19.0,0],[20.0,0]]},"AGL1-Exam.":{"label":"AGL1-Exam.","data":[[0.0,0],[1.0,0],[2.0,1],[3.0,0],[4.0,1],[5.0,0],[6.0,0],[7.0,0],[8.0,1],[9.0,5],[10.0,7],[11.0,7],[12.0,4],[13.0,4],[14.0,2],[15.0,1],[16.0,0],[17.0,2],[18.0,0],[19.0,0],[20.0,0]]}


Si j'utilise ta méthode, le graphique s'affiche au chargement de la page (pas de soucis de ce côté), je clique sur mon bouton radio et je ne reçois plus rien dans mon $("#debug").empty().append(retour) ni ailleurs, mais firebug me marque qu'il y a des POST qui transite avec les bonnes données dedans. Mon graphique n'est pas redessiné.
Ta méthode si je l'ai bien comprise :
		$.post(//methode jquery
		'comparaisonYearExam-GraphData.php',// url cible
		 {'ajaxLoad':1,'NbreEleveValueType':NbreEleveValueType},//données
		 function(retour)
		 {
			 $("#debug").empty().append(retour);
			 datasets=jQuery.parseJSON(retour);
			 alert(typeof datasets+datasets);
			plotAccordingToChoices();
		 },
		 "json");
	});


si j'utilise ce bout de code :
		$.post(//methode jquery
		'comparaisonYearExam-GraphData.php',// url cible
		 {'ajaxLoad':1,'NbreEleveValueType':NbreEleveValueType},//données
		 function(retour)
		 {
			 $("#debug").empty().append(retour);
			 datasets=jQuery.parseJSON(retour);
			 alert(typeof datasets+datasets);
			plotAccordingToChoices();
		 });

le graphique s'affiche bien au chargement de lapage, je clique sur le bouton radio et mon #debug contient les données listés en haut à l'identique, mais j'ai un soucis de parse json. Message de firebug :
"JSON.parse: unexpected non-whitespace character after JSON data
[Stopper sur une erreur] (function(a,b){function cv(a){return f...indexOf(".")>=0&&(i=h.split("."),h=i. "

si je vire le JQuery.parseJSON, plus d'erreur, mais il ne se passe rien quand je clique sur les bouton et le type de mes données est string !!

Là je capote...tain, c'est la dernière fonctionalité à implémenter sur ce truc et je sèche... Smiley sweatdrop Smiley sweatdrop
j'vais prendre uen bière, ça ira mieux ! Smiley lol
Modifié par daeavelwyn (22 Dec 2011 - 20:42)
Youhouuuuuuuuuuuuuuuuuu !!!
Bon, grande nouvelle,
Dieu Existe, et il aime la bière ! Parceque j'ai eu une grande inspiration après ma p'tite mousse et résultat : ça MARCHE !!! Merci encore à toi jo_link_noir et à kenor !

Le code PHP que j'avais était bon (ça m'a rassuré aussi un peu ^_^), et le bin's venait bien de cette histoire de json ! Il y a avait plusieurs problème :
1- les double quote pas mis où il fallait
2- le echo de mon php renvoie une chaine déjà formaté en json, mais pas reconnu comme un objet javascript. D'où l'idée : "Y a pas un moyen de convertir une chaine en objet sans se prendre la tête en JS?" et là boum bin y a eval() hé patate ! Avec une petite correction sur le eval pour que la chaine soit vraiment bien formaté pour FLOT (manquait les {}) et voilà !

voilà le code JS : 
$(document).ready(function () {

/********************************************************
 * Definition des valeurs des courbes à partir de PHP
 */

var datasets={<?=$JSON_String;?>};
/********************************************************************/

/*******************************************************************
 *	Paramètre des checkboxes
 */

function CheckboxParam(datasets)
{
	// hard-code color indices to prevent them from shifting as
	// graph-lines are turned on/off
	
	var i = 0;
	$.each(datasets, function(key, val) {
		val.color = i;
		++i;
	});

	// insert checkboxes
	$("#choices").empty();
	choiceContainer = $("#choices");
	$.each(datasets, function(key, val) {
		choiceContainer.append('<input type="checkbox" name="' + key +
		'" checked="checked" id="id' + key + '">' +
		'<label for="id' + key + '">'
		+ val.label + '</label>');
	});
	
	choiceContainer.find("input").click(plotAccordingToChoices)
}

CheckboxParam(datasets);

/******************************************************************/

/********************************************************
*	make the chart redrawing according to checked boxes
*/
    function plotAccordingToChoices()
	{
        var data = [];
        choiceContainer.find("input:checked").each(function ()
			{
            var key = $(this).attr("name");
            if (key && datasets[key])
                data.push(datasets[key]);
			});
        if (data.length > 0)
			$.plot($("#placeholder"), data, {
                yaxis: { min: 0 },
                xaxis: { tickDecimals: 0, tickSize:1, min:0, max:20, ticks:20 },
				series:
				{
					curvedLines: {active: true, show: true, lineWidth: 2.5, fit: true, fitPointDist: 0.000010},//utilise le plugin ../lib/flot/curvedLines.js
					lines: { show: false },//si on utilise le plugin curvedLines, on masque les lignes par defaut
					points: { show: true }
				},
				grid: { hoverable: true}
            });
    }
    plotAccordingToChoices();
/*****************************************************************/

/*****************************************************************
 *	Apparence des tooltips
 */
	function showTooltip(x, y, contents) {
		$('<div id="tooltip">' + contents + '</div>').css( {
			position: 'absolute',
			display: 'none',
			top: y + 5,
			left: x + 5,
			border: '1px solid #fdd',
			padding: '2px',
			'background-color': '#fee',
			opacity: 0.80
		}).appendTo("body").fadeIn(200);
	}

	//tooltip definition and text
	var previousPoint = null;
	$("#placeholder").bind("plothover", function (event, pos, item) {
		$("#x").text(pos.x.toFixed(2));
		$("#y").text(pos.y.toFixed(2));

		if ($("#enableTooltip:checked").length > 0) {
			if (item) {
				if (previousPoint != item.dataIndex) {
					previousPoint = item.dataIndex;

					$("#tooltip").remove();
		var x = item.datapoint[0].toFixed(2),
			y = item.datapoint[1].toFixed(2);

			showTooltip(item.pageX, item.pageY,
						item.series.label +"<br/> " + y + " % d'&eacute;l&egrave;ve ont "  + x + "/20");
				}
			}
			else {
				$("#tooltip").remove();
		previousPoint = null;
			}
		}
	});
/*************************************************************************/

/*****************************************************************
 *	Gestion de l'axe Y soit valeur relative, soit valeur absoule
 */
$("#debug").empty().append(datasets);
$("#NbreEleveValueType").change(
	function(){
		var NbreEleveValueType=$('input[name="NbreEleveValueType"]:checked').attr('value');
		$.post(//methode jquery
		'comparaisonYearExam-GraphData.php',// url cible
		 {'ajaxLoad':1,'NbreEleveValueType':NbreEleveValueType},//données
		 function(retour)
		 {
// 			 $("#debug").empty().append(retour);//DEBUG
// 			 alert(typeof retour+retour);//DEBUG
			 datasets=eval( "({" + retour + "})" );
// 			 alert(typeof datasets+datasets);//DEBUG
			 CheckboxParam(datasets);
			plotAccordingToChoices();
		 });
	});
});


Encore merci de m'avoir mis sur lapiste, j'aurais jamais trouvé tout seul Smiley lol !

Bon, par contre, je trouve ça tout crade, je pense que je ferai autrement la prochaine fois !
Pour fêter ça, j'vais m'en ouvrir une deuxième et mettre un cierge :-p Smiley lol
Modifié par daeavelwyn (22 Dec 2011 - 21:55)
Sujet clos
Aller à