Discussion :

[heretik25]

Bonjour,

J'aimerais avoir quelques pistes pour mettre en place un effet de loader lors d'un envoi de formulaire qui contient un fichier.

En effet, l'attente avec une page blanche n'est pas très gracieux et j'aimerais informer l'utilisateur que l'envoi est en cours.

A noter que le formulaire appel une seconde page.

Je remercie la ou les personnes qui m'aideront dans cette recherche du saint graal

Formulaire :

Code :

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

1
2
3
4
5
6
 
 
<form action="/liste_article.php" method="post" id="formulaire" name="formulaire"  enctype="multipart/form-data">
<input type="file" name="gpx" id="gpx"/>
<input type="submit" value="Envoyer" name="submit" />
</form>

[N4rc0]

Bonjour Heretik25,

En ce qui concerne ton problème, j'aimerais comprendre, tu envoies ton formulaire, qui ouvre une deuxième page,et c'est sur cette deuxième page que se trouve ton temps d'attente (et que tu veux faire patienter avec un effet loader) ? Ou bien le temps d'attente se fait sur la première page (car la deuxième n'est pas encore ouverte)?

[heretik25]

Bonjour et merci pour la réponse,

Lorsque je clic sur le bouton submit, cela ouvre la page de destination. Sur cette page, il y a une longue attente (envoi du fichier + traitement).

J'aimerais que sur cette page il y ait un loader permettant de faire patienter l'utilisateur.

Pour autant, j'aimerais savoir s'il est possible de faire patienter l'utilisateur sur la page du formulaire et n'ouvrir la page de destination que lorsque le traitement est fini (sachant que le formulaire à besoin de la page de destination pour faire son traitement).

Merci !

[N4rc0]

Alors je pense qu'il peut y avoir plusieurs moyens pour obtenir ce résultat. Cela dit, ne connaissant pas ton environnement de développement (notamment ton hypothétique utilisation de librairies spécifiques (car certaines librairies proposent des composants permettant d'effectuer cette fonctionnalité)), la solution la plus simple serait pour toi, de créer une boite de dialogue dans la page de ton formulaire, et d'assigner en image de fond un gif de type ajax loader (voici un lien si tu cherches ce genre de gif http://www.ajaxload.info/).

A l'envoi, de ton formulaire (avant le début du traitement) tu appelles l'ouverture de ta boite de dialogue, tu effectues ton traitement, tu ouvres la 2ème page, mais tu gardes le focus sur la première, puis une fois le traitement fini, tu fermes ta boite de dialogue, et tu assigne le focus à la deuxième fenêtre. Tu devrais ainsi obtenir le résultat voulu.
C'est dans la théorie ce que tu fois faire, je ne te mets pas d'exemple de code, ne connaissant pas ton environnement, mais je pense que tu ne devrais pas avoir trop de difficultés.

[heretik25]

Bonjour et merci pour la réponse,

J'utilise jquery lorsque le besoin s'en fait ressentir.

Concernant mon environnement, il n'y a rien de spécifique, j'utilise mysql sur un php 5, rien de plus, rien de moins.

Si tu avais un exemple à me proposer pour m'aider à m'orienter, ce serait super !

[N4rc0]

Si tu souhaites l'effectuer en JQuery, voici un lien qui t'aideras surement dans cette tâche.

Tu auras juste à remplacer le bouton par un appel de la fonction dans la balise "onsubmit" de ton formulaire ou "onclick" de ton input.

[heretik25]

Bonjour,

Je cherche une solution afin d'avoir un gif animé qui tourne au centre de l'écran. Ceci permet de faire l'utilisateur lors de l'envoi du formulaire.

Seulement mon souci c'est que le traitement du formulaire se situe sur une seconde page et du coup mon gif que je fait apparaître sur le onsubmit de la balise du form disparait quelques secondes après, lorsque la page de destination s'affiche.

Avez-vous une idée de comment je pourra procéder ?

Merci.

Je sais qu'on est en php mais en jquery j'avais juste fait :

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">
	$(document).ready(function(){ 
    // On cache le div a afficher : 
    $("#loader").hide(); 
		test = function() {
			//utilisation du $ possible dans la fonction
			$("#loader").show();
		};
	});
 
	</script>

Le div qui s'affiche sur le onsubmit :

Code :

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

1
2
3
echo'<div id="loader">';
echo '<img src="/admin/images/ajax-loader.gif" alt="icône patienter" title="veuillez patienter" />';
echo'</div>';

[ticroch]

Lance une requete Ajax à la place d'utiliser un formulaire, comme ca avant de lancer la requete tu affiche ton image, lorsque la requete est finie tu la retire, et si tu le veux tu redirige sur une autre page!

Ce plugin te permet de le faire facilement si je me rappelle bien, il s'occupe de transformer toute les valeurs de ton formulaire comme aprametre de la requete ajax : http://jquery.malsup.com/form/