11528 sujets

JavaScript, DOM et API Web HTML5

Pages :
(reprise du message précédent)

De base une requête Ajax est asynchrone, ca veut dire que la suite du chargement de la page et de tous les scripts s'exécute en parallèle au script Ajax sans en tenir compte, alors que la ligne que je t'ai donné fait en sorte que ta requête Ajax devienne synchrone et que donc la suite du script attend le résultat de ta requête Ajax.

Et d'où je le sais ? Doc Jquery.
du coups en soit ca ralentit le programme ?

sinon j'aurai une autre question, comme t as pu le voir j'effectue des actions si on change la valeur du pays ou de l'année, ici pour l'instant ca ne marche pas pour le graph, il ne se change pas automatiquement, donc j ai fait le bourrin, j ai carrément mis toute la "fonction" du graph dans ma fonction "select_country", mais bon a mon avis c'est pas ce qu'il faut faire .... en plus maintenant ca fait un chargement de page a chaque fois que je clique sur un pays ....

une idée ? si tu sais pas c'est pas grave tu m as deja beaucoup aidé, merci! ^^
Oui, en soit ca ralentit le programme, en général, j'évite justement de rajouter cette ligne pour cette raison, mais quand on a pas d'autre choix que de le ralentir pour être sur du résultat.

Post le contenu de la fonction stp
Modifié par Naemesis (24 May 2012 - 14:25)
c'est les memes que copier / coller précédemment:

function select_country (thecountry,clspross) {
		//La mise en place de la class selected_country pour distingué le pays choisi
		//L'argument clspross : faire dictinction entre les appels sur le clique et les appels directs de la fonction.
		if(typeof(clspross)=='undefined'){		
			$('.selected_country').removeClass('selected_country');
			$(this).addClass('selected_country');
		}		
		save_country = thecountry;		

		selected_year=$('#select_year').val();	
		
		var url="type_data=Job&type_areaOUcountry=Learner_Country&nom_data=postsales&year=" + selected_year + "&month=all&areaOUcountry=";
		ajax_call (url + thecountry, function(json){});
		
		url="type_data=Job&type_areaOUcountry=Learner_Country&nom_data=presales&year=" + selected_year + "&month=all&areaOUcountry=";
		ajax_call (url + thecountry, function(json){});
		
		url="type_data=Job&type_areaOUcountry=Learner_Country&nom_data=sales&year=" + selected_year + "&month=all&areaOUcountry=";
		ajax_call (url + thecountry, function(json){});
		
		url="type_data=Job&type_areaOUcountry=Learner_Country&nom_data=trainer&year=" + selected_year + "&month=all&areaOUcountry=";
		ajax_call (url + thecountry, function(json){});
		
		url="type_data=Int_Ext&type_areaOUcountry=Learner_Country&nom_data=internal&year=" + selected_year + "&month=all&areaOUcountry=";
		ajax_call (url + thecountry, function(json){});

		url="type_data=Int_Ext&type_areaOUcountry=Learner_Country&nom_data=external&year=" + selected_year + "&month=all&areaOUcountry=";
		ajax_call (url + thecountry, function(json){});

		url="type_data=Type&type_areaOUcountry=Learner_Country&nom_data=certif exam&year=" + selected_year + "&month=all&areaOUcountry=";
		ajax_call (url + thecountry, function(json){});

		url="type_data=Type&type_areaOUcountry=Learner_Country&nom_data=course&year=" + selected_year + "&month=all&areaOUcountry=";
		ajax_call (url + thecountry, function(json){});

		url="type_data=Type&type_areaOUcountry=Learner_Country&nom_data=webinar&year=" + selected_year + "&month=all&areaOUcountry=";
		ajax_call (url + thecountry, function(json){});

		url="type_data=Type&type_areaOUcountry=Learner_Country&nom_data=specific certification&year=" + selected_year + "&month=all&areaOUcountry=";
		ajax_call (url + thecountry, function(json){});

		url="type_data=Type&type_areaOUcountry=Learner_Country&nom_data=certification&year=" + selected_year + "&month=all&areaOUcountry=";
		ajax_call (url + thecountry, function(json){});

		url="type_data=Type&type_areaOUcountry=Learner_Country&nom_data=laboratory&year=" + selected_year + "&month=all&areaOUcountry=";
		ajax_call (url + thecountry, function(json){});

		url="nom_duration=classroom&year=" + selected_year + "&month=all&country=";
		ajax_call (url + thecountry, function(json){});

		url="nom_duration=elearning&year=" + selected_year + "&month=all&country=";
		ajax_call (url + thecountry, function(json){});		

		
		var tab_certif = ["acfe", "acps", "acpsi", "acse", "acsei", "acsr", "aqps"];
		
		return_data = new Array();
		for(var j=0;j<tab_certif.length;j++){
			url= "type_data=Certification_Level&type_areaOUcountry=Learner_Country&nom_data="+tab_certif[j]+"&year=" + selected_year + "&month=all&areaOUcountry=" + save_country;		
			ajax_call (url, function(json){return_data[j]=json['ladata'];});
			//alert (url);
			alert (return_data[j]);
		}
		
	}

	function ajax_call(what2do, callback){
		$.ajax({
			type: "GET",
			dataType: "json",
			url: "data.php?" + what2do,
			success: function(json) {
				var nom = json['nom'];
				nom = nom.replace(" ","_");
				if (nom == "classroom" || nom == "elearning"){
					callback.call(this, json);
					$('#id' + nom + 'data').html(json['duration']+ " days");
				}
				else {
					callback.call(this, json);
					$('#id' + nom + 'data').html(json['ladata']);				
				}
			}
		});	
	};
	
	var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'pie_certification',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					title: {
						text: 'Type of Certification Level',
					},
					subtitle: {
						text: '....',
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ this.y;
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: false
							},
							showInLegend: true
						}
					},
				    series: [{
						type: 'pie',
						name: 'Certification',
						data: [
							['ACFE',return_data[0]],
							['ACPS',return_data[1]],
							['ACPSi',return_data[2]],
							['ACSE',return_data[3]],
							['ACSEi',return_data[4]],
							['ACSR',return_data[5]],
							['AQPS', return_data[6]]
						]
					}]
				});
			});
