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(...);
Related
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.
I'm having a problem with IE (I'm testing in IE9, but I believe it will behave the same way in the previous versions as well).
The response I'm sending from PHP is as follow:
{"success":true,"content":"<img src=\"\/media\/page\/1528484482.jpg\" width=\"140\" height=\"140\" alt=\"1528484482.jpg\" \/>"}
It works absolutely fine in Firefox, Chrome, Safari, Opera etc. - but it doesn't work in IE.
The response is an empty object.
When I change the response to the following it works fine - the only difference is the forward slash before the closing of the img tag:
{"success":true,"content":"<img src=\"\/media\/page\/1528484482.jpg\" width=\"140\" height=\"140\" alt=\"1528484482.jpg\">"}
Is there any way of parsing the 'content' response so that it doesn't break in IE?
(This is an advice, more than a solution)
Separate presentation layers (js/html [how]) and the domain layers (php [what]).
Domain layer decides what data to return.
Presentation layer decides how the data will be presented.
Return the image path, and make the presentation layer decide how to show the image to the user.
Now the solution of your problem would be on the declaration of the doctype.
I suppose the problem is for not declaring the doctype and IE is taking XHMTL as its default doctype.
In XHTML the tag must be properly closed.
http://www.w3schools.com/tags/tag_img.asp
The rest of the browsers takes HTML5, i suppose, and it doesn't require a closing tag on the image.
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.
Ok, I'll do my best.
There's this page http://tiu.ru/image/tmp/test_2.html , which looks differently in Opera then in Chrome and Firefox (maybe others).
It evaluates a javascript code inside <div></div>, that does document.write("") of a piece of another HTML code with <script>, that evaluates JS code that asks Google Ads to write ads.
Google Ads writes it's container and container's content (which loads advertising from Yandex) ((maybe you'll need to disable adblock to see ads, but you can just view the screenshot)).
And the problem is that in Opera it writes that content outside the original div somehow.
Screenshot of result for Chrome:
Screenshot of result for Opera:
If you take that code inside document.write() and put it just as usual HTML code -- everything works well. See http://tiu.ru/image/tmp/test_3.html
I can't figure out how to debug that google ads code, that's why I ask for help. Thank you.
p.s.: you can save page to localhost somewhere and open it, ads won't be loaded, but DOM tree will be the same wrong.
Thank you very much!
Well, you add a script tag with document.write() that does document.write() to add the one that calls GA_googleFillSlot, which itself does document.write() to add a SCRIPT with SRC set to a doubleclick.net URL which calls back into google_ads.js to trigger another document.write() that adds an inline SCRIPT containing another document.write() call to add another external script, this time loading context.js from an.yandex.ru, and it looks like context.js also contains code to add yet two more external scripts to the document. But at this point the damage already happened: although a loading external script inserted with document.write() should block parsing, something odd happens when the doubleclick.net script loads and calls back into google_ads.js that makes Opera close the parent DIV.
Let's see what the DOM looks like the moment DoubleClick calls back to google_ads - by setting a breakpoint in GA_googleSetAdContentsBySlotForSync and using Opera Dragonfly. There we go: on entering this script, the DOM is still OK, the DIV is not closed - but when this script thread does document.write() to add <div id=google_ads_div_ru__context_informers_addon_360x90_ad_container> with comments, markup and scripts inside, something about that new content makes Opera believe it needs to close the former document.write()-inserted DIV. It's a parsing bug deep inside the handling of multiple nested document.write()s, I guess.
This will work fine with Opera's upcoming HTML5 parser. If at all possible for you, don't worry about it and wait until Opera 12 sorts it all out.
Opera has a strict XHTML parser. Try wrapping your javascript in CDATA tags so the parser will ignore the < and & characters as well as any other illegal characters in your script:
<script type="text/javascript">
/* <![CDATA[ */
// put your js code here
/* ]]> */
</script>
I'm having an issue with an AJAX script I'm fixing - an AJAX connection is being made, XML data is returned (Properly), however the data is not being shown correctly in any browser other than IE. Elements are being gotten by using xmlData.childNodes[1] - which works fine in IE, but in Opera, Firefox, Chrome, etc., different data is returned than what is returned in IE. I think IE uses a different method of indexing DOM elements, so rather than starting at 0 it starts at 1, or something along those lines.
Anyways, knowing that - how can I get data from an XML element by referencing the name of the element? If that's not possible, how can I get around this indexing issue?
Are you getting anything back in those other browsers? Maybe the xml is coming back with the wrong mime type?
Your probably better off using the selector methods rather than just childNodes. ie
elements = xmldoc.getElementByTagName('tag')
element = xmldoc.getElementById('id')
This way if the xml changes in the future you won't have to remember about which index pointed where.
Have you taken a look at:
http://www.w3schools.com/dom/dom_nodes_access.asp
As well as the examples here:
http://www.w3schools.com/dom/dom_nodes_info.asp