Hackerboard Wiki HaboBlog
Hackerboard bei Facebook Hackerboard bei Google+ Hackerboard bei Twitter

[HaBo]

 
(Web-) Design und webbasierte Sprachen Tipps & Tricks, Designabgleich, HTML & Javascript, Flash, ASP, PHP, Perl/CGI...

Ladeanzeige solange Seite geladen wird (nach Button-Klick)

Diskussion: Ladeanzeige solange Seite geladen wird (nach Button-Klick) im Forum (Web-) Design und webbasierte Sprachen, in der Kategorie Web, Network & Multimedia Palace; Anzeige Hallo! Ich habe gerade das Problem, dass das Absenden eines Formulars manchmal länger als eine Sekunde dauert (im Hintergrund ...
Antwort
Themen-Optionen Ansicht
   
Alt 08.04.11, 00:21   #1 (permalink)
 
Registriert seit: 11.07.05
RemoteC Leistung: Facit NTK
RemoteC eine Nachricht über ICQ schicken
Likes: 0
Standard Ladeanzeige solange Seite geladen wird (nach Button-Klick)
Anzeige

Hallo!

Ich habe gerade das Problem, dass das Absenden eines Formulars manchmal länger als eine Sekunde dauert (im Hintergrund muss der Server E-Mail erstellen, PDF erstellen, DB-Abfragen machen). Ein geschulter User sieht zwar dass der Browser 'arbeitet', also das Symbol für "Seite wird geladen" erscheint aber ein ungeduldiger User könnte dazu verleitet werden einfach irgendwo hinzuklicken und damit vielleicht einen Fehler auslösen.

Nun dachte ich mir könnte ich mit einem onClick-Event das ganze in den Griff kriegen, leider habe ich es bis jetzt nur zusammen gebracht den Button "inactive" zu machen

Code:
document.getElementById(\'checkout_next_button\').disabled=true;
Ich würde aber jetzt gerne, solange die Seite geladen wird, eine Art Popup mit ner typischen Ladegrafik (Kreis, Balken, ...) anzeigen lassen. Grundsätzlich ein xyz.innerHTML zu machen wäre nicht das Problem aber das ganze soll nur ausgeführt werden solange die Seite geladen wird.

Leider habe ich auf den body-tag keinen Zugriff da diese Seite included wird, außerdem soll ja nicht beim initialem Laden das JS ausgeführt werden sondern nur wenn man auf den Button gedrückt hat und dann die Seite geladen wird.

Ich hoffe mein kleiner Roman ist genug Information ^^

lg
RemoteC ist offline   Mit Zitat antworten
Alt 08.04.11, 08:48   #2 (permalink)
 
Benutzerbild von she3p
 
Registriert seit: 07.05.07
she3p Leistung: 8086
Likes: 19
Standard
Zitat:
Zitat von RemoteC Beitrag anzeigen
Nun dachte ich mir könnte ich mit einem onClick-Event das ganze in den Griff kriegen, leider habe ich es bis jetzt nur zusammen gebracht den Button "inactive" zu machen
Find ich grundsätzlich eine gute Idee, warum denn nicht weiterführen?

Zitat:
Zitat von RemoteC Beitrag anzeigen
Code:
document.getElementById(\'checkout_next_button\').disabled=true;
Ich würde aber jetzt gerne, solange die Seite geladen wird, eine Art Popup mit ner typischen Ladegrafik (Kreis, Balken, ...) anzeigen lassen. Grundsätzlich ein xyz.innerHTML zu machen wäre nicht das Problem aber das ganze soll nur ausgeführt werden solange die Seite geladen wird.
Das würde den User dann doch eher verwirren, nicht?

Wie wärs denn damit: Statt den Button nur zu deaktivieren, gib ihm doch einfach noch einen padding-left und füge ein "Lade-GIF" in den Hintergrund des Buttons.

* Ajaxload - Ajax loading gif generator
she3p ist offline   Mit Zitat antworten
   
HaBOT
 
- Anzeige -

Werbung ist gerade online    
Alt 09.04.11, 10:36   #3 (permalink)
Themenstarter
 
Registriert seit: 11.07.05
RemoteC Leistung: Facit NTK
RemoteC eine Nachricht über ICQ schicken
Likes: 0
Standard
Danke für die Idee, manchmal ist man wirklich betriebsblind ^^

Habs jetzt so gemacht:
Code:
input[disabled="disabled"]#checkout_next_button,
input:disabled#checkout_next_button{
background-image:url('images/load1.gif');
background-repeat:no-repeat;
background-position:center;
color:transparent;
cursor:wait;
}
Wobei das lustige ist: Das ganze funktioniert entweder im IE (8 ) oder im FF (4).

wenn ich nur input:disabled... mache --> FF
wenn ich nur input[disabled="disabled"]... mache --> IE (wobei ein einfachs [disabled] nicht reicht, muss mit dem "=" sein) ... und je nachdem ob ich im CSS zuerst : oder [] mache funktioniert das ganze im IE oder FF

Edit: So funktioniert das ganze jetzt im Firefox und IE8
Code:
input:disabled#checkout_next_button{ /* if image changes think of IE8-Hack! - This is for modern browsers  */
background-image:url('images/load1.gif');
background-repeat:no-repeat;
background-position:center;
color:transparent;
cursor:wait;
}

input:disabled#checkout_next_button:hover{
color:transparent;
background-color:#FFF;
}

