PDA

View Full Version : [CLOSED][3.1] DomHelper.append fails in IE7



FrankBerger
22 Jan 2010, 8:37 AM
Hello experts,

It seems that IE7 causes a problem (bug?) in Ext 3.1 when trying to append html using DomHelper.append. The html contains map/area code, which is to be added to an element insde a table. It works in Firefox but the same code fails in IE7. Nothing is added.

Here is the code that works in FF3.5 but not in IE7:


Ext.DomHelper.append(containerID,htmlToBeInserted);It fails with Ext.DomHelper.useDom = true and also with false. The htmlToBeInserted is not contained in the DOM in IE.

I previously added the html using


container.innerHTML = htmlToBeInsertedin the place of DomHelper.append but this is a well known severe IE "bug-feature" for table elements.

Is this failure of DomHelper.append a know bug? And is there any work-around?

Most grateful for any hint

Animal
22 Jan 2010, 8:46 AM
What in a table?

Tables can only contain tbodies and theads and tfoots and cols and colgroups. FF may be lenient, but that's HTML.

FrankBerger
22 Jan 2010, 8:57 AM
What in a table?

Tables can only contain tbodies and theads and tfoots and cols and colgroups. FF may be lenient, but that's HTML.
Well, when I look at the container in the DOM, I see that this is part of a table construct, which was obviously created by Ext Js (not directly by my code). The container is a panel holding an image and the htmlToBeInserted holds map/area html that is to be applied to this image.

I mentioned table only, because this is presumably the reason why container.innerHTML fails, which is a "feature-bug" in IE as one can read on the Internet. However, this should not affect DomHelper.

So what about this bug in DomHelper.append? Is this known?

Animal
22 Jan 2010, 10:48 AM
I don't understand the term "map/area html". or "applied to this image".

I don't know what you are doing or what code is being executed.

FrankBerger
22 Jan 2010, 11:25 AM
I don't understand the term "map/area html".
This html contains a couple of map divs each with one or a couple of area tags to make parts of the image clickable. Thus, there is no visible content in this html.


"applied to this image".
The image has some usemap id (imageObj.useMap = xyz). The map/area div in the html has the same id. If this html is are added, the areas inside the image become functional (clickable & onmouseover). This is what I meant with "is applied" to this image.


I don't know what you are doing or what code is being executed.

This is the relevant code:



var imageObj = document.createElement('img');
imageObj.src = this.getImageFileName();
imageObj.useMap = this.nameUseMap();
imageObj.id = this.imageId;
The imageObj is then added to an Ext.Panel as panel.client: imageObj.

None of this causes any problem. The only problem is in adding the map/area html to the imageObj via

Ext.DomHelper.append(containerID,htmlToBeInserted); where the containerID is the id of the image above. Again: Works all fine in FF 3.5 and also in IE except for the essential DomHelper.append, which just does nothing in IE7. There is no html added. None of the map/area html is visible when inspecting the DOM.

All code and data etc. are absolutely identical in FF3.5 and IE7.

I hope to have made everything as clear as possible.

Animal
22 Jan 2010, 12:00 PM
You can't add divs to an img.

FrankBerger
22 Jan 2010, 12:12 PM
You can't add divs to an img.
Well, of course not and I certainly did not write that.

I wrote: "If this html is are added" and as one can see above from the code, the image and the map/area html are both added to the element created by:

imageObj = document.createElement('img')Again: It works perfectly well in FF and there must be some problem or bug in the DomHelper.append.

Animal
23 Jan 2010, 12:13 AM
This is the relevant code:



var imageObj = document.createElement('img');
imageObj.src = this.getImageFileName();
imageObj.useMap = this.nameUseMap();
imageObj.id = this.imageId;
The imageObj is then added to an Ext.Panel as panel.client: imageObj.

None of this causes any problem. The only problem is in adding the map/area html to the imageObj via

Ext.DomHelper.append(containerID,htmlToBeInserted); where the containerID is the id of the image above. Again: Works all fine in FF 3.5 and also in IE except for the essential DomHelper.append, which just does nothing in IE7. There is no html added. None of the map/area html is visible when inspecting the DOM.

