Wenn es mal wieder länger dauert.
Wir sind schnelle Reaktionszeiten auf Webseiten gewohnt, dauert es mal ein paar Sekunden wird sofort weitergeklickt. Dumm nur wenn beim Absenden eines Web-Formulars mal etwas mehr auf dem Server zu tun ist, z.B. die Übergabe der Daten an ein CRM-System. Genau vor diesem Problem stand ich demletzt, die etwas längere Ladezeit führt dazu das die Benutzer mehrfach auf den "Absenden" Button klickten und der Eintrag dann mehrfach vorhanden war.
Ein "Bitte warten..." Fenster musste her, am besten mit möglichst wenig Änderungen an der bestehenden Webseite, und mit möglichst wenig Code durch die Verwendung von vorhandenen Java-Script Bibliotheken.
Es entstanden die Folgenden zwei Varianten einer Lösung:
Mit jQuery, please_wait.js
Hier habe ich eine Javascript Datei erstellt, die über ein Script-Tag in die Webseite eingebunden werden kann.
Durch den Aufruf von addWait() wird das benötigte div-Element dynamisch zur Seite hinzugefügt und ein Event zum Submit-Button hinzugefügt, vor dem Absenden des Formulars wird nun die animierte GIF-Datei angezeigt.
mit MooTools
In diesem Fall wurde der html und js-Code direkt in die Webseite eingebaut, hier wird ebenfalls ein Event auf dem Submit Button registriert, welcher vor dem Absenden das "Bitte warten.." Bild anzeigt.
Wir sind schnelle Reaktionszeiten auf Webseiten gewohnt, dauert es mal ein paar Sekunden wird sofort weitergeklickt. Dumm nur wenn beim Absenden eines Web-Formulars mal etwas mehr auf dem Server zu tun ist, z.B. die Übergabe der Daten an ein CRM-System. Genau vor diesem Problem stand ich demletzt, die etwas längere Ladezeit führt dazu das die Benutzer mehrfach auf den "Absenden" Button klickten und der Eintrag dann mehrfach vorhanden war.
Ein "Bitte warten..." Fenster musste her, am besten mit möglichst wenig Änderungen an der bestehenden Webseite, und mit möglichst wenig Code durch die Verwendung von vorhandenen Java-Script Bibliotheken.
Es entstanden die Folgenden zwei Varianten einer Lösung:
Mit jQuery, please_wait.js
Hier habe ich eine Javascript Datei erstellt, die über ein Script-Tag in die Webseite eingebunden werden kann.
Durch den Aufruf von addWait() wird das benötigte div-Element dynamisch zur Seite hinzugefügt und ein Event zum Submit-Button hinzugefügt, vor dem Absenden des Formulars wird nun die animierte GIF-Datei angezeigt.
function showWait() {
if ($("#wait").length == 0)
addWait();
$("#wait").show("slow");
}
function hideWait() {
$("#wait").hide("slow");
}
function addWait() {
$('body').append(
'<div id="wait" style="position:absolute;'+
'left:50%;top:50%;height:260px;width:470px;'+
'margin:-130px -235px;display:none" >' +
'<img src="images/wait.gif" '+
'alt="Bitte warten.." '+
'style="border:3px outset silver;" '+
'onclick="hideWait();" /></div>'
);
}
mit MooTools
In diesem Fall wurde der html und js-Code direkt in die Webseite eingebaut, hier wird ebenfalls ein Event auf dem Submit Button registriert, welcher vor dem Absenden das "Bitte warten.." Bild anzeigt.
<script type="text/javascript">
window.addEvent("domready", function()
{
$("wait").setStyle("opacity", "0");
$('input.submit').addEvent( 'click', function(evt){
$('wait').fade('in');
});
});
</script>
<div id="wait"
style="position:absolute;
left:50%; top:50%; height:260px;
width:470px; margin: 0px -235px;" >
<img src="images/wait.gif"
alt="Bitte warten.."
style="border:3px outset gray;"
onclick="this.fade('out');" />
</div>