11540 sujets

JavaScript, DOM et API Web HTML5

Ajax et async: false

Bonjour,

J'ai un probleme .... Pour que mon ajax fonctionne je suis obligé de le mettre en synchrone, ce qui est fort dommage du coup vu que je perd surement en vitesse d'execution ...

Pouvez vous me dire si je pourrais utiliser une méthode qui me permettrait d'utiliser un AJAX, un vrai ^^ asynchrone ...

Le soucis c'est que si je le met asynchrone ma fonction ajax continue d etre executé alors qu'on a pas encore récupérer la valeur du callback ....

Smiley bawling

Voici ma fonction ajax:

function ajax_call(what2do, callback){
			$.ajax({
				type: "GET",
				async: true,
				dataType: "json",
				url: "data.php?" + what2do,
				success: function(json) {
					callback(json);
				}
			});		
		};


Et voici un exemple de fonction dans mon fichier data.php

function Nbr_Data ($type_data, $type_areaOUcountry, $areaOUcountry, $nom_data, $year, $month, $new_addon, $BPname, $segment, $Releas, $quantityORNet_euro){			
		$req_array = mysql_query('SELECT * FROM `actis_table`');
		$nb_data = 0;
		while ($champs = mysql_fetch_array($req_array)) {
			
			if ($year == $champs['Year'] OR $year == "allyear"){
				if ($month == $champs['Month'] OR $month == "all") {
					if (strtolower($areaOUcountry) == strtolower($champs[$type_areaOUcountry]) OR $areaOUcountry == "world")	{
						if ($nom_data == $champs[$type_data] OR $nom_data == "all")	{
							if ($new_addon == $champs['Offer_type'] OR $new_addon == "all"){	
								if ($BPname == $champs['BP_name'] OR $BPname == "all")	{
									if ($segment == $champs['Segment'] OR $segment == "all"){
										if ($Releas == $champs['Releas_OXE'] OR $Releas == "all"){										
											if ($quantityORNet_euro == "quantity"){
												$nb_data = $nb_data + 1;
											}
											if ($quantityORNet_euro == "Net_euro"){
												$nb_data = $nb_data + $champs['Net_EURO'];
											}
										}
									}
								}
							}										
						}
					}		
				}						
			}
		}	
		return $nb_data; 
	}




J'espere que vous pourrez m'aider =)

Tout fonctionne en soit, sauf que c'est lent Smiley decu . et des que je met async: true, aucune valeur n'est affichée ....

J'espere lire bientot une réponse Smiley biggrin

a+
Salut,

Il y a un standard très important lorsqu'on programme. Il ne faut jamais faire des lignes plus longues que 80 charactères (90 si tu veux). Là, tu exagère et ton code est illisible.

Ensuite, ton code PHP n'a rien à voir avec ton problème. Et pour t'aider, ça prendrait le code javascript qui ne fonctionne pas, présentement aucun code que tu as posté est vraiment utile pour régler ton problème.
Merci de ta réponse


Hum, d'accord, voici un exemple d'une de mes fonctions javascript


if (selected_year != "allyear" &&  document.forms.checkbox_show_graph.showgraph.checked == true){

	var tab_new_addon = ["0", "1"];
	var tab_month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];	
	tab_new = new Array();
	tab_addon = new Array();	

	for(var j=0;j<tab_new_addon.length;j++){
		for(var i=0;i<tab_month.length;i++){

			url = "type_data=Offer_type&type_areaOUcountry=" + save_type_country + "&nom_data=" + tab_new_addon[j] + "&year=" + selected_year + "&month=" + tab_month[i] + "&areaOUcountry=" + save_country + "&new_addon=" + selected_new_addon + "&BPname=" + selected_BPname+ "&segment=" + selected_segment + "&Releas=" + selected_Releas + "&quantityORNet_euro=quantity";	
	
			ajax_call (url, function(json){
				if (tab_new_addon[j]== "0") {
					tab_new[i] = json['ladata'];  
				}
				if (tab_new_addon[j]== "1") {
					tab_addon[i] = json['ladata'];  
				}						
			});
		}
	}
}



J'utilise ensuite les données récupérées avec cette fonction pour afficher un graph:

if (selected_year != "allyear" &&  document.forms.checkbox_show_graph.showgraph.checked == true)	{	
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'combot_new_addon'
},
title: {
text: 'New & Addon',					
},
subtitle: {
text: save_country + " : " + selected_year + titre_segment + titre_BPname,					
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
	'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
	text: 'Quantity'
}},
plotOptions: {
column: {							
	dataLabels: {
		style: {
			fontWeight: 'bold'
		},
		enabled: true,
		formatter: function() {
			return this.y > 0.5  ? this.y : null;
		}
	},					
}
},
tooltip: {
formatter: function() {
	var s;
	if (this.point.name) { 
		s = ''+
			this.point.name +': '+ this.y;
	} else {
		s = ''+
			this.x  +': '+ this.y;
	}
	return s;
}
},
labels: {
items: [{
	html: '',
	style: {
		left: '100px',
		top: '-12px',
		color: 'black'				
	}
}]
},   
series: [{
type: 'column',
name: 'New',						
data: [
<?php for ($i=0;$i<13;$i++) {							
			echo "tab_new[$i], ";
		}
?>
	tab_new[13]]
}, {
type: 'column',
name: 'Addon',
data: [
<?php for ($i=0;$i<13;$i++) {							
			echo "tab_addon[$i], ";
		}
?>
	tab_addon[13]]					
}, {
type: 'pie',
name: 'Total consumption',
data: [{
	name: 'New',
	y: data_new_addon[0],
	color: '#4572A7' 
}, {
	name: 'Addon L',
	y: data_new_addon[1],
	color: '#AA4643'						
}],	
center: [60, 20],
size: 65,
showInLegend: false,
dataLabels: {
	formatter: function() {
		// display only if larger than 1
		return this.y > 1 ? this.y : null;
	}
}
}]
});


});
}




