Beim Laden...

[ChangedUser677]

Hallo,

ich habe mal eine Frage, wie kann ich es eig. machen, dass wenn man auf eine JS Funktion klickt, dass sobald die Funktion noch ladet, dass dort "Lade..." steht.

Also bei den meisten ist es so, dass ein Bild erscheint. Aber ich will halt nur ein Text.

 

[DarkDragon193]

Nicht genug Infos...
Seit wann klickt man auf eine JS-Funktion? Ich klicke auf HTML-Elemente. Verwendest du z.B. AJAX zum Anfordern von Websites oder lädst du Bilder aus dem Internet? Usw.
So oder so wirst du das Element auswählen müssen und den Text da rein schreiben. Wenn die Datei geladen wurde überschreibst du den Text oder sonst was. Bei Bildern benutzt du da das "onload"-Event, bei HTML-Dokumenten das "onreadystatechange"-Event.

 

[ChangedUser677]

Hallo was ich meine ist z.B. das hier: "LINK WURDE RAUSGELÖSCHT" Beim editieren, sobald man speichert schickt er es an ajax.php?... per GET. Aber falls der Server sehr larm ist, dauert es doch oder nicht? Und ich will, dass sobald man auf Speichern klickt, dass dort "Lade..." steht bis es fertig geschickt worden ist.

 

[webdesigner95]

An deiner Stelle würde ich es so machen:

<div id="laden" style="display:none; posititon:fixed; backgroundcolor:white (deine weiteren Styles)">Lade...</div>

wenn dann auf den submit button gedrückt wird, löst du eine Ajaxfunktion aus, die das zum Server läd und diesen Text da oben auf display: block; stellst.

Grüsse Webdesigner95

 

[hagbard1985]

Hallo,

sobald deine JS - function startet erstellst du entweder ein HTML - Element on the fly wo z.B als Text "Lade..." angegeben ist oder du machst es wie webdesigner95 meinte und stellst nur dein "display" - attribute auf block.
Wichtig ist aber das dann der Text bzw. das HTML - Element wieder verschwindet. Falls du jQuery oder eine ähnliches Framework verwendest wird eine callback - function ausgelöst sobald das AJAX Query fertig ist. In dieser function entfernst du dann wieder das HTML - Element bzw. stellst das display - Attribute wieder auf "none".

Gruß

 

[DarkDragon193]

Wie ich sehe verwendest du kein JS-Framework, sondern erledigst die Aufgaben manuell.
In deiner Funktion

save_edit1

öffnest du die Verbindung per GET und sendest die Anfrage. Du könntest, wie mein Vorposter schon andeutete, einen Handler verwenden, um auf die Fertigstellung deiner Anfrage zu warten. Dazu verwendest du die Eigenschaft des XMLHttpRequest-Objektes "onreadystatechange". Sollten Fragen offen stehen, google einfach nach "AJAX Tutorial". Ich persönlich würde den onclick-Handler in der Funktion entfernen und den Text ersetzen.

So würde ich deine Funktionen umschreiben:

function save_edit1( ) {
    XMLHTTP.open( "GET", "ajax.php?ucp&edit1_text=" + document.getElementById( "edit1_2" ).value, true );
    XMLHTTP.send( null );
    var btnSave = document.getElementById( "btnSave" );
    btnSave.value = "Laden ... ";
    btnSave.onclick = function( ) {};
    XMLHTTP.onreadystatechange = function( response ) {
        if( this.readyState === 4 && this.status === 200 ) {
            // Anfrage fertig. Weiter mit dem "Reset".
            change_edit1_2( );
        }
    }
}

function change_edit1( ) {
    document.getElementById( "edit1" ).innerHTML = '<textarea id="edit1_2" name="edit1_2"></textarea><br /><br /><input type="button" onclick="save_edit1( )" value="Speichern" [B]id="btnSave" />';[/B]
}

// Der Rest bleibt gleich...

Mit freundlichen Grüßen,


DarkDragon1993