jquery name attribute of map element in IE

Question

The following jQuery works fine in Firefox for me, but failed in IE6:

$("<map></map>").attr("name",somevar).appendTo("#someElement");

The problem is that the map element never gets the name attribute generated which I can prove by calling alert($("#someElement").html()); and the fact that the image it is associated with doesn't have its links

If I use this instead, it works fine:

$("<map name='" + somevar + "'></map>").appendTo("#someElement");

I'm happy to use the second line of code, but was wondering if anyone else has had this problem...or an explanation of why it didn't work (i'm wondering that it is specific to the name attribute)...

(HTML output from first and second scenario):

IE6 using the first line:

<MAP><AREA shape=RECT coords=0,0,300,110 href="http://google.com"></MAP><IMG height=215 src="include/nav-images/main.png" width=591 useMap=#tehmap>

IE6 using the second line:

<MAP name=tehmap><AREA shape=RECT coords=0,0,300,110 href="http://google.com"></MAP><IMG height=215 src="include/nav-images/main.png" width=591 useMap=#tehmap>

I think your analysis is both thorough and provocative, which begs the question: why is someone so clearly deep in thought and reason naming a non form element attribute "name". Name is the most useless attribute name you could possibly set in that: a) it refers to too much, elements are elements and their names are declared as tags. b). name is a special characteristic of form elements used for form submission. c) id is the perfect substitute for what you are trying to do unless name is not unique, in which case it's not a very good name for the attribute anyway. +1 for a good bug find. — Gabriel
– Gabriel, Commented Sep 30, 2010 at 2:19

Community · Accepted Answer · 2017-05-23 12:04:09Z

5

(This is more comment material, but as it's so long I have no choice but to post it as an answer. Hopefully it might point someone in the right direction.)

Some results from investigations, using IE 8 operating in IE 7 mode (which also exhibits this problem):

$('<map />').attr('x', 'abc').wrap('<div />').parent().html()
"<MAP x="abc"></MAP>"

...it can correctly set any other element of a map tag. But wait...

>>$('<map />').attr('name', 'abc').attr('name')
"abc"

So it is getting set. But for some reason the HTML returned by .html() leaves it out. Why? The actual object is right, but it's not rendering the markup correctly.

Even more strangely:

>>$('#dummy').append($('<map />').attr("name", "abc"))
>>$('#dummy').html()
"<MAP></MAP>"

But if I look at the HTML according to the IE developer tools, it's...

<map submitName="abc"/>

I investigated this a bit further, and found this question:

Weird behaviour of iframe `name` attribute set by jQuery in IE

And a relevant quote from the accepted answer:

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.

This seems to be the case with any element that uses the name attribute semantically. For example:

>>$('#dummy').append($('<div />').attr("name", "abc"))
>>$('#dummy').append($('<input />').attr("name", "abc"))
>>$('#dummy').html()
"<DIV name="abc"></DIV><INPUT>"

So it appears to a strange manifestation of a relatively commonplace IE bug, simple as that. As you already have a workaround, I'd say stick with it -- but with some luck someone else can come along and explain this a little better.

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Sep 30, 2010 at 2:05

Ian Henry

22.4k4 gold badges53 silver badges61 bronze badges

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

2 Comments

davidsleeps Over a year ago

Thanks heaps for that investigation! I figured it was an IE feature in the end...but curious as to why

David Thomas Over a year ago

You're getting +1 just for the investigation, research and insight.

lucifurious · Accepted Answer · 2010-09-30 02:07:25Z

0

IE has issues with DOM insertion. If you use this format:

$('#someElement).appendTo("<map></map>").attr("name",somevar);

I think you may have better luck.

answered Sep 30, 2010 at 2:07

lucifurious

6405 silver badges11 bronze badges

Collectives™ on Stack Overflow

jquery name attribute of map element in IE

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related