Ergebnis 1 bis 11 von 11
  1. #1
    Thies ist offline Mitglied
    registriert
    13-03-2011
    Beiträge
    31

    Problem mit jQuery Progress Bar

    Ich 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

    HTML-Code:
    <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:

    HTML-Code:
    <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"?

    Danke im Voraus.

    Frank-Andre

  2. #2
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: Problem mit jQuery Progress Bar

    Wenn beim Request alle Datensätze abgearbeitet werden sollte das nicht bzw. nur mit serverseitiger Anpassung funktionieren. Wir brauchen also mehr Informationen über den Aufbau des Systems, wie welche Daten verarbeitet werden...

  3. #3
    Thies ist offline Mitglied
    registriert
    13-03-2011
    Beiträge
    31

    AW: Problem mit jQuery Progress Bar

    Sorry, ich dachte es gäbe da eine einfache Lösung und ich nur etwas übersehen hätte.

    Mein Script sieht vom Grundsatz so aus:

    Code:
    	echo '<h3>Grafik-Dateien werden verarbeitet</h3>';
    	echo '<p class="center"><strong>Status: </strong> <span class="progressBar" id="pb1">0</span></p>';
    	echo '<br /><div class="portlet-content">';
    	echo '<ul>';
    	$do_step = 1;
    	
    	foreach ($img_array as $file)
    		{
    		...
    		$do_step++;
    		}
    	echo '</ul>';
    	echo '</div>';
    Jedesmal wenn $do_step um eines erhöht wird, möchte ich gern den ProcessBar auch um eins erhöhen. Laut Demo geht das per manuellen Klick natürlich:

    HTML-Code:
    <a href="#" onclick="$('#pb1').progressBar(20);">20</a>
    Aber ich will ja per PHP ans HTML etwas übergeben, damit das automatisch angepasst wird. Also, dass jedesmal das JS wieder gepusht wird.

    Besser verständlich?
    Geändert von Thies (18-03-2011 um 14:52 Uhr)

  4. #4
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: Problem mit jQuery Progress Bar

    Okay, du müsstest das Script vor diesem Teil einbinden und dann einfach
    PHP-Code:
    echo '<script type="text/javascript>$(\'#pb1\').progressBar(' $zahl ');</script>';
    flush(); 

  5. #5
    Thies ist offline Mitglied
    registriert
    13-03-2011
    Beiträge
    31

    AW: Problem mit jQuery Progress Bar

    Danke Dir, habe es mit Deiner Hilfe hinbekommen, wobei ich aber auf eine %-Anzeige gewechselt habe:

    Code:
    $do_step 	= 0;
    $do_percent	= 0;
    	
    foreach ($img_array as $file)
    	{
    	$do_step++;
    	$do_percent_new	= round(($do_step / $do_PB_val) * 100);
    	...
    	if ( $do_percent_new > $do_percent)
    		{
    		$do_percent	= $do_percent_new;
    		echo '<script type="text/javascript">$(document).ready(function() { $(\'#pb1\').progressBar(' . $do_percent . '); });</script>' . "\n";
    		}
    	ob_flush(); flush();
    	}
    CU

    Frank-Andre

  6. #6
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: Problem mit jQuery Progress Bar

    und dass soll funktionieren? document.ready wird doch gar nicht ausgeführt bevor das gesamte DOM geladen ist?!

  7. #7
    Thies ist offline Mitglied
    registriert
    13-03-2011
    Beiträge
    31

    AW: Problem mit jQuery Progress Bar

    Ja, definitiv! Wenn ich es mit $('#pb1').progressBar(x) aufgerufen hatte, passierte gar nichts. Daraufhin hatte ich den o.g. Code genutzt und dann ging es.

    Ich kann es Dir leider derzeit nicht zeigen, da ich es in einem CMS auf localhost eingebaut habe, ich schaue mal, dass ich es als Testcode separat auf meine Website stelle. Aber sicherlich nicht mehr heute Nacht Habe jetzt mehrere Stunden gecoded und werde langsam müde.

  8. #8
    Thies ist offline Mitglied
    registriert
    13-03-2011
    Beiträge
    31

    AW: Problem mit jQuery Progress Bar

    Mist, Du hast (leider) recht behalten Junkee

    Ich habe einen sleep-Befehl in die Schleife eingebaut, damit es deutlich langsamer abläuft und dann merkt man, dass die ProgressBar erst nach Abschluß hochgefahren wird. Bisher lief das Script trotz einiger Daten so schnell, dass ich dachte, es würde gehen.

    Also habe ich doch nochmal Deinen Vorschlag genommen und jetzt geht es ... ich muss an irgendeiner Stelle einen Fehler gemacht haben beim ersten Test. Sehr komisch ....

    CU

    Frank-Andre
    Geändert von Thies (19-03-2011 um 15:26 Uhr)

  9. #9
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: Problem mit jQuery Progress Bar

    nimm einfach den document.ready teil raus aber sorge dafür, dass #pb1 existiert und jquery an dem Zeitpunkt geladen wurde.

  10. #10
    Thies ist offline Mitglied
    registriert
    13-03-2011
    Beiträge
    31

    AW: Problem mit jQuery Progress Bar

    Danke Dir. Es hat inzwischen geklappt. Durch den Einbau des sleep-Befehls konnte ich sehen, dass Dein Code doch ging, aber am Ende wurde alles auf 0 gesetzt. Dadurch sah das so aus, als wenn Dein Code kein Erfolg hätte.

    Ich habe beim Aufruf des JS im head-Bereich die Zeile

    Code:
    $("#pb1").progressBar();
    ersetzt mit

    Code:
    $("#pb1").progressBar(100);
    und nun wird am Ende die Bar nicht wieder auf 0 zurückgesetzt. Stundenlanges Rätseln und probieren hat dann doch geklappt

  11. #11
    Thies ist offline Mitglied
    registriert
    13-03-2011
    Beiträge
    31

    AW: Problem mit jQuery Progress Bar

    Ich habe das Testscript mal etwas "aufgehübscht" und bei mir online gestellt: http://www.f-thies.de/tests/jquery_progressbar.php

    Vielleicht interessiert das ja auch mal Dritte

Ähnliche Themen

  1. perl/php upload progress bar
    Von badenixe63 im Forum Serverseitige Programmierung
    Antworten: 13
    Letzter Beitrag: 22-03-2008, 20:00
  2. upload progress bar
    Von badenixe63 im Forum Serverseitige Programmierung
    Antworten: 2
    Letzter Beitrag: 05-01-2008, 21:10
  3. Antworten: 9
    Letzter Beitrag: 26-06-2007, 03:26
  4. Antworten: 0
    Letzter Beitrag: 25-12-2006, 17:58
  5. Zeitverzögert Text anzeigen (oder progress bar)
    Von texta im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 22-02-2005, 11:40

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •