Cross browser probs setting iframe source 3

[hererxnl]

I'm using ASPUpload, per our host, which has a pure html progress bar solution for uploading. The example uses window.open which is not really what I want to ask of a modern browser. FF & IE handle it but its blocked by Opera.

I've gone to a popup div with an iframe instead.

The problem:

When I set the source during the load of the page the auto refresh of the script is terribly annoying and will stop functioning while the user selects a file.

Attempted solution:
Set the src of the iframe in a javascript function then submit the upload form. This works in IE but not FF or Opera.

Here's my current javascript code:

function ShowProgress()
{
  if (document.upload.image.value != "")
  {
	document.upload.action="upload.asp?<%=PID%>&caption="+document.getElementById('caption').value
	document.getElementById('progress').style.display="block";
    document.getElementById('progressframe').src="<%=barref%>";
	document.upload.submit();
  }
}

The form is submitted and the file is uploaded, but the iframe doesn't seem to receive the src update, as none of the progress HTML is displayed.

Hopefully I've explained this in enough detail.

Thanks in advance for any help.

 

[monksnake]

Reference the form name using:

document.forms["upload"]

instead of

document.upload

IE can understand both ways, but FF can only understand the first way.

<.

 

[hererxnl]

monksnake:

Thanks for the response. I'm setting the iframe src by ID in:

document.getElementById('progressframe').src="<%=barref%>";

The form calls in the script seem to work.

 

[monksnake]

OOOOHHHHHH I'm sorry, kaht has informed me that FF DOES understand

document.upload

But it throws an error to the Javascript Console, my apologies.



<.

 

[cLFlaVA]

1) have you tried the frames reference:

top.frames['progressframe'].src = "<%=barref%>";

2) if you can, make sure the name and id are the same for your frame.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[monksnake]

I came across this, it may solve your problem, it may not, but it's worth a shot:

What isn't mentioned, and what tripped me up for a while, is that you can't set the src property directly to set the URL of the iframe content, instead you must call the setAttribute("src", newURL) method on the iframe.

<.

 

[hererxnl]

My ID may be confusing the issue or maybe I'm ignorant. This is an iframe, which I don't deal with on a regular basis, so I was treating it as a typical element and not a frame per say. Should I treat it as a traditional frame?

I'll change the ID so it's now:

document.getElementById('progressiframe').src="<%=barref%>";

 

[hererxnl]

monk, that looks promising, i'll try it out.

 

[cLFlaVA]

when i create an iframe i make sure the id and name are the same, this way, i can use both getElementById and the window.frames[] reference equally. i usually have more success with the latter, although i'm pretty sure both will work.

obviously, getElementById references the iframe's id, while the top.frames[] method utilizes the iframe's name.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[hererxnl]

It's hard to tell when uploading fiels on my intranet but monk's approach doesn't seem to do it. It could be my implementation:

document.getElementById('progressiframe').setAttribute("src", "<%=barref%>");

is that right?

cLFlaVA: I didn't know you could ref an iframe that way, I'll try that.

 

[hererxnl]

top.frames['progressiframe'].src = "<%=barref%>";

None of my browsers liked that. Should I have referenced document?

 

[cLFlaVA]

can you show your html for your iframe? thus far all you've shown is your JS.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[hererxnl]

gladly, here it is:

<div id="progress" class="progress" style="display:none;"><iframe id="progressframe" frameborder="0" height="100%" width="100%"></iframe></div>

Thanks for taking the time to check it.

 

[hererxnl]

sorry, chaged the id of the progress iframe during the course of this discussion so its:

<div id="progress" class="progress" style="display:none;"><iframe id="progressiframe" frameborder="0" height="100%" width="100%"></iframe></div>

 

[cLFlaVA]

sorry, i'm a giant ass. when doing the name reference, you need to use location:

top.frames['blah'].location='[URL unfurl="true"]http://www.google.com/'[/URL]

hopefully that helps.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

note: for the top.frames approach, as mentioned above, you will need a NAME attribute in your iframe. i don't see one in your current html.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[hererxnl]

I should mention, I've also tried setting the src of the iframe on load and setting visiblity to none, as that seems to work with some elements, but alas nothing.

 

[hererxnl]

hmm, I'm losing hope.

Still not working. Now works IE but still no FF or Opera.

Current head code:

<script language="JavaScript">
function ShowProgress()
{
  if (document.upload.image.value != "")
  {
	document.upload.action="upload.asp?<%=PID%>&caption="+document.getElementById('caption').value
	document.getElementById('progress').style.display="block";
	top.frames['progressiframe'].location = '<%=barref%>';
	document.upload.submit();
  }
}
</script>

That is in the <head> region.

Current body code:

<input name="start" type="button" value="Upload!" onClick="ShowProgress();">
</form>

<div id="progress" class="progress" style="display:none;"><iframe id="progressiframe" name="progressiframe" frameborder="0" height="100%" width="100%"></iframe></div>

I may have to resort to a generic "Uploading..." message. I hate that idea, but I hate browser hacks even more.

 

[hererxnl]

Well, can't seem to solve this one, I'll check back to see if anyone else has provided any insight. I'm awarding stars for those who tried (eventhough it tends to bury the post).

 

[kaht]

OOOOHHHHHH I'm sorry, kaht has informed me that FF DOES understand

CODE
document.upload

But it throws an error to the Javascript Console, my apologies.

It actually throws a [!]warning[/!] to the javascript console in firefox, not an [!]error[/!].

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]