Affichage jQuery dialogue onSubmit tout formulaire HTML est en cours de traitement

J'ai un formulaire HTML qui permet à un utilisateur d'ajouter une pièce jointe à X MO. Parce que les vitesses de connexion pour les utilisateurs de varier, je voudrais afficher une boîte de dialogue qui dit quelque chose le long des lignes de "Votre demande est en cours de traitement. Ne pas quitter cette page. Cette boîte de dialogue se ferme lorsque le formulaire est soumis avec succès". Pas mot à mot mais similaires. La forme de postes de lui-même et est traitée avec PHP. Je ne suis pas à la recherche d'une barre de progression ou de quoi que ce soit. Juste un match amical d'alerte. J'ai été à la recherche à l'INTERFACE utilisateur de jQuery documentation, mais les exemples montrent une confirmation de ce qui nécessite l'intervention de l'utilisateur pour continuer. Je veux juste un espace réservé, tandis que le traitement se passe. Tout ce ou ces liens sont appréciés.

Merci d'Avance

OriginalL'auteur rws907 | 2013-05-18

Donc, après quelques retouches et des heures de recherche j'ai été en mesure de rassembler une solution qui ne nécessite pas d'Ajax. Ici, il est:

La Section d'en-TÊTE

<script type="text/javascript">
    $(document).ready(function (){
        $("#loading-div-background").css({ opacity: 1.0 });
    });

    function ShowProgressAnimation(){
        $("#loading-div-background").show();
    }
</script>

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ée pour illustrer les pièces nécessaires)

<form id="frm_send" name="frm_send" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">
//Fields omitted for brevity
<input type="submit" id="submit" name="submit" class="button" onclick="ShowProgressAnimation();" value="Send">
</form>
<div id="loading-div-background">
  <div id="loading-div" class="ui-corner-all">
    <img style="height:32px;width:32px;margin:30px;" src="/images/please_wait.gif" alt="Loading.."/><br>PROCESSING. PLEASE WAIT...
  </div>
</div>

Et le résultat final ressemble à ceci.

Affichage jQuery dialogue onSubmit tout formulaire HTML est en cours de traitement

Empêche l'utilisateur d'interférer avec le processus (à moins bien sûr qu'ils cliquez sur arrêter ou quitter le navigateur (évidemment)). Fonctionne très bien, c'est propre et fonctionne sur Chrome, IE, Firefox, et Safari en utilisant les dernières jQuery et jQuery UI bibliothèques incluses à partir de Google dépôts de Code.

J'aime bien cette solution car elle est simple et ne nécessite pas de plugin. J'ai dû ruser un peu pour le faire fonctionner comme je le voulais, mais cet exemple m'a fait 95% du chemin rapidement. Merci!
Génial, je suis heureux, il a aidé. J'ai été vraiment satisfait du résultat et de ne pas avoir à utiliser un plugin.
C'est génial! Obtenu est mis en œuvre en seulement quelques minutes. Donc, je suis content de ne pas avoir à réinventer la roue.

OriginalL'auteur rws907

0

vous pouvez utiliser jquery ui boîte de dialogue modale et masquer le bouton fermer

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

Vous pouvez également utiliser ajax pour soumettre votre formulaire, puis vous pouvez ouvrir la boîte de dialogue avant que la demande commence, et dans la réussite de la fonction fermer la boîte de dialogue à l'aide de
```
$("#myDialog").dialog("close");
```
. Je ne suis pas sûr de la façon de vérifier si un post est terminé en PHP, mais si il y a une façon de faire que vous pourriez faire.

Du côté client, depuis le script postes à elle-même pour le traitement, la page se réactualise une fois que le contenu du formulaire de téléchargement sont terminés. Donc, si un utilisateur tente de télécharger un fichier de 10 mo, ils vont voir une heure de verre icône alors que le téléchargement est en cours. Depuis le téléchargement de la dernière partie de la forme, il est sûr de supposer que le processus est terminé lorsque le flux de données vers le serveur est terminé - l'actualisation de la page, à l'époque de courir à travers le PHP de validation. Bonne suggestion sur l'Ajax, je vais regarder à cela.

OriginalL'auteur MorningDew
0

- Je utiliser pnotify. C'est un plugin jQuery qui est vraiment léger et super simple. Il affiche simple et non intrusive des boîtes de dialogue. Check it out ici.

Mise à jour

Voici un petit exemple de la façon dont je gère l'informant l'utilisateur de la réussite/échec avec pNotify. J'ai le pNotify mises à jour empêtrés dans leurs propres fonctions, donc je ne pas avoir à répéter le code à chaque demande, mais je pense que cela devrait démontrer comment vous pouvez l'utiliser pour la notification de 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");
```
Merci pour cela, je n'avais pas entendu parler avant. Je vais regarder dans. Vous avez un exemple de ce que je suis en train d'accomplir. À première vue, je ne vois rien sur leurs démos sur l'utilisation de cette onsubmit, puis en faisant disparaître lors de l'actualisation de la page (Messages à lui-même pour le traitement)
Je viens de créer la notification quand je soumettre la demande et ajouter un rappel sur l'événement le supprime la notification. Je vais essayer de mettre un peu de code en exemple en quelques minutes.
Merci. Je vais poster ce que j'ai fini vers le haut de jeter ensemble une fois que je reçois ce travail.
J'ai mis à jour ma réponse à inclure un extrait de code. J'espère que cela aide. Si vous n'aimez pas pNotify, je suis sûr qu'il en existe d'autres bibliothèques que vous pourriez utiliser de la même manière.

OriginalL'auteur Matthew

Vous devez vous connecter pour publier un commentaire.

Mise à jour