Loading-Hinweis einfügen

[gekkol1]

Hallo, ich brauche mal dringend Hilfe.

Bei einem auf meiner Seite eingebauten Filter möchte ich, dass ein "Loading"-Zeichen angezeigt wird, wenn man auf den Button "Jetzt filtern" geklickt hat. Kann man das einfach hinkriegen? Zum Beispiel durch Einfügen eines Codes?

Der Button hat folgenden HTML-Code:
<button id="search_submit" class="button_text" type="submit" name="submit"><img src="images/buttons/filterbutton.png" alt="Jetzt filtern" title="Jetzt filtern"></button>

Die GIF-Datei des "Lade"-Zeichens liegt z.B. im Verzeichnis "images/laden.gif".

 

[leveler]

Sowas hier zB?

 

[gekkol1]

Ja sowas in der Art. Nur das Loading-Zeichen soll nicht angezeigt werden, während die Seite noch lädt. Sondern innerhalb des Filters, wenn man auf den Button klickt...

Wie programmiert man das?

 

[Chickenshooter]

Hallo

Der Button hat folgenden HTML-Code:
<button id="search_submit" class="button_text" type="submit" name="submit"><img src="images/buttons/filterbutton.png" alt="Jetzt filtern" title="Jetzt filtern"></button>

das ist nur ein Stückchen HTML-Text.

Was für ein Filter ist das?

Ist das eine kleine JScript Anwendung?

Oder ist das mit PHP, Flash.... programmiert?

Ein bisschen mehr info wäre schön...
mfg

 

[gekkol1]

Der Filter besteht hauptsächlich aus PHP. Das "Laden der Ergebnisse" ist in einer JS-Datei geschrieben... Eine CSS-Datei ist auch noch vorhanden....

 

[Curanai]

Hallo gekkol,

der leichteste Weg: Du bindest Dir Deine Grafik ins DOM - per CSS steht diese auf "hidden" bzw. "display:none" (je nach Umgebung und gewünschtem Verhalten). Bei Klick auf Deinen Button deaktivierst Du selbigen (damit der User nicht nochmals klickt: "disabled") und blendest den unsichtbaren DOM-Teil ein. Sobald Dein Filter fertig ist und die Antwort liefert, stellt die JavaScript-Datei den ursprünglichen Zustand wieder her.

Etwas eleganter: Du lädst die Grafik ins JS mittels "new Image" und ersetzt den Button direkt mit dieser Grafik, sobald der Filter verwendet werden soll; quasi ein "replace" - mit "rückgängig", wenn die Antwort da ist.

Achte drauf, dass die Animation (da animGIF) nicht zu groß ist (das Netz ist voll mit den Loadern und Du kannst sehr viele davon problemfrei verwenden). Eigene Sachen sind natürlich auch toll, aber zwecks "Test" dürfte anfänglich eines der Fremden gehen.

Viel Erfolg.

 

[gekkol1]

Überlege gerade, ob der einfachste Weg eine Art Refresh der Ergebnisse ist, wenn man auf den Button klickt. Könnte man dafür einen Code einfach in die PHP-Datei einfügen?

 

[Curanai]

Du musst zwingend unterscheiden, in welcher Reihenfolge was ausgeführt wird. Ignorieren wir jetzt mal sämtliche Status-Codes und Abläufe nach Abschicken einer URL im Browser (zwecks Seitenaufruf), so gilt ...

PHP (serverseitige Scriptsprache) ...
HTML und CSS (Rendering; hier ist das, was PHP u. U. vorbereitet hat, nun enthalten)
JavaScript (clientseitige Scriptsprache)

Wenn Du also einen Refresh machst bzw. in Erwägung ziehst, hast Du zwei Möglichkeiten:
A. komplette Seite neu laden
B. anteilig via AJAX neu laden bzw. aktualisieren

Während Du bei A eigentlich nur einen Link auf die eigene Seite zeigen lassen musst, wirst Du bei B mit allen drei Komponenten zu tun bekommen. Vom Usability-Standort aus betrachtet (für mein Empfinden), ist B die bessere Wahl, da kein User ein "Flickern" im Browser mag - und je nach Länge der Abfrage, Datenmenge (Auslieferung an Browser) und Leitungsgeschwindigkeit (manchmal sogar noch CPU) bleibt der Bildschirm auch weiß. Aus Performance-Gründen reicht erst recht B, da bspw. viele denkbare Flaschenhälse gar nicht angefasst werden (das wäre jetzt ein großer Ausflug in die Welt von Requests, Scripting, "not modified"-Codes etc.). Dein einer AJAX-Request wäre also - kurz ausgedrückt - sogar noch pfeilschnell(er).

Soooo ... und nun musst Du zwei Dinge eigentlich unterscheiden - ich unterstelle Dir, dass Du AJAX als Freund hierfür in Erwägung ziehst: Du hast multiple Datenrückgaben - also nicht nur reinen Content, sondern eben noch "ein Feld mehr"; in diesem Falle für einen Status bspw. Zwar geht eine multiple Übergabe (hierfür nutzt man Formate - aka fettfreies XML - wie JSON), allerdings benötigst Du das gar nicht, da der AJAX-Request bei Erfolg bereits den von Dir gewünschten Status inne hat.

Die von Dir selbst angesprochene Alternative - Button macht Refresh - müsste dann in Deinen PHP-Code eingebunden werden, wenn der "restliche Teil" auch derart dynamisch (bei Erstellung) vom Server kommt. Ist es statisch präsent, kannst es auch dort statisch anregen bzw. ändern ...

Viel Erfolg.