kostenloser Webspace werbefrei: lima-city

Ladebalkenproblem (Javascript / Ajax)

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   dikay

   dikay hat kostenlosen Webspace.

   18:31, 18.6.2009

   Hallo liebe Limaianer,
   Wiedereinmal habe ich ein wenig herumprobiert und habe nun einen Ladebalken der sich farbig von 1-100% füllt.
   So nun möchte ich per Ajax Request etwas abfragen, das ist aber nur nebensächlich.
   Als nächste soll der Ladebalken sich füllen wenn der Ajax Request im Gange ist.
   
   Ich habe dazu folgenden Quellcode:
   

   <h2 onclick="interpretRequest();">Fortschritt</h2>
   <div id="ladebalken"><p><span>0%</span></div>
   <script type="text/javascript">
   <!--
   Ladebalkeno = document.getElementById("ladebalken").firstChild;
   function progress(value)
   {
   	if(value < 51)
   		Ladebalkeno.style.background = 'r'+'gb(255, ' + Math.floor(value / 50 * 255) + ', 0)';
   	else
   		Ladebalkeno.style.background = 'r'+'gb(' + Math.floor(255 - ((value - 50) / 50 * 255)) + ', 255, 0)';
   		
   	Ladebalkeno.firstChild.firstChild.nodeValue = Ladebalkeno.style.width = value + "%";
   }
   
   	countUpP = 0;
   	function countUp(end)
   	{
   		if(countUpP = end) return;
                   if(countUpP < end){progress(++countUpP);}elseif(countUpP > end){progress(--countUpP);}
                   window.setTimeout("countUp(",end,")", 1000);
   	}
   	
   
   function setRequest() {
   	if (window.XMLHttpRequest) {
   		request = new XMLHttpRequest();
   	} else if (window.ActiveXObject) {
   		try {
   			request = new ActiveXObject('Msxml2.XMLHTTP');
   		} catch (e) {
   			try {
   				request = new ActiveXObject('Microsoft.XMLHTTP');
   			} catch (e) {}
   		}
   	}
   	if (!request) {
   		alert("Kann keine XMLHTTP-Instanz erzeugen");
   		return false;
   	} else {
   		request.open('get', 'bot.php', true);
   		request.send(null);
   		request.onreadystatechange = interpretRequest;
                   interpretRequest();
   	}
   }
   
   function interpretRequest() { if(request.readyState==1){countUp(25);}else if(request.readyState==2){countUp(50);}else if(request.readyState==3){countUp(75)}else if(request.readyState==4){countUp(100);}
   	}
   // -->
   </script>

   
   
   So nun zu meinem Problem, er macht nicht das was er soll nämlich beim drücken von Fortschritt den Balken füllen.
   Ich bin mir sicher das der Ajax Request in sich funktioniert nur mit dem Javascript bin ich mir da nicht sicher.
   
   // beantwortet --> "+end+" // Leider geht es immer noch nicht.
   Es geht schon los wenn ich beim 2. den Balken füllen lassen will und zwar hier:
   

   window.setTimeout("countUp("+end+")", 1000);

   
   
   Wie kann ich denn da jetzt das was oben bereits als Parameter in die Funktion eingegeben wurde wieder unten einfügen bei diesem Timeout??
   
   Das wäre derzeit mein Problem ob das die Ursache ist das der Ladebalken gar nicht funktionert weiß ich nicht.
   
   Ich hoffe ihr könnt mir helfen!! <.>
   
   Edit: Linkhinzufügung mit derzeitigem Ergebnis : http://dikay.lima-city.de/ajax/test.html
   
   Beitrag zuletzt geändert: 19.6.2009 10:15:30 von dikay

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. nikic

   

   nikic hat kostenlosen Webspace.

   19:26, 18.6.2009

   1. Bei deinem hochgeladenen File bekomme ich einen Fehler, dass request nicht existiert. Ist auch so.
   2. window.setTimeout("countUp(",end,")", 1000);
   Ich kenne keine Timeout-Fuktion, die vier Parameter akzeptiert (ich kann mich irren...). Villeicht meinst du:
   window.setTimeout("countUp("+end+")", 1000);
   
   Ansonsten: Fehlerkonsole...