All code and data etc. are absolutely identical in FF3.5 and IE7.

I hope to have made everything as clear as possible.

This is all getting too difficult for me. You say that you are inserting "map/area html", then I discover that you mean "This html contains a couple of map divs"

Then you tell me that the containerID into which it is being inserted is the id of an image.

Then you tell me that you "certainly did not write that."

We're going in circles so I'm giving up.

FrankBerger
23 Jan 2010, 4:14 AM
We're going in circles so I'm giving up.
Seems you are having some very bad days, if you don't understand this code:



var imageObj = document.createElement('img');
imageObj.src = this.getImageFileName();
imageObj.useMap = this.nameUseMap();
imageObj.id = this.imageId;
and the fact that the html with map/areas is to be added to this 'img' element via DomHelper.append, which fails.

Animal
23 Jan 2010, 4:16 AM
AAAUGGGGGHHHHHH!!!!

And I said "you can't add divs to an img"!

And then you said you weren't doing that, and then.... "GOTO 1"

FrankBerger
23 Jan 2010, 4:21 AM
AAAUGGGGGHHHHHH!!!!

And I said "you can't add divs to an img"!

And then you said you weren't doing that, and then.... "GOTO 1"
Oh, come on, you're really having very bad days! Don't blame me if you don't understand my words: It should be clear even to some JS beginner that

var imageObj = document.createElement('img')does not create an image. What you claim to have understood could never work in FF!

Condor
23 Jan 2010, 5:31 AM
To avoid all this confusion, can you post a small (but complete) testcase that demonstrates the issue?

Animal
23 Jan 2010, 5:33 AM
Oh, come on, you're really having very bad days! Don't blame me if you don't understand my words: It should be clear even to some JS beginner that

var imageObj = document.createElement('img')does not create an image. What you claim to have understood could never work in FF!
:))

FrankBerger
23 Jan 2010, 7:05 AM
OK, Condor, thank you for getting involved. I try again, more detailed and hopefully more precise:

Background:
The center area of the Ext viewport consists of a TabPanel with several Panels inside. One of these Panels holds nothing but a big image with several clickable areas. It is essentially constructed like this:


imgPanel = new Ext.Panel({
id: this.newContainerId(),
client: this.newImageObj(),
...
This is the code that builds what is added to the Panel as client created in newImageObj():


newImageObj()
...
var imageObj = document.createElement('img');
imageObj.src = this.getImageFileName();
imageObj.useMap = this.nameUseMap();
imageObj.id = this.imageId;
Ext.DomHelper.append(imageObj.id, htmlAll)
The htmlAll consists of nothing but a couple of map/area divs, which are generated in the client. I don't think this matters but I still mention that the imageObj is regularly exchanged within its Panel due to user actions. "exchanged" means that the old imageObj is removed from the Panel, that some new imageObj is created by the code above and added to the Panel.

FF3.5 adds the htmlAll correctly and the map/areas are working perfectly well.

When using the absolutely identical code in IE7, the htmlAll does not exist when inspecting the DOM and, of course, no clickable areas are available either. The DomHelper.append fails in IE7.

Therefore, my primary question was/is: Is there any problem known with DomHelper.append? I searched the forum before posting but I found nothing relevant. My second question would be how to circumvent this problem.

----------------------------------------------------------------

My goal is to get my code working. I am therefore trying other solutions. "innerHtml" does not work in IE7, it works only in FF. I am currently trying to substitute the Ext.DomHelper.append by some


Ext.DomHelper.insertHtml('afterEnd',imageObj,htmlAll)Surpisingly, this works in FF3.5 and also in Opera but not correctly in IE7. "not correctly" means that the htmlAll is indeed added to the imageObj but that the area/maps don't resolve properly. They have totally wrong x/y coords etc. I assume that this is presumaly not an Ext Js issue and therefore we should leave this aside here.

I would prefer if DomHelper.append worked in IE, because this seems to be the proper solution. Unfortunately, the doc about DomHelper is not very helpful either. A few more details would help a lot. Also, I had no need to use DomHelper before.

Condor
23 Jan 2010, 7:21 AM
As Animal already mentioned, Ext.DomHelper.append() is never going to work, because you can't append a <map> to an <img> (and img can't contain other tags).

Ext.DomHelper.insertAfter() will create valid HTML, but it could be that because you created the img before the map it doesn't correctly reference it.

Try creating the <map> first and then <img>.

FrankBerger
23 Jan 2010, 9:20 AM
As Animal already mentioned, Ext.DomHelper.append() is never going to work, because you can't append a <map> to an <img> (and img can't contain other tags).

