Discussion :

[gazelle]

Bonjour!

Voilà, dans une de mes pages, je fais un appel Ajax pour afficher les informations d'un utilisateurs :

Code :

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

1
2
3
4
5
6
 
<div id="infos">
<script type="text/javascript">
new Ajax.Updater('infos', 'get_infos.php', { evalScripts: true, method:'post', parameters:{i:<?php echo $user->id_user ?>} } );
</script>
</div>

J'utilise Protoype.
Ce que j'aimerais faire, c'est écrire un message qui invite à patienter lorsque l'appel Ajax prend un peu plus de temps que d'habitude.

Donc j'aimerais rajouter un truc comme ceci dans protoype :

Code :

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

1
2
 
this.onLoad = document.getElementById(container).innerHTML = "Chargement en cours ...";

Mais où le faire et comment? Car je pense que ce que j'ai fait est faux. Je l'ai placé dans Ajax.updater ..

Merci d'avance

[Bovino]

C'est une des options de l'objet Ajax de Prototype : onCreate.

Code :

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

new Ajax.Updater('infos', 'get_infos.php', { ..., onCreate: code} );

[gazelle]

Merci de ta réponse rapide.
J'ai mis ceci mais ça ne fonctionne pas :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
new Ajax.Updater('infos', 'get_infos.php', 
{ 
evalScripts: true, 
method:'post', 
parameters:{i:<?php echo $user->id_user ?>}, 
onCreate:{<?php echo 'Chargement en cours, merci de patienter quelques instants ...' ?>} 
} 
);
</script>

J'ai une erreur, firebug me dit : missing : after property id

[Bovino]

Et le code client généré, ça donne quoi ???

[gazelle]

le code client?
Je ne vois pas... :s

[Bovino]

Code php :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
new Ajax.Updater('infos', 'get_infos.php', 
{ 
evalScripts: true, 
method:'post', 
parameters:{i:<?php echo $user->id_user ?>}, 
onCreate:{<?php echo 'Chargement en cours, merci de patienter quelques instants ...' ?>} 
} 
);
</script>

Ca, c'est du code PHP, il est interprété par ton serveur et renvoie à ton navigateur (le client) une page HTML (contenant ton code JavaScript), c'est le code du navigateur (code source) que j'aimerais voir.

[gazelle]

Ah ok!

Code :

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

1
2
3
4
5
6
 
<div id="infos">
<script type="text/javascript">
new Ajax.Updater('infos', 'hhtp://localhost/proj/user/get_infos.php', { evalScripts: true, method:'post', parameters:{i:0012}, onCreate:{Chargement en cours, merci de patienter quelques instants ...}});
</script>
</div>

[Bovino]

Code :

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

new Ajax.Updater('infos', 'hhtp://localhost/proj/user/get_infos.php', { evalScripts: true, method:'post', parameters:{i:0012}, onCreate:{Chargement en cours, merci de patienter quelques instants ...}});

En dehors du hhtp au lieu de http (), le problème se situe au niveau du onCreate, il manque les quotes, mais surtout, cela ne fait absolument rien... Le onCreate doit contenir une fonction ou des instructions :

Code :

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

onCreate: $('attente').update('Chargement en cours, merci de patienter quelques instants ...')

Par exemple.

EDIT :
Ou alors :

Code :

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

onCreate: function(){$('attente').update('Chargement en cours, merci de patienter quelques instants ...')}

[gazelle]

Merci mais je débute un peu avec l'ajax.
Que dois-je faire avec la fonction attente?
que dois-je mettre dedans et où dois-je placer cette fonction?

Désolé...et merci!

[Bovino]

attente n'est pas une fonction, dans mon exemple, c'est l'id de l'élément dans lequel tu veux que le message apparaisse.
Donc, dans ta page html, tu donnes un id à l'élément où tu veux afficher le message, par exemple

Code html :

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

<div id="attente"></div>

et quand tu lances la fonction Ajax, le texte apparaitra dedans.

[gazelle]

Merci, ça marche nikel!
A l'exception près qu'il a fallut que je mette onLoad à la place de onCreate!

Merci infiniement Bovino!