Ask your WordPress questions! Pay money and get answers fast! (more info)

GPX track not shown in Internet Explorer 8 WordPress

  • SOLVED

The next version of my mapping plugin [[LINK href="http://www.mapmarker.com"]]http://www.mapmarker.com[[/LINK]] will allow users to add GPX-tracks and GPX-metadata.

Unfortunately the current dev version does not work in IE8.
See [[LINK href="http://pro.mapsmarker.com/?p=106"]]http://pro.mapsmarker.com/?p=106[[/LINK]] for an example.
The unminified gpx code can be found at the end of [[LINK href="http://pro.mapsmarker.com/wp-content/plugins/leaflet-maps-marker-pro/leaflet-dist/leaflet.js"]]http://pro.mapsmarker.com/wp-content/plugins/leaflet-maps-marker-pro/leaflet-dist/leaflet.js[[/LINK]]

In IE8 I am getting the following error in the console.

Object doesn't support this property or method
leaflet.js, line 268:
var name = xml.getElementsByTagName('name');

In IE9 and above the gpx track is displayed. Anyone know how to fix this?

Answers (3)

2013-08-21

Ross Wilson answers:

Robert - this seems to be a big flaw in the GPX code that was originally written, their parsing function does not account for anything but modern browsers. I would suggest the following:

Add this code at line 227, which will give you a proper parser:

_parse_xml: function(xmlStr){
if (typeof window.DOMParser != "undefined") {
return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
} else if (typeof window.ActiveXObject != "undefined" &&
new window.ActiveXObject("Microsoft.XMLDOM")) {
var xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(xmlStr);
return xmlDoc;
} else {
throw new Error("No XML parser found");
}
},


then you can clean up your _load_xml function to just be:


_load_xml: function(url, cb, options, async) {
if (async == undefined) async = this.options.async;
if (options == undefined) options = this.options;
var gpx_content_toparse = this._htmlspecialchars_decode(this.options.gpx_content);
var xmlDoc = this._parse_xml(gpx_content_toparse);
if(xmlDoc){
cb(this._parse_xml(gpx_content_toparse), options);
} else{
console.log('error parsing xml');
}
},


Robert Harm comments:

Hi Ross,
looks better now, thanks - although the code now breaks on line 363 on IE8:

_ = el[i].getElementsByTagNameNS('*', 'hr');

According to [[LINK href="http://www.w3schools.com/jsref/met_document_getelementsbytagnamens.asp"]]http://www.w3schools.com/jsref/met_document_getelementsbytagnamens.asp[[/LINK]] this method is not supported by IE8 :-(

Do you know a wordaround for this?
best
Robert


Ross Wilson comments:

You should be able to replace that line with _ = el[i].getelementsByTagName('hr');

It looks like they are using a search for tag names within a namespace, but then setting the namespace to *.


Robert Harm comments:

For the record: it has to be _ = el[i].getElementsByTagName('hr');
Then it works - thx!

2013-08-21

Plugarized answers:

in leaflet.js line 270

var name = xml.getElementsByTagName('name');
if (name.length > 0) {
this._info.name = name[0].textContent;
}


ie8 does not support .textContent and you would have .text instead

As you can see in here, https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent?redirectlocale=en-US&redirectslug=DOM%2FNode.textContent

The browser support for textcontent in IE is 9+

Perhaps a way to try and using both to support ie7/8 is

this._info.name = name[0].textContent || name[0].text;

or

this._info.name = name[0].textContent || name[0].innerText;

Here is an example http://jsfiddle.net/3SA2Y/


Robert Harm comments:

thx for pointing out that .textcontent is supported not supported in IE8 - anyway this does not seem to be only the reason for this bug.

Console says

Object doesn't support this property or method
leaflet.js, line 268:
var name = xml.getElementsByTagName('name');

even if I outcomment the line
this._info.name = name[0].innerText;

I still get the same error - it somehow seems that there is an another issue - see updated example on [[LINK href="http://pro.mapsmarker.com/?p=106"]]http://pro.mapsmarker.com/?p=106[[/LINK]]


Plugarized comments:

Where is the xml document that has the element "name" ?


Robert Harm comments:

Actually the gpx-track gets loaded & escaped for javascript via a php-proxy (to overcome cross-domain limitations). You see the actual content within the variable gpx_content on http://pro.mapsmarker.com/?p=106.

Next step is, that this string gets reverted back to xml syntax by the function _htmlspecialchars_decode and then as next step, I parse this string as XML - via

var parser = new DOMParser();
setTimeout(function() {
//cb(parser.parseFromString(gpx_content_toparse, "text/xml"), options);
cb(parser.parseFromString(input, "text/xml"), options);
});


for modern browsers and with

var parser = new ActiveXObject('Microsoft.XMLDOM');
parser.async = async;
//parser.loadXML(input);//added
setTimeout(function() {
//cb(parser.loadXML(input), options);
cb(parser.xml, options);
});


for IE8.

2013-08-21

Eric P. answers:

Is your document XML? Or is it HTLM 5 or something else?

Try "document.getElementsByTagName" or if you're getting tags within some specific DOM object, then call the getElementsByTagName method on that object.

For example:
myMenu=document.getElementById('menu');
var anchors=myMenu.getElementsByTagName('a')


That code fragment will get all the "a" tag objects into the variable "anchors".


Robert Harm comments:

I am parsing a xml document, but the code you described is already in place and does not work unfortunately:

var name = xml.getElementsByTagName('name');

the problem is that xml. gets treated different in IE8 - just cant figure out what it is :-/