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

Javascript is not executed on IE when using .on( WordPress

  • SOLVED

I am the developer of mapsmarker.com & for the next release I plan to add support for tracks on my maps.
See a demo here: [[LINK href="http://pro.mapsmarker.com/?p=51"]]http://pro.mapsmarker.com/?p=51[[/LINK]]
The tracks show correctly in FF/Chrome/Safari... but not in IE (8-10) & I dont have any clue why.

This is the code I use for generating the output:

function display_gpx_' . $uid . '() {
var gpx_panel = document.getElementById("gpx-panel-' . $uid . '");
var gpx_url = "'.$gpx_url.'";

function _t(t) { return gpx_panel.getElementsByTagName(t)[0]; }
function _c(c) { return gpx_panel.getElementsByClassName(c)[0]; }

new L.GPX(gpx_url, {
async: true,
max_point_interval: ' . intval($lmm_options['gpx_max_point_interval']) . ',
marker_options: {
startIconUrl: "' . $gpx_startIconUrl . '",
endIconUrl: "' . $gpx_endIconUrl . '",
shadowUrl: "' . $gpx_shadowUrl . '",
iconSize: [' . $lmm_options['gpx_iconSize_x'] . ', ' . $lmm_options['gpx_iconSize_y'] . '],
shadowSize: [' . $lmm_options['gpx_shadowSize_x'] . ', ' . $lmm_options['gpx_shadowSize_y'] . '],
iconAnchor: [' . $lmm_options['gpx_iconAnchor_x'] . ', ' . $lmm_options['gpx_iconAnchor_y'] . '],
shadowAnchor: [' . $lmm_options['gpx_shadowAnchor_x'] . ', ' . $lmm_options['gpx_shadowAnchor_y'] . '],
className: "lmm_gpx_icons"
},
polyline_options: {
color: "' . $gpx_track_color . '",
weight: ' . intval($lmm_options['gpx_track_weight']) . ',
opacity: ' . floatval($lmm_options['gpx_track_opacity']) . ',
smoothFactor: ' . floatval($lmm_options['gpx_track_smoothFactor']) . ',
clickable: ' . $lmm_options['gpx_track_clickable'] . ',
noClip: ' . $lmm_options['gpx_track_noClip'] . '
},
}).on("loaded", function(e) {
//info: IE8 does not run this code below
console.log("test");
var gpx = e.target;
' . $gpx_metadata_name_js . '
' . $gpx_metadata_start_js . '
' . $gpx_metadata_end_js . '
' . $gpx_metadata_distance_js . '
' . $gpx_metadata_duration_moving_js . '
' . $gpx_metadata_duration_total_js . '
' . $gpx_metadata_avpace_js . '
' . $gpx_metadata_avhr_js . '
' . $gpx_metadata_elev_gain_js . '
' . $gpx_metadata_elev_loss_js . '
' . $gpx_metadata_elev_net_js . '
' . $gpx_metadata_elev_full_js . '
' . $gpx_metadata_hr_full_js . '
}).addTo(' . $mapname . ');
}
display_gpx_' . $uid . '();


What I already found out is on IE8 the console.log("test")-message does not get output in the console, so it seems the code within the function(e) is not run at any time - in contrast to other browsers.

Does anyone know about issues with IE8 here? Or is this caused by something completely different I am missing here?
Any hints are really appreciated!

Robert

Answers (1)

2013-08-16

Ross Wilson answers:

I am getting the following error when running in IE

SCRIPT5007: Unable to get property 'getElementsByTagName' of undefined or null reference
leaflet.js, line 38 character 3413


This is in the GPX plugin, in the parse_gpx_data function. Any way you could include the un-minified latest version of that plugin in the page you posted so we can debug?


Ross Wilson comments:

The demo for the GPX plugin has the same issue in IE:
[[LINK href="http://mpetazzoni.github.io/leaflet-gpx/"]]http://mpetazzoni.github.io/leaflet-gpx/[[/LINK]]


Robert Harm comments:

Hi Ross,
I added the unminified version of the gpx-leaflet-plugin.
best,
Robert


Ross Wilson comments:

Found the issue, it is in the GPX library, but here is a workaround;

In the GPX Library code find:


req.onreadystatechange = function() {
if (req.readyState != 4) return;
if(req.status == 200) cb(req.responseXML, options);
};


And replace it with:

req.onreadystatechange = function() {
if (req.readyState != 4) return;
if(req.status == 200){
if(req.responseXML){
cb(req.responseXML, options);
}else {
try{
var parser = new DOMParser();
cb(parser.parseFromString(req.response, "text/xml"), options);
} catch (e){
console.log(e);
}
}
}
};


This should be within the _load_xml function in the gpx library. If you can make that change on the page here I can give it a test and make sure it is working on IE for me.


Robert Harm comments:

perfect - thanks a lot!!!!