JavaScript Ladeanzeige solange Seite geladen wird (nach Button-Klick)

[RemoteC]

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

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

 

[she3p]

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?

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

 

[RemoteC]

Danke für die Idee, manchmal ist man wirklich betriebsblind ^^

Habs jetzt so gemacht:

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

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.

 

[she3p]

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

[att] - Represents an element with the att attribute, whatever the value of the attribute.

Ein funktionierendes Beispiel hier:

Spoiler: foo

<!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 )

 

[RemoteC]

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.