Déja, tu vas rendre ton code plus lisible comme je l'ai fait avant :
- création de 2 tableaux :
- 1 contenant les valeurs de chaque nom_data
- 1 qui contiendra les résultat
- une fonction qui boucle sur chaque élément et récupère les valeurs au fur et à mesure.
non pour avant j'ai pas besoin de récupérer les résultats ..... ^^ par contre je devrai faire plusieurs tableaux parce que l adresse change suivant les catégories des data, ici c'est le type_data qui change

sinon je viens de remarquer que quand je change l'année, ca recharge pas la page, mais le pays oui
pour l année:

function select_change() {
			select_country (save_country,false)
	}

<select id="select_year" onchange ="select_change();">
					<option value= "2011">2011</option>
					<option value= "2012">2012</option>
				</select>			



je vais quand meme changer mon code comme tu dis mais y aura un tableau par catégorie
j'avoue c'est plus beau ^^

/Déclaration de la fonction select_country
	function select_country (thecountry,clspross) {
		//La mise en place de la class selected_country pour distingué le pays choisi
		//L'argument clspross : faire dictinction entre les appels sur le clique et les appels directs de la fonction.
		if(typeof(clspross)=='undefined'){		
			$('.selected_country').removeClass('selected_country');
			$(this).addClass('selected_country');
		}		
		save_country = thecountry;		

		selected_year=$('#select_year').val();	
		
		var url;
		
		var tab_job = ["postsales", "presales", "sales", "trainer"];		
		for(var j=0;j<tab_job.length;j++){
			url = "type_data=Job&type_areaOUcountry=Learner_Country&nom_data=" + tab_job[j] + "&year=" + selected_year + "&month=all&areaOUcountry=" + save_country;		
			ajax_call (url, function(json){});
		}
		
		var tab_intext = ["internal", "external"];		
		for(var j=0;j<tab_intext.length;j++){
			url = "type_data=Int_Ext&type_areaOUcountry=Learner_Country&nom_data=" + tab_intext[j] + "&year=" + selected_year + "&month=all&areaOUcountry=" + save_country;		
			ajax_call (url, function(json){});
		}
		
		var tab_type = ["certif exam", "course", "webinar", "specific certification", "certification", "laboratory"];		
		for(var j=0;j<tab_type.length;j++){
			url = "type_data=Type&type_areaOUcountry=Learner_Country&nom_data=" + tab_type[j] + "&year=" + selected_year + "&month=all&areaOUcountry=" + save_country;		
			ajax_call (url, function(json){});
		}

		var tab_duration = ["classroom", "elearning"];		
		for(var j=0;j<tab_duration.length;j++){
			url="nom_duration=" + tab_duration[j] + "&year=" + selected_year + "&month=all&country=" + save_country;		
			ajax_call (url, function(json){});
		}
		
		
		var tab_certif = ["acfe", "acps", "acpsi", "acse", "acsei", "acsr", "aqps"];		
		return_data = new Array();
		for(var j=0;j<tab_certif.length;j++){
			url= "type_data=Certification_Level&type_areaOUcountry=Learner_Country&nom_data="+tab_certif[j]+"&year=" + selected_year + "&month=all&areaOUcountry=" + save_country;		
			ajax_call (url, function(json){return_data[j]=json['ladata'];});

		}
		
		
		var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'pie_certification',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					title: {
						text: 'Type of Certification Level',
					},
					subtitle: {
						text: '....',
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ this.y;
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: false
							},
							showInLegend: true
						}
					},
				    series: [{
						type: 'pie',
						name: 'Certification',
						data: [
							['ACFE',return_data[0]],
							['ACPS',return_data[1]],
							['ACPSi',return_data[2]],
							['ACSE',return_data[3]],
							['ACSEi',return_data[4]],
							['ACSR',return_data[5]],
							['AQPS', return_data[6]]
						]
					}]
				});
			});
		
	}
