Bei Submit DIV einblenden mit GIF-Grafik - aber Grafik läuft nicht - HTML, AJAX & Co

Bei Submit DIV einblenden mit GIF-Grafik - aber Grafik läuft nicht

Beginner

Tuesday, March 18th 2008, 11:54am

Bei Submit DIV einblenden mit GIF-Grafik - aber Grafik läuft nicht

Hallo erstmal!

Ich grüble jetzt schon etwas länger über einem Problem, vielleicht könnt ihr mir da helfen. Ich möchte in einem Formular einen Upload integrieren, das funktioniert auch alles problemlos. Nun kann der Upload von Bildern übers Netz ja doch etwas länger dauern und darum wollte ich einen Fortschrittsbalken einfügen. Ich dachte mir also Folgendes: Beim Abschicken des Formulars wird der Bereich mit dem Button ausgeblendet und ein anderer Div mit einer Fortschritts-Gif-Grafik wird eingeblendet. Das Ganze sieht dann so aus:

Im Head:

Source code

<script type="text/javascript">
			
	function showWaitMessage() {
		
        	document.getElementById("submitDiv").style.display = "none";
		document.getElementById("waitingDiv").style.display = "block";
		document.getElementById("progressBar").innerHTML = "<img alt='Bitte warten...' src='indicator_verybig.gif' />";
			
	}//fu
		
</script>

Im Formular:

	Source code
1	<form [...] onsubmit="showWaitMessage();">

Source code

<fieldset>
	<div class="field-block" style="margin-top:30px">
		<div id="submitDiv">
			<label for="submit">Alles in Ordnung? Dann k&ouml;nnen Sie die Bestellung jetzt abschicken!</label>
			<input id="submit" class="submit" name="submit" type="submit" value="Los geht's!" />
		</div>
								
		<div id="waitingDiv" style="display:none">
			<div id="progressBar"><img alt="Bitte warten..." src="indicator_verybig.gif" /></div>
			<p>Bitte warten, der Sendevorgang l&auml;ft&hellip;</p>
		</div>
	</div>								
</fieldset>

Wenn man das Formular abschickt wird, werden Text und Grafik zwar sichtbar. Aber komischerweise "läuft" die Gif-Animation nur in Firefox, jedoch nicht in Safari oder IE (Nachtrag: Da war ich wohl zu ungeduldig! IE funktioniert doch, nur Safari macht Probleme). Ich hatte deswegen auch schon versucht, das mit "innerHTML" zu lösen, aber die Animation steht weiterhin still. Woran kann das liegen? In Firefox läuft ja alles (wie so oft *g*) tadellos!

Wäre toll, wenn ihr da ein paar Tipps hättet! Danke auch schon mal!

Grüße,
Max

This post has been edited 2 times, last edit by "makrro" (Mar 18th 2008, 12:55pm)

Lemmi

Professional

Posts: 651

Tuesday, March 18th 2008, 11:57am

Bevor dir zur Hilfe eilen, sei doch bitte so nett und passe den geposteten Quelltext an, so dass er wirklich lesbar wird.

Übrigens:

	HTML Code
1	<form onsubmit="showWaitMessage();">

Das ändert sehr wahrscheinlich zwar nichts an deinem Problem, dürfte so aber "richtiger" sein.

makrro

Beginner

Posts: 2

Tuesday, March 18th 2008, 12:03pm

Öhm, wie mache ich das denn? Habe hier bisher noch nichts geschrieben. Ich glaube, jetzt stimmt's

Lemmi

Professional

Posts: 651

Tuesday, March 18th 2008, 6:26pm

Warum packst du nicht den gesamten Inhalt der Lade-Prozedur in ein DIV-Container, den du mit display: none; "unsichtbar" machst und später per JavaScript einfach über style.display = 'block' erscheinen lässt?
Eventuell macht es den genannten Browsern Probleme, animierte Bilder, die noch nicht im Quelltext enthalten sind und später hinzugefügt werde, richtig darzustellen.