[JS] Fenêtre de progression

[@ybee]

Bon, c'est pas nouveau, je suis vraiment nul en javascript...

Depuis ce matin je fais des recherches mais je ne trouve pas ce que je veux

J'aimerais que lorsque le bouton "envoyer" d'un formulaire soit cliqué, pendant que la photo est uploadée (ce sont de grosses photos, l'utilisateur peut attendre jusque genre 5 minutes...), une petite fenêtre popup s'ouvre avec dedans un petit texte qui dit que la photo est en cours d'envoi et une barre de progression toute simple (pas une barre qui calcule la progression mais vraiment juste un gif animé qui tourne en boucle, juste pour que ça bouge et que l'utilisateur ne pense pas que le truc est planté).

Jusque là, je pense que c'est pas trop compliqué et dans mes cordes.

Ensuite, j'aimerais qu'une fois que la page en arrière plan (qui est en train d'exécuter le script d'envoi) puisse envoyer une commande qui ferme ce popup lorsqu'elle a fini d'envoyer le fichier. Et là j'avoue que je patauge un peu et que je ne sais pas comment m'y prendre ;-)

Si quelqu'un a des pistes, exemples etc, ce serait sympa...

 

[@ybee]

J'ai tenté ceci:

J'ai cr&#233;&#233; un <div> masqu&#233;, que je voudrais faire appara&#238;tre lorsque le bouton "Envoyer" est cliqu&#233;...

Mais cela ne fonctionne pas car, sans doute, une fois que le bouton est cliqu&#233;, la page suivante est en train d'&#234;tre charg&#233;e. Et m&#234;me si elle prend du temps &#224; &#234;tre charg&#233;e puisque l'image est lourde &#224; envoyer, la page actuelle du formulaire ne sait plus &#234;tre modifi&#233;e

J'en reviens donc &#224; ma premi&#232;re id&#233;e de page popup qui s'ouvre au click, mais je sais pas comment la faire se refermer seul une fois que la page suivante est charg&#233;e

 

[@ybee]

Bon, je sais qu eje parle seul, mais c'est pas grave, &#231;a fait passer le temps et &#231;a m'emp&#234;che de peter une case parce que l&#224; le truc commence &#224; m'&#233;nerver...

Enfin, tout marche *presque* comme il faudrait, donc si encore uen fois quelqu'un peut m'aider c'est cool

Quand on clique sur Submit, un <div> contentant un gif anim&#233; de barre de progression et un petit texte apparait. Ce div &#233;tant &#224; la base masqu&#233;, bien entendu.
Une fois que la page a fini de charger la photo et passe &#224; la suite, c'est nickel...

MAIS...

Si la photo ne rencontre pas des conditions minimales de taille, il y a un history.back() qui ram&#232;ne l'utilisateur au formulaire pour qu'il choisisse une autre photo.

Probl&#232;me: comme on fait un simple retour en arri&#232;re dans l'history, on revient sur le formulaire tel que l'utilisateur l'avait laiss&#233;, et donc le div de progression est visible

Je n'ai pas trouv&#233; l'endroit o&#249; je pouvais dire de masque &#224; nouveau ce div une fois qu'on changeait de page

Une id&#233;e?

Merci

 

[p4bl0]

j'ai une id&#233;e, donc je me d&#233;p&#234;che de l'&#233;crire, mais &#231;a va peut-&#234;tre pas &#234;tre tr&#232;s clair :

quand l'utilisateur clique sur envoyer, fait un tout b&#234;te onclick="window.open('patientez.html')"

Pour la seconde page (ou la m&#234;me que la premi&#232;re mais avec le formulaire valid&#233 :
avant d'envoyer quoi que ce soit au navigateur, tu upload la photo avec un script php. (en cliar tu fout ton php qui upload la photo avant m&#234;me ton DOCTYPE, tout en haut du fichier) comme &#231;a la page ne charge que quand l'upload est fini.
Et dans la page, dans la balise body, tu met onload="window.close('patientez')"


Sur le principe, &#231;a devrai fonctionner, mais je sais pas comment faire pour que patientez soit bien le nom de la fen&#234;tre qui contient patientez.html.

PIAF :
c'est bon j'ai trouv&#233; :
dans le bouton envoyer tu met :
onclick="fenetreCent('patientez.html','patientez',200,200,'menubar=no,scrollbars=no,statusbar=no')"

et dans le body :
onload="patientez.close()"
(close est en fait une m&#233;thode, pas une fonction, donc on l'applique &#224; la fen&#234;tre (fenetre.close()) plut&#244;t que de lui passer la fen&#234;tre ne argument)

 

[p4bl0]

mince je me suis gour&#233; en faisant un mauvais copier-coller :

c'est pas : onclick="fenetreCent...
c'est onclick="window.open

PIAF : heu... en fait j'ai essayer, &#231;a marche pas...

 

[heliotrope]

Salut,

jette un oeil sur le code js de cette page

http://www.dustindiaz.com/ajax-contact-form/

la demo est l&#224;

http://www.dustindiaz.com/testJax/