input[disabled="disabled"]#checkout_next_button, /* Hack for IE8 */
input[disabled="disabled"]#checkout_next_button:hover{
background-image/*\**/:url('images/load1.gif');
background-repeat/*\**/:no-repeat;
background-position/*\**/:center;
color/*\**/:transparent;
cursor/*\**/:wait;
background-color/*\**/:#FFF;
}
Auf noch älteren Versionen habe ich das ganze nicht getestet ... und dass der IE "color:transparent;" anders interpretiert (nämlich indem er die Schrift 'ausgraut') ist halt so, in meinem Fall stört das nicht so extrem.
Geändert von RemoteC (09.04.11 um 10:54 Uhr)
RemoteC ist offline   Mit Zitat antworten
Alt 09.04.11, 11:04   #4 (permalink)
 
Benutzerbild von she3p
 
Registriert seit: 07.05.07
she3p Leistung: 8086
Likes: 19
Standard
Also gemäss w3 ist :disabled eine CSS3 Pseudoklasse. Die würd ich je nach Anforderung noch nicht verwenden. Gemäss dieser Spezifikation würd ich nur Selektoren verwenden, die bereits in CSS2 eingeführt wurden. Der da wäre

Zitat:
[att] - Represents an element with the att attribute, whatever the value of the attribute.
Ein funktionierendes Beispiel hier:

foo   
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Habotests</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script>
    $(document).ready(function()
    {
        $('#myform').submit(function()
        {
            $(this).find('input[type="submit"]').attr('disabled', 'disabled');
            
            return false;
        });
    });
    </script>
    
    <style>
    input[disabled] {
        background-color:red;
    }
    </style>
    
    </head>
<body>

<form id="myform">
    <input type="text" name="foo" />
    <input type="submit" value="send" />
</form>

</body>
</html>


Edit: Ich vergass zu erwähnen - FF 3.6.16 (also ungetestet mit FF4 / IE8 sry )
she3p ist offline   Mit Zitat antworten
Alt 09.04.11, 11:35   #5 (permalink)
Themenstarter
 
Registriert seit: 11.07.05
RemoteC Leistung: Facit NTK
RemoteC eine Nachricht über ICQ schicken
Likes: 0
Standard
Frag mich nicht was es damit auf sich hat ...

Nur [disabled] nimmt der FF (und vermutlich jeder normale Browser da das Standard ist), aber im IE tut sich nichts, der macht erst etwas wenn [disabled="disabled"] steht, dann steigt aber der FF aus ... nachdem alle Browser (bis auf IE ) CSS3 können sollte die Pseudoklasse kein Problem darstellen.
RemoteC ist offline   Mit Zitat antworten
Antwort
   
- Anzeige -

Werbung ist gerade online    

[HaBo] » Web, Network & Multimedia Palace » (Web-) Design und webbasierte Sprachen » JavaScript Ladeanzeige solange Seite geladen wird (nach Button-Klick)
« Vorheriges Thema | Nächstes Thema »
Themen-Optionen
Ansicht
Linear-Darstellung Linear-Darstellung

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks sind aus
Pingbacks sind aus
Refbacks sind aus

Alle Zeitangaben in WEZ +2. Es ist jetzt 22:20 Uhr.
vBulletin® v3.8.7, Copyright ©2000-2012, vBulletin Solutions, Inc.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61