J'espere que cette partie de mon code pourra plus vous aider ... à m'aider ^^

[/i][/i][/i]
Alors, il faut que ta fonction affichant les données soit comprises dans le callback de la fonction ajax, car c'est à ce moment qu'elle doit être appelé pas avant.

Cela dit, attention car si tu écris tout de manière aussi procédurale, ton code sera tout dégueu et non maintenable. Je te conseille vivement d'utiliser des fonctions:


function drawGraph() {
  // ton code qui utilise les données
}

ajaxCall(url, function() {
  // gère les données
  drawGraph();
});


Encore mieux, passe les données en paramètre à ta fonction plutôt que des les sauvegarder dans une variable utilisé un peu partout. Ta fonction deviendra indépendante du reste de ton code: donc plus propre, plus maintenable, et elle sera facile à tester (unit test).
Merci de ta réponse, ca veut dire que par exemple je dois faire quelque chose comme ca: ?


function ajax_call(what2do, callback){
         GestionDesDonnées();
			$.ajax({
				type: "GET",
				async: true,
				dataType: "json",
				url: "data.php?" + what2do,
				success: function(json) {
					callback(json);
				}
			});

DrawGraph();		
		};


stp ?


Sachant que des fois je fais également ca:


var tab_new_addon = ["0", "1"];
data_new_addon = new Array();		
for(var j=0;j<tab_new_addon.length;j++){
	url = "type_data=Offer_type&type_areaOUcountry=" + save_type_country + "&nom_data=" + tab_new_addon[j] + "&year=" + selected_year + "&month=all&areaOUcountry=" + save_country + "&new_addon=" + selected_new_addon + "&BPname=" + selected_BPname+ "&segment=" + selected_segment + "&Releas=" + selected_Releas + "&quantityORNet_euro=quantity";	
	
	ajax_call (url, function(json){
		$('#idoffertype' + tab_new_addon[j] + 'data').html(json['ladata']);
				data_new_addon[j] =  json['ladata'];
	});
}


Afin d'afficher des données avec l'html:


<TH><p id ="idoffertype0data"></p><div class="marge"></div></TH>



Mes graphs ont également un code html pour les implémenter:

<div id="combot_new_addon" style="width: 700px; height: 400px; margin: 10px auto"></div>



Merci de ton aide Smiley biggrin
Idéallement tu aurais juste ça:

function ajax_call(what2do, callback){
	$.ajax({
		type: "GET",
		async: true,
		dataType: "json",
		url: "data.php?" + what2do,
		success: function(json) {
			callback(json);
		}
	});	
};

ajax_call("/foo", function( data ) {
	drawGraph( data );
});
mais je ne comprend pas ... ou je met ma fonction comportant ma gestion des données, ma fonction comportant mes commandes comme ca :


var tab_new_addon = ["0", "1"];
data_new_addon = new Array();		
for(var j=0;j<tab_new_addon.length;j++){
	url = "type_data=Offer_type&type_areaOUcountry=" + save_type_country + "&nom_data=" + tab_new_addon[j] + "&year=" + selected_year + "&month=all&areaOUcountry=" + save_country + "&new_addon=" + selected_new_addon + "&BPname=" + selected_BPname+ "&segment=" + selected_segment + "&Releas=" + selected_Releas + "&quantityORNet_euro=quantity";	
	
	ajax_call (url, function(json){
		$('#idoffertype' + tab_new_addon[j] + 'data').html(json['ladata']);
				data_new_addon[j] =  json['ladata'];
	});
}



Et je comprend pas le "\foo" Smiley decu

Normalement l'argument doit contenir l'url que j'ai défini comme au dessus, suivant la donnée que je veux récupérer donc en gros contenant tous les filtres.
"/foo" représente seulement une URL bidon. Je t'envoie du pseudo code pas complet simplement pour te décrire l'architecture que tu recherche, à toi de remplir les trous.

Séparer ton code en bloc logique et en fonction. La logique qui va construire ton graphique, tu met tout ce code dans la fonction `drawGraph`, et lorsque les données sont retournées par ton appel ajax, tu appelle la fonction qui construit le graphique.
donc je dois faire une fonction par graphique :O

Mais y a un autre soucis non comme j ai dit y a des valeurs que j affiche directement en html


	ajax_call (url, function(json){
		$('#idoffertype' + tab_new_addon[j] + 'data').html(json['ladata']);
				data_new_addon[j] =  json['ladata'];
	});



c pareil va y avoir un probleme pour ca non ? :O Smiley bawling
Sujet clos
Aller à