heuuuuuu, a la fin de celle ci , celle ci laquelle ? XD

et heuuu tu voudrais que genre les "return_data" je les envoies la:

series: [{
						type: 'pie',
						name: 'Certification',
						data: [
							['ACFE',],
							['ACPS',],
							['ACPSi',],
							['ACSE',],
							['ACSEi',],
							['ACSR',],
							['AQPS', ]
						]
					}]


et donc que ca soit vide comme ca ?

pourquoi pas mais je sais pas comment faire ... mais ce que je trouve bizarre c'est que comme je t ai dit au changement d'année ca fait pas de rechargement de page aors qu au changement de pays, si ... Smiley rolleyes
heu non désolé, c totalement en interne .... et ca sera toujours en interne ^^

heuuu de quoi parles tu, du changement d'année ? je l ai mis plus haut ca, ca tient en 4 lignes ^^

je le remet la:

function select_change() {
			select_country (save_country,false)
	}



<select id="select_year" onchange ="select_change();">
					<option value= "2011">2011</option>
					<option value= "2012">2012</option>
</select>		



y'a juste un select (screenshot: http://gyazo.com/ee16720772350b21ab7c7212a9abb52d)

avec lequel, j'ai le choix entre 2011 et 2012, et voila quand je select (onchange), je vais dans select_change qui ouvre select_country, ce qui est j avoue bizarre la XDDD
je sais plus pourquoi j'avais fait ca ..... enfin bref en gros ca ouvre select_country, la fameuse fonction ou je te fais des copier coller depuis tout a l heure.

et quand je choisi un pays, c'est ca (en fait sur le screenshot tu peux voir genre A-E, etc ca correspond a la premier lettre du pays pour repertorié un peu ....)

et donc j'ai:

<div id="DIV_MOVE">
	<div id="D_MOVE_TITRE"> Selection </div>
		<div id="DIV_MOVE_MENU">Country</div> <br/>
		
		<div id="DIV_MOVE_SOUS_MENU">		
			<a href="#" onclick="select_country('world')">WORLD</a><br/>						
		</div><br/>		
	<div id="accordion">	
	<a href="#" onclick="javascript:visibilite('div_a-e'); return false;">A - E</a><br/>
				<div id="div_a-e" style="display:none;">
					<div id="DIV_MOVE_SOUS_MENU">						
						<br/>
						<a href="#" onclick="select_country('argentina',false)">Argentina</a><br/>
						<a href="#" onclick="select_country('australia',false)">Australia</a><br/>
						<a href="#" onclick="select_country('austria',false)">Austria</a><br/>
						<a href="#" onclick="select_country('bangladesh',false)">Bangladesh</a><br/>
						<a href="#" onclick="select_country('belgium',false)">Belgium</a><br/>
						<a href="#" onclick="select_country('brazil',false)">Brazil</a><br/>
						<a href="#" onclick="select_country('bulgaria',false)">Bulgaria</a><br/>
						<a href="#" onclick="select_country('cameroon',false)">Cameroon</a><br/>
						<a href="#" onclick="select_country('canada',false)">Canada</a><br/>
						<a href="#" onclick="select_country('chile',false)">Chile</a><br/>
						<a href="#" onclick="select_country('china',false)">China</a><br/>
						<a href="#" onclick="select_country('colombia',false)">Colombia</a><br/>
						<a href="#" onclick="select_country('czech republic',false) ">Czech Republic</a><br/>
						<a href="#" onclick="select_country('denmark',false)">Denmark</a><br/>
						<a href="#" onclick="select_country('dominican rep.',false)">Dominican Rep.</a><br/>
						<a href="#" onclick="select_country('ecuador',false)">Ecuador</a><br/>
						<a href="#" onclick="select_country('egypt',false)">Egypt</a><br/>
						<a href="#" onclick="select_country('el salvador',false)">El Salvador</a><br/>
					</div>		
				</div><br/>					

ca n'a rien changé ca fait comme avant ...

donc comprend moi bien, ca marche en soit, sauf que ca fait un rechargement de page .....

