I'm doing an ajax style file upload by posting the file in a form to an iframe and noticed some weird behaviour in IE (seems to happen in both 6 & 8). Basically in IE the form doesn't target the iframe properly so the response appears in a new window (instead of in the iframe). You can reproduce the problem with the following minimal set of HTML/JS:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.3.2.js"></script>
<script>
$(document).ready(function(){
var frameName = "myFrame";
var $iframe = $("<iframe src=\"about:blank\" />")
.attr("name", frameName)
.appendTo("body");
var $uploadForm = $("<form action=\"http://www.google.com/search\" />")
.attr("target", frameName)
.append("<input type=\"text\" name=\"q\" />")
.append("<input type=\"submit\" />")
.appendTo("body");
});
</script>
</head>
<body>
</body>
</html>
Now (before you post an answer), I did some investigation (using IE8's developer tools) and it appears that the .attr("name", frameName) is actually adding the attribute as submitName="myFrame" instead of simply name="myFrame". Based on this, I solved the issue by changing the iframe creation code to the slightly nastier:
var $iframe = $("<iframe src=\"about:blank\" name=\"" + frameName + "\" />")
.appendTo("body");
Making this change makes the form post into the iframe as desired.
My questions are:
- Why doesn't
.attr("name", ...)work as expected? - Is it a bug in jQuery, a bug in IE (surely not!?!), or am I missing something obvious?
- Where does the
submitNameattribute come from & what's its purpose?