I triple-checked this again and THIS DOES WORK IN FF! The same element (imageObj) that is created by the


var imageObj = document.createElement('img')is definitely also the one (imageObj) in


Ext.DomHelper.append(imageObj.id, htmlAll)
Ext.DomHelper.insertAfter() will create valid HTML, but it could be that because you created the img before the map it doesn't correctly reference it.
It definitely does work in FF!

In the flow of the real code, the htmlAll was already created before the img is created (see below). My example above was an extract of code that is split over different functions.

In the real code things are a bit more complicated, because the areas must be recalculated whenever the image is scaled (areas are not scaled by the browser). This is why the whole process is a multi step procedure in this sequence:

- first the map/area data is re-calculated for the current zoom rate and a new htmlAll is created
- old image container (named imageObj above) is removed from the panel
- a new image container (imageObj ) is created by document.createElement('img');
- htmlAll is appended to imageObj (see below, this is where the problems occur)
- imageObj with htmlAll is added to panel and made visible


Try creating the <map> first and then <img>.
Again: That is exactly what happens.
Were you assuming timing problems in IE?


Ext.DomHelper.insertAfter() will create valid HTML, but it could be that because you created the img before the map it doesn't correctly reference it.
I now tried insertAfter at the same place of append.

The result:
1) Works perfectly well in FF (thus, I have three choiced in FF great!)
2) Works perfectly wll in Opera!
3) In IE, it adds the htmlAll but at the wrong place* in the DOM. See below and screenshots.

These were all tested with exactly the same code for all three browsers!

*wrong place means this:

