IE (or possibly Javascript library) Adding SVG namespace twice - javascript

I modified this and am moving this comment to the top.
In keeping with Stackoverflow, this could be a bug in some underlying things that no one can fix. But I will consider the best method you propose keeping within the framework of our application to remove the spurious attribute as the solution. It would be unfair otherwise.
I have an oddity I am trying to solve which is baffling. First, it's unclear that it is IE except this behavior does not happen on Chrome or Firefox. We are using charting libraries from Anychart and D3 to generate SVGs on a page. All of this is great. The application is a printing application and extracts the resolved css + html into a separate div and sends this via REST to a formatting service.
The issue lies only in IE and only with the Anychart chart. If you examine this page:
http://www.xportability.com/XEPOnline/FOTestSuite.html
And look toward Image Example #4, you will see a chart. Using IE and DOM explorer, you will see this:
All looks fine. In fact all is fine if that was "real". If you use javascript to extract that SVG in anyway (simplest method is copy HTML in Explorer DOM), you will see that this element's HTML is actually:
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" xmlns="http://www.w3.org/2000/svg">
Even using document.getElementById("anychart").outerHTML in console returns this element this way.
Note the double declaration of the namespace. Well, that is the issue as that is an error.
It does not happen on the D3 chart, nor the static chart. only this chart.
It does not happen in Chrome nor Firefox.
And most odd, it does not even display this way in IE's own DOM explorer.
Am I missing something here? Is there something else we are doing that is making IE do this?
NOTE: I am not looking for answers like apply the regex against the serialized string or such. We can do that (in fact we already do) to close empty (non-closed) HTML tags to make valid XML.
NOTE2: I am not discounting the fact that this could exists in the underlying Anychart JS library used or be a bug in Internet Explorer. It does only appear using Anychart library. They have been contacted to comment. However, the fact that IE shows only one namespace in the DOM explorer and then two when exporting is suspect that it is an IE issue potentially. They have also been contacted through their support.
So, I understand there may be no "answer" to this question .. it could be a bug in another library or in a browser.
As such, this demo only works in Chrome and Firefox for the moment ... until we hack around this or solve in some other way.

After deep analysis Anychart Javascript library was the culprit. They fixed the bug and this does not happen anymore.

Related

Jquery Error in ie8 and ie9 with Wordpress theme. (Object doesnt support this property or method)

