Exekvera javascript i Safari efter att formulär postats

Tråden skapades och har fått 2 svar. Det senaste inlägget skrevs .
1

Jag har ett formulär för att ladda upp filer som kan vara ganska stora. För att användaren ska se att det händer något har jag en progressbar som visar hur långt uppladdningen kommit. När formuläret postats döljer jag formuläret och visar min progressbar. Sedan använder jag AJAX för att med 500 ms mellanrum fråga servern hur långt uppladdningen kommit och presentera detta med Javascript.

Allt fungerar utmärkt i IE och Firefox, men i Safari händer inget efter att formuläret postats. Kan det vara så att Safari låser sidan efter att formuläter postats? I så fall är det ju lönlöst att fortsätta felsöka... Någon som vet?

var uploadID = "";
function doUpload() 
{
	uploadID = ((new Date()).getTime() % 1000000000) + "";
	document.forms["<%# TheForm.ClientID %>"].action= "FileUpload.aspx?UploadID=" + uploadID;
	document.forms["<%# TheForm.ClientID %>"].submit();
	document.getElementById("<%# TheForm.ClientID %>").style.display = "none";
	document.getElementById("ProgressBar").style.display = "block";
	if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1)
		top.resizePopup(document.documentElement.offsetHeight);
	else
		top.resizePopup(document.documentElement.scrollHeight);
	window.setTimeout("updateProgress()", 500);
}

function updateProgress() 
{
	Bmc.Ajax.ABCUploadProgressBar.GetProgressInfo(uploadID, updateProgressCallback, updateProgressError);
}

function updateProgressError(error) 
{
	alert(error.get_message());
}
function updateProgressCallback(result) 
{
	r = result;
	if (r.length == 8)
	{
		document.getElementById("Progress_Mins").innerHTML = r[0];
		document.getElementById("Progress_Secs").innerHTML = r[1];
		document.getElementById("Progress_Kbdone").innerHTML = r[3];
		document.getElementById("Progress_Kbtotal").innerHTML = r[4];
		document.getElementById("Progress_Kbps").innerHTML = r[2];
		document.getElementById("Progress_Note").innerHTML = r[5];
		document.getElementById("Progress_FileName").innerHTML = r[6];
		document.getElementById("Progress_Bar").style.width = r[7] + "%";
		window.setTimeout("updateProgress()", 500);
	}
	else if (r.length == 1)
	{
		document.getElementById("Progress_Note").innerHTML = r[0];
		document.getElementById("Progress_Bar").style.width = "100%";
		document.getElementById("Progress_Bar").style.backgroundImage = "url(/Images/AnimBusy.gif)";
	}
}
  • Medlem
  • Mölndal
  • 2007-12-20 13:12

Hur knyter du metodanrop till händelsen "efter att formuläret postats"? Vill gärna se lite relevant markup.

Jag inser nu att informationen var lite bristfällig...

Jag har ingen submit-knapp utan bara en vanlig knapp som kör doUpload(). I doUpload() skapar jag ett ID som jag lägger på i formulärets "action". Detta används av komponenten på servern som hanterar uppladdningen. Sedan postar jag formuläret i skriptet, döljer formuläret, visar uppladdningsstatus och "beställer" slutligen att statusen ska uppdateras om 500 ms med setTimeout("updateProgress()", 500). I Safari körs aldrig updateProgress() vilket sker i både IE och FF.

Nu har jag kommenterat koden för att det ska bli enklare att följa med.

var uploadID = "";
function doUpload() 
{
	// Skapa en tillräckligt unik ID-sträng för uppladdningen
	uploadID = ((new Date()).getTime() % 1000000000) + "";
	// Skicka med ID-strängen i querystringen när formuläret postas (uppladdningen får detta ID på servern)
	document.forms["<%# TheForm.ClientID %>"].action= "FileUpload.aspx?UploadID=" + uploadID;
	// Posta formuläret
	document.forms["<%# TheForm.ClientID %>"].submit();
	// Dölj formuläret
	document.getElementById("<%# TheForm.ClientID %>").style.display = "none";
	// Visa uppladdningsstatusen (en DIV med innehåll)
	document.getElementById("ProgressBar").style.display = "block";
	// Justera höjden på dialogrutan
	if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1)
		top.resizePopup(document.documentElement.offsetHeight);
	else
		top.resizePopup(document.documentElement.scrollHeight);
	// Kör metoden updateProgress() om 500 ms
	window.setTimeout("updateProgress()", 500);
}

function updateProgress() 
{
	// Kör AJAX-metoden GetProgressInfo, låt metoden updateProgressCallback ta hand om returvärdet, skicka eventuella fel till metoden updateProgressError
	Bmc.Ajax.ABCUploadProgressBar.GetProgressInfo(uploadID, updateProgressCallback, updateProgressError);
}

function updateProgressError(error) 
{
	// Visa felet
	alert(error.get_message());
}
function updateProgressCallback(r) 
{
	// Om svaret från AJAX-metoden (r) är en array med 8 poster
	if (r.length == 8)
	{
		// skriv ut massa strängar
		document.getElementById("Progress_Mins").innerHTML = r[0];
		document.getElementById("Progress_Secs").innerHTML = r[1];
		document.getElementById("Progress_Kbdone").innerHTML = r[3];
		document.getElementById("Progress_Kbtotal").innerHTML = r[4];
		document.getElementById("Progress_Kbps").innerHTML = r[2];
		document.getElementById("Progress_Note").innerHTML = r[5];
		document.getElementById("Progress_FileName").innerHTML = r[6];
		// Sätt bredden på själva progressbaren i procent
		document.getElementById("Progress_Bar").style.width = r[7] + "%";
		// Kör metoden updateProgress() om 500 ms igen
		window.setTimeout("updateProgress()", 500);
	}
	// om det bara finns 1 post i r är uppladdningen klar
	else if (r.length == 1)
	{
		// Skriv ut statusmeddelande (r[0] innehåller alltid strängen 'Processing image...')
		document.getElementById("Progress_Note").innerHTML = r[0];
		// Sätt bredden på statusbaren till 100%
		document.getElementById("Progress_Bar").style.width = "100%";
		// Lägg en animerad GIF som bakgrundsbild för att indikera att servern jobbar med den uppladdade bilden
		document.getElementById("Progress_Bar").style.backgroundImage = "url(/Images/AnimBusy.gif)";
	}
}
1
Bevaka tråden