[AJAX] DIV aktualisieren mit Ladebalken

  • [AJAX] DIV aktualisieren mit Ladebalken

    Also ich möchte mit Ajax nur ein Div aktuallisieren oder besser

    Ich hab ne vari $x in der steht 1 - 100 damit möchte ich eine Fortschrittsanzeige verwirklichen.
    Die Bar also der div tag soll aktuallisiert werden so da die Bar bei 1% Länge anfängt & bei 100% endet!
    Hoffe iher wist was ich meine.

    Sorry das ich nicht zu ordentlich schreiben konnte aber sitze im Internetcafe weil unser Anschluss für längere Zeit gesperrt sein wird!^^

    Danke :D

  • Und den Prozentsatz des Ladebalkens, der sich regelmäßig ändert willst du aus einer Datenbank auslesen?

    Die Frage ist: Brauchst du dazu wirklich AJAX (zum live Fremddaten nachladen) oder willst du nur eine JavaScript Animation erstellen?

    Also die Animation brauchst du ja sowieso, deswegen fange ich einfach mal damit an.
    Hier gibts einen schön aussehenden: Demo

    Quellcode

    1. ob = document.getElementById("ladebalken").firstChild;
    2. function progress(value)
    3. {
    4. if(value < 51)
    5. ob.style.background = 'rgb(255, ' +
    6. Math.floor(value / 50 * 255) + ', 0)';
    7. else
    8. ob.style.background = 'rgb(' +
    9. Math.floor(255 - ((value - 50) / 50 * 255)) +
    10. ', 255, 0)';
    12. ob.firstChild.firstChild.nodeValue =
    13. ob.style.width = value + "%";
    14. }
    Alles anzeigen
    Bilder

    • ladebalken.png

      2,01 kB, 177×70, 1.843 mal angesehen

  • dann wird folgendes HowTos sicherlich von Interesse für dich sein:
    [coderwiki]HowTos/Ajax-Bild-bei-Aenderung-nachladen[/coderwiki]

    Dann musst du statt der "filemtime" eben den Zeitstempel der letzten Änderung übergeben.

    Einen flüssigen Ladebalken wirst du allerdings nicht hinbekommen, da du nur einen AJAX Request pro Sekunde starten solltest.

  • Hm thx schonmal.

    Problem ist das die Sache mit der status.php usw ja weg kann. Ich muss ja nur ein <div> aktuallisiert haben. Alle paar Sekunden.
    Und irgendwie bekomme ich das nicht so hin das es so passoert...

    Ähm ja wäre halt nett wenn der Code so wäre das halt nur der <div mit der ID live aktuallisiert wird, oder so...

    Ich hab leider grade voll keinen Plan^^...

  • so viel macht die status php ja auch nicht und doch - du brauchst sie.

    Quellcode

    1. <?php
    2. //$row muss aus der Datenbank gelesen werden
    3. $row['aktualisiert'] = 1167922846; //Wann wurde dar Ladebalken zuletzt aktualisiert
    4. $row['prozent'] = 14;
    6. header("Last-Modified: ".gmdate("D, d M Y H:i:s", $last_update)." GMT");
    7. header("Cache-Control: no-store, no-cache, must-revalidate");
    8. header("Cache-Control: post-check=0, pre-check=0", false);
    9. header("Pragma: no-cache");
    11. echo $row['aktualisiert']. '||'. $row['prozent'];
    12. ?>
    Alles anzeigen


    In deinem JavaScript Code brauchst du dann nicht die Zahl zu schreiben (#22-#28) sondern musst die countUp Methode vom gespeicherten Wert bis zum ausgelesenen Wert aufrufen

    Quellcode

    1. countUpP = 0; // die muss global sein
    3. function countUp(new) {
    4. if(countUpP == new) return;
    5. progress(countUpP);
    6. window.setTimeout("countUp(new)", 100);
    7. countUpP++;
    8. }