Anzeige jQuery dialog "onSubmit", während HTML-Formular Verarbeitung

Ich habe ein HTML-Formular, das ermöglicht einem Benutzer das hinzufügen einer Anlage bis zu X MB. Da die Geschwindigkeit der Verbindung für den Benutzer variieren, möchte ich Ihnen zeigen, einen dialog, der sagt etwas entlang der Linien von "Ihre Anfrage ist in Bearbeitung. Nicht zu navigieren Weg von dieser Seite. Dieses Dialogfeld wird geschlossen, wenn das Formular erfolgreich gesendet". Nicht wörtlich, aber ähnlich. Die form an sich selbst sendet und verarbeitet mit PHP. Ich bin nicht auf der Suche nach einer progress-bar oder so etwas. Nur eine freundliche Warnung. Ich schaue mir das jQuery UI Dokumentation, sondern die Beispiele zeigen eine Bestätigung erfordern eingreifen des Benutzers fortsetzen. Ich will einfach nur ein Platzhalter während der Verarbeitung geschieht. Jeder dieser links oder geschätzt werden.

Vielen Dank im Voraus

InformationsquelleAutor rws907 | 2013-05-18

So, nach einiger Bastelei und Stunden Suche war ich in der Lage um Stück zusammen eine funktionierende Lösung, die nicht erfordern keine Ajax. Hier ist es:

Den HEAD-Abschnitt

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

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

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 */
}

Den HTML-Code (Gekürzt um zu veranschaulichen notwendigen Teile)

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

Und das Ergebnis sieht wie folgt aus.

Anzeige jQuery dialog

Verhindert, dass der Benutzer sich mit dem Prozess (es sei denn, Sie klicken Sie auf beenden oder schließen Sie den browser (offensichtlich)). Funktioniert sehr schön, es ist sauber und funktioniert über Chrome, IE, Firefox und Safari mit den neuesten jQuery und jQuery UI-Bibliotheken von Google Code repositories.

Ich mag diese Lösung ist einfach und erfordert keine plugins. Ich habe es zu zwicken ein bisschen, damit es funktioniert, wie ich wollte, es zu, aber dieses Beispiel hat mich 95% der Weg dorthin schnell. Danke!
Genial, ich bin froh, dass es geholfen hat. Ich war wirklich sehr zufrieden mit dem Ergebnis und nicht den Umweg über ein plugin.
Das ist großartig! Habe, umgesetzt in nur wenigen Minuten. So froh, dass ich nicht haben, das Rad neu zu erfinden.

InformationsquelleAutor rws907

0

könnten Sie jquery ui modal dialog-und ausblenden der Schaltfläche schließen

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

Außerdem konnte man ajax verwenden, um das Formular Absenden, und dann können Sie öffnen Sie den dialog, bevor die Anforderung beginnt, und in der success Funktion schließen Sie den dialog mit
```
$("#myDialog").dialog("close");
```
. Ich bin mir nicht sicher, wie Sie überprüfen, wenn ein Beitrag abgeschlossen ist in PHP, aber wenn es einen Weg gibt, zu tun, dass Sie es tun könnte es.

Von der client-Seite, da das Skript an sich selbst sendet, die für die Verarbeitung, die Seite wird aktualisiert, sobald der Inhalt des Formulars hochladen abgeschlossen sind. Also, wenn ein Benutzer versucht, das hochladen einer 10-MB-Datei, werden Sie sehen, eine Sanduhr-Symbol, während der upload stattfindet. Seit dem upload ist der Letzte Teil der form, es ist sicher anzunehmen, dass der POST-Vorgang ist abgeschlossen, wenn der stream auf dem server ist abgeschlossen - die Seite aktualisiert wurde damals durch die PHP-Validierung. Guter Vorschlag, Ajax, ich werde in diesem Blick.

InformationsquelleAutor MorningDew
0

Benutze ich pnotify. Es ist ein jQuery-plugin, das ist wirklich leicht und super einfach. Es zeigt einfache, nicht aufdringliche Dialoge. Check it out hier.

Update

Hier ist ein kurzes Beispiel, wie ich mit der Benachrichtigung der Benutzer über Erfolg/Misserfolg mit pNotify. Ich habe die pNotify updates eingehüllt in Ihre eigenen Funktionen, so dass ich nicht wiederholen Sie den code, mit jeder Anfrage, aber ich denke, das sollte zeigen, wie Sie es verwenden können, für die Benutzer-Benachrichtigung.
```
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");
```
Vielen Dank für diese, ich hatte nicht davon gehört. Ich werde das prüfen. Hast du ein Beispiel von dem, was ich versuche zu erreichen. Auf den ersten Blick sehe ich nichts auf Ihre demos über die Verwendung von "onsubmit" und dann, nachdem es verschwindet, wenn die Seite aktualisiert wird (an sich selbst sendet, die für die Verarbeitung)
Ich habe gerade die Benachrichtigung anlegen, wenn ich den Antrag und fügen Sie einen Rückruf auf das complete-Ereignis aus, das entfernt die Meldung. Ich werde versuchen, ein wenig Beispiel-code in ein paar Minuten.
Danke. Ich poste das, was ich am Ende werfen zusammen, sobald ich es zu arbeiten.
Ich aktualisiert meine Antwort um ein code-snippet. Ich hoffe, es hilft. Wenn Sie nicht wie pNotify, ich bin sicher, dass Ihr andere Bibliotheken, die Sie verwenden könnten, in der gleichen Weise.

InformationsquelleAutor Matthew

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Update