I recently launched a website for a client http://www.bridgechurch.us/ only to recieve complaints of it not displaying correctly on ie8 or ie9. I have confirmed this to be true. IE is pointing to this line of Javascript:
jQuery(function () {
jQuery(".scrollable").scrollable({circular: true}).navigator().autoscroll({interval: 7000});
[...]
Can anyone help me figure out what is wrong with this line of code?
Thank you
UPDATE - FIXED
I figured out that there was a comment before the Doctype Declaration that forced IE into quirks mode.
You have a lot of 404's on that page, mainly related to ie-specific css and border images, which is probably why the page doesn't look like it should. Files like /images/internet_explorer/borderBottomRight.png and /wp-content/themes/Moses/styles/default.css aren't loading.
That being said, looking at the scrollable documentation, there is no .navigator() function off of the return value of scrollable(); and I'm getting the same error in Chrome.
Well, visually, the site doesn't appear to work well at all in IE9 (compared to Chrome). But just looking at the code that adds scrollable() to jQuery, you can see that that function doesn't always return the original element. In your code, if you split the call into two, you might be ok:
jQuery(".scrollable").scrollable({circular: true});
jQuery(".scrollable").navigator().autoscroll({interval: 7000});
I blame the plug-in on this one: functions that extend jQuery are supposed to always return the original elements found by the selector.

Create a <noscript> element with content fails on IE7 and IE8 (jQuery)

I've seen several threads about reading contents, but nothing on writing to noscript.
$('body').append('<noscript><div></div></noscript>');
In Chrome and IE9 I get a noscript-element with a empty div inside like I expect, but in IE7 and IE8 I just get a empty noscript-element without the div inside.
Example: http://jsfiddle.net/cEMNS/
Is there a way to add HTML inside the noscript-tag that works in all browsers? What I need is to add some tracking code into a noscript-element at the end of the page, but the info I need isn't available until after document ready.
Edit: I'm getting a lot of comments on "why". It's some poorly done tracking library that requires this. We don't have access to the code to change it. Regardless, I find it interesting that it works in some browsers and not in others since jQuery was supposed to work equally in all browsers. Is it simply a bug?
Edit2: (2 years later) Adding a noscript on the browser doesn't make sense, I know. My only excuse not the question the task I had was because of lack of sleep, like everyone else in the project. But my rationale was that jQuery should behave the same on all browsers and someone might want to do this on the server.
Regardless of the tracking code, what you are doing (or are required to do) makes no sense!
Why? There are two cases possible here:
user has JavaScript enabled in which case the NOSCRIPT get's inserted into the DOM but is ignored by the browser (does nothing)
user does not have JavaScript enabled, NOSCRIPT does not get inserted and does not "execute"
The end result of both cases is that nothing actually happens.
Just an idea: You could try giving your noscript tag an ID, and then try to use native js.
for example:
$('body').append('<noscript id="myTestNoScript"></noscript>');
document.getElementById('myTestNoScript').innerHTML = '<div></div>';
I would claim that if it does not work with native js, it will not work with any library (feel free to correct me on this one).
I tried following simple HTML code:
<html>
<body>
<noscript>I'm a noscript tag.</noscript>
</body>
</html>
Then I did analyse this with IE8 (in IE7 mode) and his integrated code insprector. Apparently the IE7 checks are script allowed. If so he declared it as empty. And empty tags will be ignored. Unfortunatly I could not try that with disabled script option, because only the Systemadministrator can change the settings (here at my work).
What I can assure you, the noscript does exists. If you add
alert($('noscript').size());
after the creation, the result will be 1.

AppendChild issue with Internet Explorer Javascript

The following piece of code, works correctly in Firefox and Chrome, but it gives me a headache in IE.
var anotherDiv= document.getElementById("anotherDiv");
var destination = document.getElementById("mySourceDiv");
destination.appendChild(anotherDiv);
I'm trying to get a Div element and place it inside another div.
I get an error message (in the debug console in IE) similar to "interface not supported", and points me to the appendChild line.
What I've seen is that the type of the destination variable is an object rather then a DOM element.
What can I do to append the anotherDiv to mySourceDiv?
I'm trying this in IE 8.
You probably will need something like an importNode, there are various cross browser solutions around. The issue is that each node has a corresponding document object on it, in IE and so called security doesn't play nice moving things from one document to another.
So, essentially it's doing a deep clone, but the difference between using cloneNode is that cloneNode also sets the document which you don't want.
This might get you going in the right direction:
IE support for DOM importNode
I'd recommend using a library designed to sort through the browser incompatibilities for you. I've personally found jQuery to be quite good. jQuery has an append function.

Google Map Points Not Working in IE

I've got a problem with a Google map on a site I've been working on. The map has loads of points marked on it which are loaded from a database.
You can see the map here - http://www.vineyardchurches.org.uk
This works fine in Firefox and Chrome, but not in IE.
I read some other stuff that suggested that I needed to fire an onload event on the body tag for it to work with IE so I've done that, still no difference.
Any pointers would be greatly appreciated.
The real problem is around lines 41-43 of mapping.js.
You correctly use the form $(data) to convert an XML string into a DOM tree; however http://www.vineyardchurches.org.uk/getMappings.php includes the XML preamble <?xml version="1.0"?>, which is not part of a DOM Tree and cannot be parsed as such.
In this case you're just unlucky that Firefox and Chrome seem to ignore it.
Either make it so that getMappings.php does not print the XML header (though it would no longer be a valid XML document on its own; perhaps you could make this an option in the querystring), or strip it from the data variable before you tree-ise it (which may not be entirely efficient):
$(data.replace('<?xml version="1.0"?>','')).find("marker").each(...);

Tracking down display errors in IE, when everything looks good in firefox

I am a super newb at developing web pages. Especially pages that are created dynamically from javascript.
I have a page that I have worked on that uses some templates from prototype, and widgets from dojo, as well as plain old javascript. This page looks and acts perfectly in firefox.
It is basically adding rows to a table, and adding widgets to the cells.
The widgets basically seem like they are in the wrong column/wrong place.
Where do I start looking to figure out what the incompatibilities are between firefox and IE?
There are lots of sites that will give you information about compatibility. I'd check google. Also, you can download IETester which will allow you to see how your site looks in most IE versions (5.5+).
Take a look at: http://www.quirksmode.org/
I am currently trying to make a template that displays well with FF do the same in IE.
So far, I am breaking it down div by div with corresponding JS function.
Then it is easier to look up the specifics of that particular piece you are trying to make compatible.
For example, I was implementing the enter key and noticed it worked well in FF and not IE. After I looked at that specific input box in html and gathered there were no problems with it, I dove into that specific JS function. Inside I found that the currentTarget wasn't "working". I did a quick search on current target in IE and got all the info I needed to get it to work.
Get yourself a good JS debugger as well, FireBug works with both browsers.
There just aren't good web standards in the web industry right now. Everyone is doing their own thing, it is like the house and bank market. These guys are trying though.

Categories

Resources