coole jQuery Statusmeldungen – nur 1 Codezeile

Ich bin ein Freund von bunten Statusmeldungen. „Speichern erfolgreich“, „Anmeldung fehlgeschlagen“, ein kleines Icon, schön farbig, user-friendly und ein bisschen Animations-Spielerei.

Das Coole ist: mit jQuery kann man eine solche Statusmeldung mit Style und Fading recht problemlos mit nur 1 Zeile realisieren!

Code
$.ajax({ type: 'POST', url: 'mailer.php', data:{'submit':'1','values':values}, success: function(data)
   {
	if($('#contact-wrapper .status').is(':hidden')) $('#contact-wrapper .status').html(data).addClass(data).fadeToggle().delay(3000).fadeToggle(function () { $(this).removeClass(data) }); /* 1 Zeile, ein Traum */
   } /* $.ajax success */
}); /* $.ajax */

(Update 1.1)

Die $.ajax Funktion liefert einen Rückgabewert der mailer.php. Dieser Rückgabewert ist entweder „success“ oder „error“. Das ließe sich natürlich ausbauen.
Die Statusmeldung ist mit CSS gestyled, wird eingeblendet, enthält einen bestimmten Text (in diesem Beispiel nur „success“ oder „error“), bleibt ein paar Sekunden stehen und wird dann ausgeblendet.

.status {
	display: none;
	border: 1px solid; 
}
.status.success {
	background: #DFF2BF url("img/10er-iconset.png") no-repeat 0px -38px;
	color: #4F8A10;
}
.status.error {
	background: #FFBABA url("img/10er-iconset.png") no-repeat 0px -58px;
	color: #D8000C;
}

Sehen wir uns die Codezeile im Detail an:

if($('#contact-wrapper .status').is(':hidden')) {
  $('#contact-wrapper .status').html(data)
    .addClass(data)
	  .fadeToggle()
	    .delay(3000)
		  .fadeToggle(function () { 
		    $(this).removeClass(data) 
		  });
}

(Update 1.1)

Zeile 1 überprüft, ob die Statusmeldung gerade angezeigt wird. Nur, wenn die Statusmeldung gerade nicht angezeigt wird, soll ein Klick (und damit das Einblenden der Statusmeldung) ausgelöst werden.
Zeile 2 setzt den Inhalt, also den Text, der Statusnachricht auf „error“ (

data

enthält den Rückgabewert der mailer.php). Hier sollte man vorher vielleicht eine aussagekräftigere Nachricht festlegen.
Zeile 3 fügt dem Zielelement die Klasse „error“ hinzu. Im CSS Dokument müssen die Klassen also so benannt sein wie die möglichen Rückgabewerte der mailer.php.
Zeile 4 blendet das Element ein, Zeile 5 wartet 3 Sekunden ab (lässt es also 3 Sekunden stehen),
Zeile 6 blendet das Element wieder aus, als callback Funktion (diese Funktion wird am Ende der Ausführung der fadeToggle Funktion ausgeführt) wird in
Zeile 7 die Klasse „error“ wieder entfernt.
(Update 1.1)

.fadeToggle(function(){}); mit callback muss sein, da sonst noch während der Ausblendeanimation (asynchron) die Styleklasse entfernt wird. Das führt zu Anzeigefehlern.

Dank jQuery ist das auch für den Internet Explorer kein Problem, kompatibel zu allen Versionen*.

Demo

Link

Download

jQuery-status-msg [.zip]
(Update 1.1)

Changelog

v1.1: Anzeigefehler bei mehrfachem Klick behoben (siehe Kommentar 1+2)

4 Kommentare

  1. Hey,

    bei dem Beispiel hast du das Problem, dass wenn du öfter hintereinander auf den Absende Button klickst, das Feld nicht wirklich gestylt ist.

    An sich nicht schlimm, aber wollte das nur mal eben sagen. ;9

    Gruß,
    DasLampe

  2. Ja stimmt das fiel mir irgendwann bei einem anderen Projekt, wo ich die Zeile nutze, schonmal auf. Da wollte ich mich eigentlich drum kümmern, hab ich wohl vergessen.

    Fix getestet, Post updated.
    Ich prüfe beim Klick vorher mit

    if($(element).is(':hidden'))

    ob die Messagebox gerade angezeigt wird. Wenn ja, dann wird der Klick ignoriert. Statt

    toggleClass

    hab ich jetzt auch

    addClass

    und

    removeClass

    genommen, sollte sicherer sein.

    Danke für den Hinweis! 🙂

  3. Fallback fehlt für browser ohne JS. Mindestens „bitte javascript anschalten“ sollte da stehen bei Leuten, die es z.B. aus Sicherheitsgründen ausgeschaltet haben (wie eigentlich jeder Admin auf seinem Arbeitsrechner).

  4. Ich hab in meinem Blog einige jQuery Programmierungen. Ich gehe davon aus, dass jeder, der diese Programmierung nutzt, sich selber um Fallbacks kümmert. Man sollte selten JS nutzen ohne ein Fallback zu realisieren. Aber das sollte weniger meine Aufgabe sein als die desjeniger, der es implementiert.
    Aber du hast schon Recht, Fallback muss sein.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.