Artikel mit dem Tag "Event"

Seite nach Absenden eines Formulars bzw. Klicken eines Links deaktivieren

Benutzer erwarten oft, dass sie sofort nach Absenden eines Formulars bzw. Klicken eines Links das Ergebnis mit der damit verbundenen Aktion auf ihrem Bildschirm sehen. Jedoch brauchen Skripte eben manchmal ein paar Sekunden, und so kommt es, dass oft mehrmals ein Absende-Button bzw. -Link betätigt wird, was unnötigen Traffic produziert.

Die hier präsentierte Lösung produziert unerwünschte Nebeneffekte, die mir erst später aufgefallen sind:

  • Hat der Benutzer beim Klicken eines Links z.B. die STRG-Taste (für Öffnen in einem neuen Tab), oder die SHIFT-Taste (für Öffnen in einem neuen Fenster) gedrückt, so wird die Aktion zwar ausgeführt, auf der aktuellen Seite bleibt jedoch der Lade-Hinweis. Wieso? Ich bin davon ausgegangen, dass beim Klicken eines Links eine neue Datei vom Browser im aktuellen Tab/Fenster geladen wird. Dadurch verschwindet der Ladehinweis, sobald die neue Seite angezeigt wird. Bei gleichzeitigem Drücken einer der eben genannten Tasten, wird die Seite jedoch nicht im aktuellen Tab/Fenster geladen. Der Lade-Hinweis wird trotzdem angezeigt.

Ich bin mir dessen bewusst geworden, bis zu einem Update sollte dieser Artikel mit Bedacht genossen werden.

Eine einfache Möglichkeit, dies vorzubeugen, lässt sich mit jQuery realisieren:
(DEMO: http://files.philip-ehret.de/dev/examples/jquery/deactivatecontent.html)

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--
/**
 * Deaktiviert den Inhalt
 * bzw. blendet Overlay ein
 */
function deactivateControls() {
	var overlay = document.createElement('div');
	$(overlay).attr('id', 'overlay');
	$(overlay).css('filter', 'alpha(opacity=50)'); /*IE-Transparenz-Fix*/
	$(overlay).css('display', 'block');
	$(overlay).prependTo($(document.body));
}
/**
 * Aktiviert den Inhalt
 * bzw. blendet Overlay aus
 */
function activateControls() {
	$('#overlay').css('display', 'none');
	$('#overlay').remove();
}

/**
 * Erstellt einen Lade-Hinweis und zeigt diesen an
 */
function displayLoading() {
	var loading = document.createElement('div');
	$(loading).attr('id', 'loadingNotice');
	$(loading).text('Lade...');
	$(loading).prependTo($(document.body));
}

/**
 * Bindet an alle Submit-Buttons und Links
 * die deactivateControls-Funktion
 */
$(document).ready(function () {
	$('a, input[type="submit"]').bind('click', function(e) {
		/* Inhalt deaktivieren */
		deactivateControls();
		
		/* Ladestatus anzeigen */
		displayLoading();
	})
});
//-->
</script>

Sobald das Dokument für die Manipulation bereit ist ($(document).ready()) wird es nach Links und Submit-Buttons durchsucht. An deren Click-Event werden die Funktion deactivateControls(), welche den Seiteninhalt mit einem halbtransparenten Layer überblendet, und die Funktion displayLoading(), welche einen Lade-Hinweis einblendet, gebunden.

<style type="text/css">
body, html {
	margin: 0;
	padding: 0;
}

#overlay {
	opacity: .5;
	z-index: 10;
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	background: #000;
}

#loadingNotice {
	z-index: 150;
	position: fixed;
	top: 35%;
	display: block;
	width: 100%;
	font: 20pt Arial, Helvetica, sans-serif;
	color: #f5f5f5;
	text-align: center;
}
</style>

Durch die Positionierung mit fixed und einen hohen z-index wird gewährleistet, dass die eingefügten Elemente vor dem restlichen Seiteninhalt liegen. Sollte im Projekt bei anderen Elementen der z-index zum Einsatz kommen, ist es wichtig, dass dieser kleiner als der von #overlay und #loadingNotice ist!

Share
Geschrieben von Philip Ehret am 21.09.2009 | Kommentare weiterlesen...