FF:
When I look at the DOM in FF, the div for the maps/areas is directly below the same div (#177) that also holds the imageObj ('img').

IE
In IE the tree structure is different: div #189 sits between div #188 and the #container_4_imageObj. The div for maps/areas is below #188 (and not below #189 as in FF if I interpret this correctly). I suppose that this htmlAll is not added correctly. Again: All this was all done by the same code.

This is presumably caused by additional nodes that are created by Ext JS. See the screenshots. All nodes that have no explicit IDs (i.e. with generated ids) are created by Ext JS. All my nodes have explicit IDs

From these screenshots you see clearly that DomHelper.insertAfter adds the htmlAll to different places in the nodes tree in FF and IE. Again: All done with exactly the same code!

Resumée:
- DomHelper.append does not work at all in IE (adds no htmlAll)
- DomHelper.insertHtml('afterEnd'... works in IE but with the same effect as insertAfter
- DomHelper.insertAfter works in IE but not correctly

Again my question: Are any problems known for DomHelper append?

Unfortunately, none of these functions is explained in the documentation. All there exists is this short list:

Commonly used insertion methods:
* append :
* insertBefore :
* insertAfter :
* overwrite :
* createTemplate :
* insertHtml : Neiher a single word is given about what they do, nor any example. All the rest is left to the user's imagination and to trial and error. I think there is plenty of room and need for improvement.

FrankBerger
23 Jan 2010, 9:52 AM
Condor, I just noticed another problem with DomHelper.appendAfter in the same context:

The sequence, in which nodes are created, differs from one pass of the code to another. This causes differences in how this whole panel looks.

Please see the attached screenshots, both taken from IE7 rund with 100% identical code. The correct sequence is in IE02, because the areas must be below the img (although they should be on another branch, see previous posting).

Am I wrong when I expect that the node sequence should be the same every time?
Is there a way to ensure this?

Animal
23 Jan 2010, 9:55 AM
There's a bug in the documentation generator that has been reported which means those methods don't show up. Don't know if they're doing anything about it.

And imgs cannot have child elements:

http://www.w3.org/TR/html4/struct/objects.html#h-13.2

No child elements. Just because some browsers allow it does not mean you can use it. It means those browsers are doing something they should not.

FrankBerger
23 Jan 2010, 10:06 AM
There's a bug in the documentation generator that has been reported which means those methods don't show up. Don't know if they're doing anything about it.

And imgs cannot have child elements:

http://www.w3.org/TR/html4/struct/objects.html#h-13.2

No child elements. Just because some browsers allow it does not mean you can use it. It means those browsers are doing something they should not.
So it's the famous difference between "can't" and "shouldn't", between practice and theory! Well known to me.

How about a constructive proposal for solving this in IE?

FrankBerger
23 Jan 2010, 10:14 AM
And imgs cannot have child elements:

http://www.w3.org/TR/html4/struct/objects.html#h-13.2

No child elements. Just because some browsers allow it does not mean you can use it. It means those browsers are doing something they should not.
Actually, when I look at the first DOM screenshot (FF, again here below) and provided I interpret it correctly, the map/area html are NOT added as children to the img but as siblings, i.e. both (map/area and img) are below the same intermediate div (#177) that is created by Ext Js. Therefore, the w3 provision is correctly fulfilled.

Ext Js is so clever to properly solve this BUT ONLY IN FF!

The result of the same code is very different in IE, because there is no commen top div for map/area and div. See the other screenshots.

I assume that this is where the problems come from (plus the fact that append completely fails).

Animal
23 Jan 2010, 10:24 AM
ExtJs does not solve this. FF obviously has some checks for shoddy programming, and "does its best to cope".

FrankBerger
23 Jan 2010, 10:36 AM
ExtJs does not solve this. FF obviously has some checks for shoddy programming, and "does its best to cope".
Well, I dare to doubt this statement, because it's definitely not FF that creates the intermediate div and names it (one in FF, three in IE) exactly in the style Ext JS does.

So, if it was true what you wrote:
1) there could never be any Ext-style named common super div for both the img and the map/area
2) for IE there would not three intermediate divs be created.

It must be Ext JS that creates these!

My impression is that you (singluar) are trying anything imaginable to point away from the actual problem and that is the definitely different behaviour of DomHelper in FF and IE.

FrankBerger
23 Jan 2010, 10:42 AM
Question and proposal to get this solved and working for all browsers

Would it work, if I created one piece of html code with:
- first one div holding the big image
- plus all the map/area divs as in htmlAll

and if I add this to the Panel?

That would at least make the use of any DomHelper function obsolete. My question is if this would presumably work inside the Panel?

Comments most appreciated!

evant
23 Jan 2010, 11:12 AM
As Condor suggested, please post a full, runnable test case, after the following all the text in this thread it's started to become confusing and it could easily be cleared up by a code sample.

FrankBerger
23 Jan 2010, 11:17 AM
As Condor suggested, please post a [b]full, runnable[b] test case, after the following all the text in this thread it's started to become confusing and it could easily be cleared up by a code sample.

It is hardly possible to extract the relevant code into a short example in an acceptable timeframe so that it is quickly to view and to understand. It's part of a fairly big project and I am only in charge of some parts.

Apart from that, I think that the screenshots very clearly state the differences.

These bugs (as I must assume) have meanwhile cost me over 30 hrs and I must get my project finished. Therefore, I will now first try to circumvent these problems on the basis of my thought mentioned right above in my previous post.

evant
23 Jan 2010, 11:38 AM
Ok, however similarly it's quite difficult to debug an issue where we don't have any code available.

I'll leave this thread open if you want to post a test case.

FrankBerger
25 Jan 2010, 10:26 AM
Ok, however similarly it's quite difficult to debug an issue where we don't have any code available.

I'll leave this thread open if you want to post a test case.
Well, you can close this thread.

I am sure that there are bugs in Ext when runningn in IE, because Ext does not what it pretends following the few words in the mostly lacking doc on this class and it definitely creates different results in IE compared to FF.

However, I am not pursuing this approach via DomHelper any more as this lead to no success in IE. Instead. I am using direct DOM access.