10

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 submitName attribute come from & what's its purpose?
Improve this question

4 Answers 4

Reset to default
16

a bug in IE (surely not!?!)

Hard to believe, I know, but there we are.

Historically(*), setting the name attribute has many problems in IE. It tends to only partially hold. For example on form field names, it doesn't affect the form.elements[name] lookup like it should. This appears to be another case where setting the name property is unreliable.

Whilst jQuery attempts to work around browser bugs like this, it doesn't catch everything, and there is no known way to solve it fully.

(*: in IE up to 7. If you run IE8 in native documentMode by using a standards mode doctype and if necessary an X-UA-Compatible header/meta, both these errors don't crop up.)

The submitName appearing in the dev tools is an interesting glimpse behind the scenes of an IE bug, since it doesn't appear in the publically-visible DOM at all. It does the same thing if you look at an <input> element or <form> whose name attribute has been written after creation, too.

So what appears to be happening is that IE-up-to-7 redirects all use of attributes called name to an otherwise-invisible property, internally called submitName, that for form fields changes the data the field will generate as part of a form submission, but which doesn't change the real name attribute used for HTMLCollection indexing, radio-grouping, getElementsByName, or, in the case of [i]frames, targeting.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks for the background, I think this is as definitive an answer as I'm going to get, baring any ex-IE developers posting (although I can't imagine them admitting to the fact :P), so I'm accepting it. Nice to know that at least the bug indeed goes away in IE8 if you have the right doctype in place.
getElementsByName, radio-grouping and so on seem to be working even though the name attributes remain the same and only the submitName "attributes" change -- have you experienced any problems with the things you mentioned? I tested this in ie7 compatibility mode in ie8, and everything seemed to work.
Some more info: thunderguy.com/semicolon/2005/05/23/…
To add to the confusion, in IE getElementById('foo') also fetches element that has name="bar "submitName="foo" sigh X-(
4

creating the element like this

$("<iframe name='frameName' />")

solved the problem for me

Improve this answer

Comments

2

It is not just a jQuery problem, when setting manualy, it happens too.

If using the setAttribute() method to set it, even whithout jQuery, it does the same when the form or iframe has just been created! The same way, using the innerHTML you can fix it ... yes, once again, it is the Microsoft destroying my day :/

Improve this answer

Comments

0

Have you seen the markup creation improvements in jQuery 1.4?

If you find that nasty, try this:

$('<iframe />',
{
   name: frameName,
   src: 'about:blank'
}).appendTo("body");
Improve this answer

4 Comments

Makes no difference: setting name from the new {attrs} object fails in the same way as setting it using attr().
Shame, still, the markup improvements deserve to be shown. +1 bobince
Yeah I have seen the new syntax (stuck with 1.3.2 for this project), but that doesn't actually answer my question... The issue still exists using the new syntax and 1.4 anyway (I believe what you wrote is effectively equivalent to my original .attr("name", frameName)).
Agreed, it was in response to your "solved the issue by changing the iframe creation code to the slightly nastier".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.