Effet loader durant l'envoi d'un formulaire

[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 :

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]

J'ai rajouté le onSubmit sur la balise <form>

Code :

1
2
3
4
function example_ajax_request() {
	  $('#example-placeholder').html('<p><img src="/admin/images/ajax-loader.gif" width="220" height="19" /></p>');
	  $('#example-placeholder').load("/admin/php/articles/liste_article.php");
	}

Ensuite, j'ai modifié la fonction mais, sur cette ligne :

Code :

1
2
 
 $('#example-placeholder').load("/admin/php/articles/liste_article.php");

Faut-il donner le lien de la page traitant le formulaire car en théorie, c'est la balise action du formulaire qui donne cet ordre.

Merci.

[Pymento]

Salut,

Tu pourrais faire un upload en ajax, (via une iframe, c'est le seul moyen) au lancement du submit tu fais apparaitre un gif animé, et quand le fichier et les infos sont uploadés, tu fais ce que tu veux après avoir masqué le gif.

[heretik25]

Bonjour,

Un petit exemple pour la route ?

Merci !

[N4rc0]

Envoyé par heretik25

Ensuite, j'ai modifié la fonction mais, sur cette ligne :

Code :

Faut-il donner le lien de la page traitant le formulaire car en théorie, c'est la balise action du formulaire qui donne cet ordre.

Merci.

En fait, ceci est expliqué dans le paragraphe qui suivait (du lien que je t'ai donné), je cite

The first line in the example_ajax_request() function sets the html of the <div> to the loading image, and the second line then loads the content from /examples/ajax-loaded.html into the div.

It's best in this sort of situation to pre-load the loading image so that when the button is clicked it appears immediately from the cache. If this is not done then the AJAX request may be completed before the image has finished downloading. I'll look at doing that in another post.

En gros la première ligne initialise le code html, et la deuxième "l'active".

Comme je te l'avais dit, il y a plusieurs possibilités pour ton cas, si celle-ci ne te convient pas, tu peux tout aussi bien créer une image (<img>) contenant ton gif (ajax loader) que tu ancres en plein milieu de ton écran (position : absolute), et tu lui assignes un style css (display: none) pour la cacher. Assignes un id à ton image, ensuite tu auras juste à changer le style Css de ton image lors du commencement et la fin de ton traitement pour cacher ou afficher ton image.

PS : N'oublie pas d'ajouter un z-index supérieur à ton image pour qu'elle s'affiche par-dessus le reste de ta page.

[tidus_6_9_2]

Si tu veux une vraie barre de défilement afin d'avoir la vrai valeur de l'attente, tu peux utiliser jquery en faisant ça :

http://jqueryui.com/demos/progressbar/#animated

Le seul truc c'est que tu vas charger en requête pour savoir l'état actuelle du chargement.

Enfin tout dépend comme toujours de tes besoins

[heretik25]

Envoyé par N4rc0

En fait, ceci est expliqué dans le paragraphe qui suivait (du lien que je t'ai donné), je cite


En gros la première ligne initialise le code html, et la deuxième "l'active".

Comme je te l'avais dit, il y a plusieurs possibilités pour ton cas, si celle-ci ne te convient pas, tu peux tout aussi bien créer une image (<img>) contenant ton gif (ajax loader) que tu ancres en plein milieu de ton écran (position : absolute), et tu lui assignes un style css (display: none) pour la cacher. Assignes un id à ton image, ensuite tu auras juste à changer le style Css de ton image lors du commencement et la fin de ton traitement pour cacher ou afficher ton image.

PS : N'oublie pas d'ajouter un z-index supérieur à ton image pour qu'elle s'affiche par-dessus le reste de ta page.

Cette proposition semble être ok pour moi. le seul souci est sa mise en œuvre que je ne comprend pas tellement.

J'appelle la fonction et jquery

Code :

1
2
3
4
5
6
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
		<script type="text/javascript">
		function example_ajax_request() {
		  $('#example-placeholder').html('<p><img src="/images/closelabel.gif" width="220" height="19" /></p>');
		  $('#example-placeholder').load("/test.html");
		}</script>

J'ajoute l'appel de la fonction dans mon bouton submit :

Code :

<input type="submit" onclick="example_ajax_request()" value="Envoyer" name="submit" />

J'ai ajouté également :

Code :

1
2
3
4
 
echo'<div id="example-placeholder">';
echo'<p>Placeholding text</p>';
echo'</div>';

Le texte "Placeholding text" sur la page n'est pas remplacé par mon fichier html.

Au click, je charge donc la page /test.html sauf que moi, je veux que mon traitement s'effectue et que mon formulaire soit intégré en base. Deplus, l'image d'attente ne se charge pas.

Je remercie par avance quiconque veut bien me donner la suite des bonnes étapes à produire pour voir afficher le petit loader au milieu de l'écran pendant que l'envoi du formulaire est en cours.

[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 :

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 :

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/