4. Autor dieses Themas

   dikay

   dikay hat kostenlosen Webspace.

   9:58, 19.6.2009

   nikic schrieb: 1. Bei deinem hochgeladenen File bekomme ich einen Fehler, dass request nicht existiert. Ist auch so.
   2. window.setTimeout("countUp(",end,")", 1000);
   Ich kenne keine Timeout-Fuktion, die vier Parameter akzeptiert (ich kann mich irren...). Villeicht meinst du:
   window.setTimeout("countUp("+end+")", 1000);
   
   Ansonsten: Fehlerkonsole...

   
   
   1. Also wie hast du denn überprüft das das Hochgeladene File, bzw. der Request nicht funktioniert?
   
   2. Ja ich glaube das müsste so funktionieren, ich war mir mit den ",end," nicht sicher deswegen fragte ich ja...
   
   Im Endeffekt geht es aber leider trotzdem noch nicht.
   Mich würde mal interessieren was du mit dem Request gemeint hast...
   

5. e********l

   11:21, 19.6.2009

   Mal davon abgesehen, dass der Ladebalken nicht repräsentativ ist, würde ich solch einen Ladebalken schlicht und ergreifend über eine Grafik lösen die entsprechend angezeigt wird. Bei 10% des Ladevorganges werden nur 10% der Grafik angezeigt und bei 80% entsprechend 80%. Sehr simpel.
   
   Wie fragst du überhaupt ab, wie weit die Datei hochgeladen wurde, denn bei kleinen Dateien <10 MiB wird man je nach Anbindung nicht viel vom Upload Prozess mitbekommen.
6. Autor dieses Themas

   dikay

   dikay hat kostenlosen Webspace.

   23:01, 19.6.2009

   also... das der Ladebalken, so wie er jetzt eingebaut ist wenig sinn macht ist mir klar, da nur 25% und 100% angezeigt werden (Ist ja logischer weise bei AJAX so)
   
   Und mit der Grafik wäre genau das selbe da ich auch in meinem Script einfach ein Bereich nehme und so wie du gesagt hast halt bei 1% 1% des Balkens etc. Der Balken soll aber später über den Timeout gesteuert werden, --> d.h. wie schnell er befüllt wird.
   
   Der Balken sollte halt erstmal nur funktionieren...
   
   ^^

7. e********l

   9:25, 22.6.2009

   Aber wenn du den Balken über den Timeout steuerst ist das doch noch immer nicht repräsentativ. Ich mein, wenn du die Möglichkeit hast die APC (Active PHP Cache) Extension zu nutzen wäre es alles kein Problem. Aber solange man selbige nicht hat sind nur CGI, Applets oder durchgehende Animationen die einen Vorgang beschreiben nützlich. Zb. könntest du beim Starten des Uploads die Grafik mit der Animation anzeigen und sobald der Request abgeschlossen ist wieder ausblenden. So hab ich das bei vielen Projekten gemacht in denen einfach ein Request abgeschickt oder eine kleine Datei hochgeladen wird.
   
   Die Sache mit der Grafik kam mir von einem anderen Projekt in dem Sinn, bei dem die Ladezeiten fast immer jenseits der 5-10 Sekunden liegt. Da werden halt viele Daten verarbeitet und ich lass das Script nach jedem Schleifendurchgang einen JS Block schicken damit der Ladebalken aktualisiert wird.
8. Autor dieses Themas

   dikay

   dikay hat kostenlosen Webspace.

   15:19, 22.6.2009

   Der Ladebalken hat aber einen anderen Sinn, er soll nur z.B. einen Prozentsatz von etwas virtuellem darstellen oder einen bestimmten Countdown verdeutlichen... :D

9. e********l

   16:22, 22.6.2009

   Bei einem Countdown brauchst du lediglich ein Javascript Date und die Differenzzeit als Menge ;)

10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?