[AJAX] afficher message d'attente

Version imprimable

21/10/2009, 10h30
boboss123

[AJAX] afficher message d'attente

bonjour,

Pendant l'envoie d'un fichier je voudrais afficher un bloc au milieu de l'ecran avec a l'interieur une image et un message d'attente => je suppose que vous avez déjà fait ça ;) ...

Comment faites-vous (j'ai du mal a positionner mon bloc) ?

Merci d'avance
21/10/2009, 10h55
E.Bzz
Bonjour,

Citation:

Envoyé par boboss123

Comment faites-vous (j'ai du mal a positionner mon bloc) ?

va falloir être plus précis :aie:

Le "positionnement" du bloc, par exemple, c'est un problème CSS.
1. Montre-nous déjà le code que tu utilises
2. Décris précisément ce que tu veux obtenir
3. Indique le point précis qui te bloque pour y arriver
;)

A+
21/10/2009, 11h09
boboss123

j'ai déja ouvert un post sur la section CSS : http://www.developpez.net/forums/d82...-cadre-centre/
=> j'ai aussi ouvert ici car comme tu peux le voir il semblerait qu'en utilisant que du CSS ça ne fonctionne pas correctement a cause des barres de scroll du navigateur web

=> lorsque vous avez de requêtes qui durent longtemps, vous affichez vos messages d'attente comment (peut etre que je n'utilise pas du tout la bonne méthode...) ?
21/10/2009, 11h15
E.Bzz

Tu ne nous montres que les problématiques CSS (et c'est dans le forum CSS que tu auras les réponses, pas ici), mais pas le reste.
Ce "reste" te pose-t-il problème ?

Si oui :
Comment fais-tu ton appel Ajax ?
Par rapport à cette appel, comment gères-tu l'affichage (puis le masquage) du message d'attente ?

A+

après quelques recherches, il s'avère que c'est impossible d'envoyer un fichier avec AJAX => il faut utiliser la methode traditionnelle et récupérer le fichier dans une iframe.

Donc j'explique la technique :

1- je déclare mon inputfile :
Code:

1 2 3 4 <form action="uploadFile.php" target="iframe_uploadFile" method="post" enctype="multipart/form-data" onsubmit="return uploadFileCheckSubmit()"> <input type="file" name="uploadFile"/> <input type="submit" value="Envoyer" /> </form>
=> j'utilise onsubmit pour pouvoir afficher mon div d'attente

2- fonction uploadFileCheckSubmit:
Code:

1 2 3 4 function uploadFileCheckSubmit(){ document.getElementById("divWait").style.display = "block" return true }
=> affichage de mon div d'attente avant envoi du fichier

3- declaration de l'iframe (endroit ou le fichier uploadFile.php va etre affiché):

Code:

<iframe name="iframe_uploadFile" src="about:blank" style="display:none"></iframe>

4- contenu du fichier uploadFile.php :
Code:

1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>upload file</title> <script type="text/javascript"> window.parent.uploadRequest('Telechargement reussi !') </script> </head> <body></body> </html>
=> permet d'executer la fonction uploadRequest lorsque le fichier uploadFile.php est reçu

5- fonction uploadRequest :
Code:

1 2 3 4 function uploadRequest(str){ document.getElementById("divWait").style.display = "none" alert(str) }
=> tout a l'air de bien fonctionner sauf que :
1- ma page n'est pas valide W3C : les attributs target et name de <form> et <iframe> me cause des erreurs => pourquoi ?
2- j'ai toujours mon message d'attente qui est mal positionné

=> Mais pourquoi AJAX a t-il été conçu si cette methode existe ? c'est beaucoup plus simple de gérer les post asynchrones avec cette methode, non ?

21/10/2009, 12h50
andry.aime

Bonjour,

Citation:

Mais pourquoi AJAX a t-il été conçu si cette methode existe ?

AJAX est conçu pour faire une requête au serveur sans que la page se récharge.

Citation:

1- ma page n'est pas valide W3C : les attributs target et name de <form> et <iframe> me cause des erreurs => pourquoi ?

Je ne suis pas si sûr mais comme si l'utilisation des iframe a été banni du W3C, d'où l'utilité de l'AJAX.
En utilisant AJAX, tu dois pouvoir suivre la progression de l'upload avec APC de php.
21/10/2009, 14h07
boboss123

j'ai beau cherché, je ne trouve aucune solution pour uploader un fichier via AJAX => ce qui me semble normal car js interdit de lire les fichier sur le disque dure de l'utilisateur.

Puis-je donc utiliser sans risque la methode actuelle (risque d'incompatibilité suivant le navigateur utilisé ?) ?
21/10/2009, 14h58
andry.aime

Citation:

j'ai beau cherché, je ne trouve aucune solution pour uploader un fichier via AJAX => ce qui me semble normal car js interdit de lire les fichier sur le disque dure de l'utilisateur.

C'est vraie mais j'ai voulu dire "utiliser Ajax pour voir l'état de la progression de l'upload".

Citation:

Puis-je donc utiliser sans risque la methode actuelle (risque d'incompatibilité suivant le navigateur utilisé ?) ?

Je ne pense pas qu'il y aura un problème.
21/10/2009, 16h17
boboss123

ok merci