Afficher la boîte de dialog jQuery onSubmit pendant le traitement du formulaire HTML

J’ai un formulaire HTML qui permet à un utilisateur d’append une pièce jointe jusqu’à X MB. Etant donné que les vitesses de connexion des utilisateurs varient, je souhaite afficher une boîte de dialog indiquant les éléments suivants: “Votre demande est en cours de traitement. Ne quittez pas cette page. Cette boîte de dialog se ferme lorsque le formulaire est soumis avec succès”. Pas mot pour mot mais semblable. Le formulaire est publié sur lui-même et est traité avec PHP. Je ne cherche pas de barre de progression ni quoi que ce soit. Juste une alerte amicale. J’ai consulté la documentation de l’interface utilisateur de jQuery, mais les exemples illustrent une confirmation nécessitant l’intervention de l’utilisateur pour continuer. Je veux juste un espace réservé pendant le traitement. Tout cela ou des liens sont appréciés.

Merci d’avance

Ainsi, après quelques travaux de bricolage et des heures de recherche, j’ai été en mesure de rassembler une solution efficace ne nécessitant aucune Ajax. C’est ici:

La section HEAD

 

Le CSS

 #loading-div-background{ display: none; position: fixed; top: 0; left: 0; background: #fff; width: 100%; height: 100%; } #loading-div{ width: 300px; height: 150px; background-color: #fff; border: 5px solid #1468b3; text-align: center; color: #202020; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -100px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior: url("/css/pie/PIE.htc"); /* HANDLES IE */ } 

Le HTML (tronqué pour illustrer les parties nécessaires)

 
// Fields omitted for brevity
Loading..
PROCESSING. PLEASE WAIT...

Et le résultat final ressemble à ceci.

Dialogue de processus de formulaire jQuery onSubmit

Empêche l’utilisateur d’interférer dans le processus (à moins que l’utilisateur ne clique sur arrêter ou quitter le navigateur (évidemment)). Fonctionne très bien, il est propre et fonctionne sur Chrome, IE, Firefox et Safari en utilisant les dernières bibliothèques jQuery et jQuery UI incluses dans les référentiels Google Code.

vous pouvez utiliser la boîte de dialog modale jquery ui et masquer le bouton de fermeture

http://api.jqueryui.com/dialog/#entry-longdesc

Vous pouvez également utiliser ajax pour soumettre votre formulaire. Vous pouvez ensuite ouvrir la boîte de dialog avant le début de la demande. Dans la fonction de succès, fermez la boîte de dialog à l’aide de

 $("#myDialog").dialog("close"); 

. Je ne sais pas comment vérifier si un message est rédigé en PHP, mais s’il existe un moyen de le faire, vous pouvez le faire ici.

J’utilise pnotify. C’est un plugin jQuery qui est vraiment léger et super simple. Il affiche de simples dialogs non intrusifs. Vérifiez ici .

Mettre à jour

Voici un petit exemple rapide de la façon dont je gère l’information d’un utilisateur sur le succès / l’échec avec pNotify. Les mises à jour de pNotify sont intégrées à leurs propres fonctions. Je n’ai donc pas besoin de répéter le code à chaque demande, mais cela devrait montrer comment vous pouvez l’utiliser pour notifier l’utilisateur.

 notify = $.pnotify({ title: 'Working', text: 'Updating entry, please wait...', type: 'info', hide: false }); $.post('ajax.php', meta, function (data) { if (data && data.status === 1) { notify.pnotify({ title: 'Success', text: 'System successfully updated.', type: 'success', delay: 1500, hide: true }); } else { notify.pnotify({ title: 'Error', text: 'There was an error updating the system.', type: 'error', delay: 4000, hide: true }); } }, "json");