[AJAX] Comment savoir quand l'action est terminée

**tatayecorp** · 08/08/2007, 12h50

Bonjour,

J'ai fait une petite fonction toute simple à partir de la librairie Yahoo :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var ajax = 
{ 
	succes : function( o ) { document.getElementById(o.argument.cible).innerHTML = o.responseText; }, 
	echec : function( o ) { }, 
	soumettreFormulaire : function(leFormulaire, lURL, laCible) { var formulaire = document.getElementById(leFormulaire); YAHOO.util.Connect.setForm(formulaire); callback.argument = { cible : laCible }; YAHOO.util.Connect.asyncRequest( 'POST', lURL, callback ); },
	naviguerVers : function(lURL, laCible) { var url = lURL.split( '?' ); if ( url.length > 0 ) { callback.argument = { cible : laCible }; YAHOO.util.Connect.asyncRequest( 'POST', url[ 0 ], callback, url[ 1 ] ); } }
};
 
var callback = { success : ajax.succes, failure : ajax.echec, scope : ajax };

Le problème que je rencontre est le suivant :
Avec la fonction naviguerVers j'alimente un div avec du code html et notamment des liens. J'aimerai pouvoir affecter à ces liens du code javascript.

J'ai l'impression que le code se déclenche trop rapidement, les liens ne sont pas encore dans le div quand j'essaie de leur affecter du code.

J'en veux pour preuve qu'en mettant un setTimeout sur la fonction qui affecte le code aux liens, là ça fonctionne.

Y a-t-il possibilité d'avoir un élément qui m'indique que le div est rempli ou que la requête est allée jusqu'au bout de son exécution ?

J'ai vu dans la doc de la librairie Yahoo que l'on pouvait ajouter une fonction complete dans le callback, mais je ne vois pas comment l'utiliser pour interrompre toute exécution tant que la requête n'est pas complète.

En attendant de trouver une réponse satisfaisante, j'utilise le setTimeout
Je trouve ça assez cracra mais bon...

Si vous avez des suggestions, n'hésitez pas même si vous n'utilisez pas la librairie Yahoo, j'adapterai !

**tatayecorp** · 09/08/2007, 10h21

Je vais peut être reformuler ma demande :

Lorsque l'on remplit un élément cible tel qu'un div avec une information récupérée en ajax, comment fait-on pour déterminer que le div a fini d'être rempli ?

Faut-il par exemple tester dans un premier temps le statut HTTP, puis faire une boucle qui compare la réponse de la requête avec le contenu du div, et tant que c'est différent on ne sort pas de la boucle...

Une idée ?

**highman** · 09/08/2007, 10h33

Ben à priori une fois que tu as récuperé tes données via Ajax la div ne va pas mettre très longtemps à se remplir coté client... Donc je ne vois pas l'interet de vouloir calculer ce temps, sauf si bien sur les visiteurs de ton site sont sur un DX2 66

Sinon pour la récuperation des données c'est le statut de ton xhr

**E.Bzz** · 09/08/2007, 10h39

Bonjour,
pour les problèmes d'utilisation de ta librairie, c'est à M.Yahoo que tu dois demander

