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
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.
Having a bit of an issue in IE (aren't we all).
I've tracked down an problem I'm having to a recursive script that updates a tweets timestamp.
The script works fine, discovering all the date/time stamps to be updated, converts them fine but when it comes to updating the 'time' div it fails. IE doesn't have an issue with $('#id').text('value') but I'm obviously doing somehthing wrong.
Any ideas?
function parseTwitterDate() {
var timeToAdjust
$('a[data-scribe="element:full_timestamp"]').each(function() {
timeToAdjust = $(this).find('time')
var b = timeToAdjust.attr('datetime').split(/[-t:+]/ig);
//funky stuff here to generate strTime
timeToAdjust.text(strTime)
});
}
This works fine in every other browser however in at least IE8 (and 6 but not worried about that) it gets to timeToAdjust.text(strTime) and fails.
Note, doesn't have an issue grabbing the 'datetime' attribute timeToAdjust.attr('datetime').
Have tried .html() and $(this).find('time').text(strTime)
Many thanks for taking a look hopfully someone can point me in the right direction.
Justin
IE8 and earlier require special steps to ensure that they properly understand that the new HTML5 element types are actually elements. There are tiny scripts out there (like this one) which do that work for you.
Without doing that work, lots of aspects of those elements won't work even as just normal elements in IE8 and earlier.
This JSBin of your code (jsFiddle doesn't work with IE8) fails, but this one with a shim works.
For some reason, Google Chrome is not returning DOM results when more than one element is requested.
For example, document.getElementById() and document.querySelector() work, but document.querySelectorAll(), document.getElementsByTagName(), and document.getElementsByClassName() do not work.
Below is a screenshot of the JavaScript console I was using to test the page. Additionally, the page works flawlessly in Safari, and these problems do not persist there.
I have discovered that the problem was in the display of the arrays in the JavaScript console, not their actual values. This issue is documented here: http://code.google.com/p/chromium/issues/detail?id=121292
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.
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(...);