Bug Tracker

Opened 11 years ago

Closed 10 years ago

Last modified 8 years ago

#4484 closed bug (fixed)

Can't insert html code in <map> with firefox

Reported by: Ivoire Owned by:
Priority: major Milestone: 1.4
Component: core Version: 1.4a1
Keywords: Cc:
Blocked by: Blocking:

Description

I tried ".html()" and ".append()" - both didnt work with firefox. It didnt write any code in the tag. So i used javascript ".innerHTML" which worked on both browsers (ie and firefox)

javascript document.getElementById("map").innerHTML = html;

jquery $("#map").html(html); $("#map").append(html);

html <map id="map"> </map>

Attachments (1)

imageMapTest.html (776 bytes) - added by Ivoire 11 years ago.

Download all attachments as: .zip

Change History (15)

comment:1 Changed 11 years ago by Ivoire

I want to add that it only doesn't work if i try to add a <area> tag

comment:2 Changed 11 years ago by dmethvin

Resolution: wontfix
Status: newclosed

As the jQuery docs say, jQuery implements .html() and other methods that take HTML strings by injecting the given string into the innerHTML property of a DIV. If you try to insert content that is not valid within a DIV, it won't work. The AREA tag is only valid within a MAP. If you want to use jQuery .html(), create a full valid HTML fragment by including the MAP tag and nest the AREA within that.

comment:3 Changed 11 years ago by dmethvin

need: ReviewTest Case
Resolution: wontfix
Status: closedreopened

Actually, there may be a simple fix for this in {{{jQuery.clean}}. Can you provide a full test case?

Changed 11 years ago by Ivoire

Attachment: imageMapTest.html added

comment:4 Changed 11 years ago by Ivoire

attached a simple testfile. this example works fine with ie. But if you try it in firefox it only work if you use the "document.getElementById("map").innerHTML = html;" which i commented. Hope this helps, previous snippet was to short as i saw.

comment:5 Changed 11 years ago by Ivoire

sry - path to jquery is local in this testfile

comment:6 Changed 11 years ago by borg42

"As the jQuery docs say, jQuery implements .html() and other methods that take HTML strings by injecting the given string into the innerHTML property of a DIV. If you try to insert content that is not valid within a DIV, it won't work."

I don't see it in the documentation, but it seems important. Please add this (or a link to the page that contains this info) to http://docs.jquery.com/Html .

(BTW, it'd be nice if there were a gotcha/caveat section on the help pages.)

comment:7 Changed 11 years ago by Ivoire

If you take a look at the attachment (imageMapTest.html) i have added you can see that i dont use any div in this example. I only want to add a AREA tag to the MAP. Nevertheless it doesnt work with firefox.

comment:8 Changed 11 years ago by borg42

Ivoire: AFAIK his point is that when you use .html(someHtmlCode), the variable someHtmlCode should contain html that would be valid html if you'd insert it to a div (and an area without a map is invalid in a div). That is, it seems you can't use .html() like that, simply because it's not supported by jQuery. You should generate the map+area tags into someHtmlCode and them append all this to the body.

I'm not sure if it's true/right or not, I'm only describing what he says.

comment:9 Changed 11 years ago by Ivoire

Ok thx for the info, misunderstood first reading it...

comment:10 Changed 11 years ago by dmethvin

Yep, that's what I meant. As for the possible solution, we could wrap the AREA tag in a MAP inside the DIV, then strip out the MAP. There are several other cases where that already has to be done, particularly for tables.

comment:11 Changed 10 years ago by john

Milestone: 1.3.21.4
Resolution: fixed
Status: reopenedclosed
Version: 1.3.21.4a1

comment:12 Changed 9 years ago by dmethvin

#4582 is a duplicate of this ticket.

comment:13 Changed 9 years ago by anonymous

Not working in jQuery 1.4.4

comment:14 in reply to:  13 Changed 9 years ago by jitter

Replying to anonymous:

Not working in jQuery 1.4.4

Please submit a reduced test case, which reproduces the issue you are experiencing, on http://jsfiddle.net. So that we can investigate this issue further. Also make sure to read the link given below, in order to provide a most useful bug report.


How to report bugs

Note: See TracTickets for help on using tickets.