Pour Ajax, les changements d'étapes d'avancement de la requête qsont détectés gràce à onreadystatechange.
Cherche de ce côté là dans ta librairie (et pour connaitre les différentes valeurs sur lesquelles t'appuyer) ...

A+

**tatayecorp** · 09/08/2007, 11h06

Merci pour les réponses

Envoyé par highman

Ben à priori une fois que tu as récuperé tes données via Ajax la div ne va pas mettre très longtemps à se remplir coté client... Donc je ne vois pas l'interet de vouloir calculer ce temps, sauf si bien sur les visiteurs de ton site sont sur un DX2 66

Il y a quand même un temps de latence, je ne peux donc pas ajouter tout de suite derrière ma requête ajax un évènement javascript aux liens générés dans l'élément cible, parce que si celui si n'est pas rempli à ce moment là, j'affecte du code à du vide.

Donc pour le moment, je mets un setTimeout, ça fonctionne mais comme je le disais c'est cracra.

Envoyé par E.Bzz

Bonjour,
pour les problèmes d'utilisation de ta librairie, c'est à M.Yahoo que tu dois demander

Je ne pense pas que ça soit un problème spé à une librairie, quelque soit la méthode utilisée, il y aura un temps de latence pour le remplissage de la div.

**highman** · 09/08/2007, 12h24

Apres avoir lu un petit peu mieux je comprends, j'ai eu le meme probleme... Et j'ai utilisé le setTimeOut() aussi ... donc si quelqu'un a la solution je suis preneur !

**tatayecorp** · 09/08/2007, 12h34

Envoyé par highman

Apres avoir lu un petit peu mieux je comprends

C'est vrai que j'ai mal formulé ma demande au départ et que je n'aurai pas du parler de la librairie Yahoo, j'ai l'art d'embrouiller les gens

D'ailleurs si un modo pouvait changer le titre du message par Comment savoir si la cible d'une requête ajax a fini d'être remplie ou un truc du genre

**tatayecorp** · 13/08/2007, 22h28

Bonsoir,

Je viens de faire un test en utilisant le customEvent complete de la librairie Yahoo pour voir si cet évênement se déclenche bien lorsque l'élément cible a reçu entièrement toutes les informations.

J'ai donc fait une page test.html qui correspond à une légère bidouille d'un tutorial Yahoo :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
 
<style type="text/css">
body { margin:0; padding:0; }
</style>
 
<script type="text/javascript" src="http://developer.yahoo.com/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="http://developer.yahoo.com/yui/build/event/event.js"></script>
<script type="text/javascript" src="http://developer.yahoo.com/yui/build/connection/connection.js"></script>
 
<!--begin custom header content for this example-->
<style>
#container {min-height:15em;}
#container li {margin-left:2em;}
</style>
 
<!--end custom header content for this example-->
 
</head>
 
<body>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
 
<form>
<input type="button" onClick="makeRequest();" value="Send a Request">
</form>
 
<div id="container"></div>
<script>
var div = document.getElementById('container');
 
var transactionObject = {
	start:function(type, args){
		YAHOO.log("Custom Event *start* fired for transaction" + args[0].tId + ".", "info", "example");
		div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " event fired.</li>";
	},
 
	complete:function(type, args){
		YAHOO.log("Custom Event *complete* fired for transaction" + args[0].tId + ".", "info", "example");
		div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " event fired.</li>";
	},
 
	success:function(type, args){
		YAHOO.log("Custom Event *success* fired for transaction" + args[0].tId + ".", "info", "example");
		div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " event fired.</li>";
		if(args[0].responseText !== undefined){
			div.innerHTML += "<li>Transaction id: " + args[0].tId + "</li>";
			div.innerHTML += "<li>HTTP status: " + args[0].status + "</li>";
			div.innerHTML += "<li>Status code message: " + args[0].statusText + "</li>";
			div.innerHTML += "<li>HTTP headers: " + args[0].getAllResponseHeaders + "</li>";
			div.innerHTML += "<li>Server response: " + args[0].responseText + "</li>";
			div.innerHTML += "<li>Argument object: Array ( [foo] =&gt; " + args[0].argument[0] +" [bar] =&gt; " + args[0].argument[1] +" )</li>";
			}
	},
 
	failure:function(type, args){
		YAHOO.log("Custom Event *failure* fired for transaction" + args[0].tId + ".", "info", "example");
		div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " event fired.</li>";
		if(args[0].responseText !== undefined){
			div.innerHTML += "<li>Transaction id: " + args[0].tId + "</li>";
			div.innerHTML += "<li>HTTP status: " + args[0].status + "</li>";
			div.innerHTML += "<li>Status code message: " + args[0].statusText + "</li>";
		}
	},
 
	abort:function(type, args){
		YAHOO.log("Custom Event *abort* fired for transaction" + args[0].tId + ".", "info", "example");
		div.innerHTML += "<li>Transaction " + args[0].tId + " " + type + " event fired.</li>";
	}
};
 
var handleSuccess = function(o){
	div.innerHTML += "<li>Success response handler triggered in callback.success</li>";
};
 
var handleFailure = function(o){
	div.innerHTML += "<li>Failure response handler triggered in callback.success</li>";
};
 
var callback = {
	success:handleSuccess,
	failure:handleFailure,
	customevents:{
		onStart:transactionObject.start,
		onComplete:transactionObject.complete,
		onSuccess:transactionObject.success,
		onFailure:transactionObject.failure,
		onAbort:transactionObject.abort
	},
 	argument:["foo","bar"]
};
 
function makeRequest(){
	var sUrl = "test.asp";
	var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
};
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
 
</body>
</html>

Et une page test.asp qui appelle une image de grandes dimensions d'un site distant :

Code :

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

1
2
3
<%
Response.Write "<img src=""http://press.picotech.com/images-hi/accessories-website.jpg"" />"
%>

Hélas, le code onComplete:transactionObject.complete s'éxécute avant la fin de chargement de l'image : ça correspond donc à la fin de la réception de l'information mais pas à la fin du chargement de cette information dans l'élément cible.

La vérité est ailleurs...

N'avez-vous jamais eu besoin de récupérer cette information ?

[AJAX] Comment savoir quand l'action est terminée

JavaScript

Vue hybride

Discussions similaires

Partager

Partager