c'est a dire que si je suis tout en bas de la page bah en cliquant sur un pays ca va revenir tout en haut et pis ca se voit ca fait un refresh alors que avec l'année ca fait pas de refresh, je suis tout en bas de la page et bah j y reste et le graph change .....

ce qui est bizarre ... parce qu'en soit j'utilise la meme fonction mais c'est peut etre le onchange qui a une conséquence différence d'un onclick .... jsais pas ... ^^
et bien moi j'ai compris ! :O enfin un peu mdr ^^

Disons que ce qui nous fait chier ici c'est le : "href="#"", c'est ca qui provoque un rechargement de la page, quand je l'enleve il n'y a pu de rechargement de page quand je clique sur le pays, et ca marche niquel, ca fait la meme qu'avant sauf qu'il recharge pas toute la page, il refresh juste les trucs a changer !

Donc c'est bien !

Le seul petit inconvénient, c'est que maintenant le curseur c'est plus le meme avant c'etait une main (normal quoi souvent ton curseur devient une main quand y a un lien)

mais maintenant c'est le cuseur en forme de I majuscule

http://us.123rf.com/400wm/400/400/jenny/jenny0607/jenny060700041/472421-une-selection-de-differentes-conceptions-de-curseur.jpg
main en haut a droite et curseur en I en bas a droite

Et ca c'est moche ..... ^^

Donc y a encore un petit soucis d'esthétique Smiley langue

j'ai une présentation a faire au boss today donc bon, si y avait pas ce probleme d'esthétique ca m'arrangerait mais bon ^^
En fait ca recharge pas, c'est le principe des ancres.
Donc pour ton problème :
<a href="#div_a-e" onclick="javascript:select_country('argentina',false);">Argentina</a><br/>
cool cool cool cool cool ! heureusement que t'es la XD

j'ai meme rajouté un aute graphe en gérant les mois ! héhé, mais j'ai fait le gros cochon par contre ^^

series: [{
						type: 'column',
						name: 'Internal',
						data: [ tab_internal[1], tab_internal[2], tab_internal[3], tab_internal[4],tab_internal[5],tab_internal[6],tab_internal[7],tab_internal[8],tab_internal[9],tab_internal[10],tab_internal[11],tab_internal[12]]
					}, {
						type: 'column',
						name: 'External',
						data: [tab_external[1],tab_external[2],tab_external[3],tab_external[4],tab_external[5],tab_external[6],tab_external[7],tab_external[8],tab_external[9],tab_external[10],tab_external[11],tab_external[12] ]
					},



mais bon ca marche ! ^^
les rentrer en dur ? t fou XD t oublie que quand je clique sur un pays ces données changent et j ai a peu pres 100 pays je pense mdr

non mais j'ai essayé de mettre un for ..... mais j'ai pas trouvé comment le mettre Smiley sweatdrop
bah les mois de l'année je les ai mis en dur ^^


var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'combot_intext'
					},
					title: {
						text: 'Internal / External',	
					},
					subtitle: {
						text: save_country + " : " + selected_year,	
					},
					xAxis: {
						categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
							'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
					},
					yAxis: {
						title: {
							text: 'Population'
						}},
					tooltip: {
						formatter: function() {
							var s;
							if (this.point.name) { // the pie chart
								s = ''+
									this.point.name +': '+ this.y;
							} else {
								s = ''+
									this.x  +': '+ this.y;
							}
							return s;
						}
					},
					labels: {
						items: [{
							html: 'Total',
							style: {
								left: '40px',
								top: '8px',
								color: 'black'				
							}
						}]
					},
					series: [{
						type: 'column',
						name: 'Internal',
						data: [ tab_internal[1], tab_internal[2], tab_internal[3], tab_internal[4],tab_internal[5],tab_internal[6],tab_internal[7],tab_internal[8],tab_internal[9],tab_internal[10],tab_internal[11],tab_internal[12]]
					}, {
						type: 'column',
						name: 'External',
						data: [tab_external[1],tab_external[2],tab_external[3],tab_external[4],tab_external[5],tab_external[6],tab_external[7],tab_external[8],tab_external[9],tab_external[10],tab_external[11],tab_external[12] ]
					}, {
						type: 'spline',
						name: 'Average',
						data: [ ]
					}, {
						type: 'pie',
						name: 'Total consumption',
						data: [{
							name: 'Internal',
							y: data_intext[0],
							color: '#4572A7' 
						}, {
							name: 'External',
							y: data_intext[1],
							color: '#AA4643' 
						}],	
						center: [100, 80],
						size: 100,
						showInLegend: false,
						dataLabels: {
							enabled: false
						}
					}]
				});
				
				
			});




aurais tu une idée de comment je pourrai ancrer un for ici alors ?

truc du genre je pense ...

data: [ for (var i = 1;i<13;i++) {tab_internal,}]

mais comment je fais pour la virgule^^
Pages :