f-thies.de

Verfasst: **Sa 19 Mär, 2011 3:13 pm**

ch möchte in einem Tool das jQuery Progress Bar-Plugin von http://t.wits.sg/jquery-progress-bar/ nutzen. Im head des HTML-Code steht folgendes

Code: Alles auswählen

<script type="text/javascript" src="js/jquery.progressbar.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
	$("#pb1").progressBar({ max: 220, textFormat: 'fraction'});
});
/*]]>*/
</script>

Die ProgressBar soll also von 0 bis 220 (zu verarbeitende Datensätze) hochzählen. Bevor das PHP-Tool loslegt, schreibt es in den HTML-Code die Zeile:

Code: Alles auswählen

<p class="center"><strong>Status: </strong> <span class="progressBar" id="pb1">0</span></p>

Nun will ich jedesmal, wenn das php-Script einen der 220 zu verarbeitenden Datensätze abgearbeitet hat, dass das JS-Script die ProgressBar um eins erhöht.

Weiss jemand, wie ich das umsetzen muss, damit das jquery-Plugin das "merkt"?

Code: Alles auswählen

echo '<script type="text/javascript">$(\'#pb1\').progressBar(' . $zahl . ');</script>';
flush();

hat nicht geklappt.

Code: Alles auswählen

echo '<script type="text/javascript">$(document).ready(function() { $(\'#pb1\').progressBar(' . $do_percent . '); });</script>'

geht zwar, aber document.ready wird erst ausgeführt nachdem das gesamte DOM geladen ist.

Bin mit meinem Latein am Ende

Jemand mit guten Ideen? Danke im Voraus.

Frank-Andre

Verfasst: **So 20 Mär, 2011 11:41 am**

Fehler gefunden

Durch den Einbau des sleep-Befehls konnte ich sehen, dass der Code

Code: Alles auswählen

echo '<script type="text/javascript">$(\'#pb1\').progressBar(' . $zahl . ');</script>';
flush();

doch ging, aber am Ende wurde alles auf 0 gesetzt. Dadurch sah das so aus, als wenn der Code kein Erfolg hätte. Wenn ich aber beim Aufruf des JS im head-Bereich die Zeile

Code: Alles auswählen

$("#pb1").progressBar();

ersetze mit

Code: Alles auswählen

$("#pb1").progressBar(100);

wird am Ende die Bar nicht wieder auf 0 zurückgesetzt. Stundenlanges Rätseln und probieren hat dann doch geklappt

Wer das ganze mal live sehen will, kann sich folgende Testseite anschauen: http://www.f-thies.de/tests/jquery_progressbar.php

CU

Frank-Andre
Webmaster | Admin

Verfasst: **Do 07 Apr, 2011 3:06 pm**

Thies hat geschrieben:Fehler gefunden

Den schon.
Aber dir ist ein neuer unterlaufen.

Fällt er dir auf?

Thies hat geschrieben:Wer das ganze mal live sehen will, kann sich folgende Testseite anschauen: http://localhost/pvcms/admin/jquery_progressbar.php

Verfasst: **Do 07 Apr, 2011 5:04 pm**

Up,s habe den Link geändert

http://www.f-thies.de/tests/jquery_progressbar.php

f-thies.de

Problem mit jQuery Progress Bar

Problem mit jQuery Progress Bar