"object Doesn't Support This Property Or Method"

[MarkPetty]

I'm trying to implement a map using jsp and javascript in a way that updates on a regular basis.

 

My original implementation was this:

 

<%--Viewing the map --%>

<a4j:outputPanel id="oldConnectionsMapView">

<div id="mapdiv" align="left">

FusionMaps.

</div>

<script type="text/javascript">

var map = new FusionMaps("/edm/FusionMaps/FCMap_${mapBean.mapName}.swf", "Map1Id", "750", "460", "0", "1");

map.setDataXML("${mapBean.mapDataAsXML}");

map.setTransparent(true);

map.render("mapdiv");

</script>

</a4j:outputPanel>

<a4j:outputPanel id="connectionsMapView">

<script type="text/javascript">

var map = getMapFromId("Map1Id");

if (map.hasRendered) {

map.setDataXML("${mapBean.mapDataAsXML}");

}

</script>

</a4j:outputPanel>

 

where mapBean represents a bean with methods used to retrieve the appropriate data for the map (the name and the xml of the data). In addition, connectionsMapView is part of list of elements that are being refreshed regularly by the java code. Because of the methods being used to drive the maps, all of this is included on a form.

 

I was in the process of trying to eliminate screen flicker (which is still an issue) when I discovered that this code fails to update on IE, and I receive the dreaded 'Object doesn't support this property or method". I chased down possible causes and solutions, and the only one that seemed to be relevant was the "DOM and getMapFromId () doesn't work inside a Form".

 

So I changed the code to this:

 

outside the <a4j:form> declaration, I have this:

 

<script type="text/javascript" src="/edm/FusionMaps/FusionMaps.js"></script>

<script LANGUAGE="Javascript" SRC="../JSClass/FusionMaps.js"></script>

<script LANGUAGE="JavaScript">

function createConnectionMap(MapName, Data){

var map = new FusionMaps(MapName, "Map1Id", "750", "460", "0", "1");

map.setDataXML(Data);

map.setTransparent(true);

map.render("mapdiv");

}

 

function updateConnectionMap(Data){

var map = getMapFromId("Map1Id");

if (map.hasRendered) {

map.setDataXML(Data);

}

}

</script>

 

and I modified the code inside the Form declaration to this:

 

<%--Viewing the map --%>

<a4j:outputPanel id="oldConnectionsMapView">

<div id="mapdiv" align="left">

FusionMaps.

</div>

<script type="text/javascript">

createConnectionMap ("/edm/FusionMaps/FCMap_${mapBean.mapName}.swf", "${mapBean.mapDataAsXML}");

</script>

</a4j:outputPanel>

<a4j:outputPanel id="connectionsMapView">

<script type="text/javascript">

updateConnectionMap ("${mMapBean.mapDataAsXML}");

</script>

</a4j:outputPanel>

 

 

It still works on FireFox (aside from the initial draw, and I haven't attacked that issue yet), and the redraw works fine (aside from the flicker), but IE is still throwing Bad Object errors.

 

Any solutions or suggestions? I've moved the var map declarations out of the form. I was expecting getMapFromId () to work at this point.

 

Firefox version is 8.0.1, Explorer is 9.0.8. OS is Windows 7 Pro.

[Guest Bindhu]

Hi MarkPetty,

 

Welcome to the FusionCharts Forum

 

Thank you for the post.

 

Can you please try the following options,

 

1. Use dispose() method just before you update the chart.

Ref. Code:

function updateConnectionMap(Data, uniqueChartId){
var map = getMapFromId("Map1Id");
if (map.hasRendered) {
	var flag = false;
	flag = map.isActive(); // checks whether a FusionCharts swf is visible and active. 
	if(flag){
		map.dispose(); // remove a chart instance from page and memory
	}
	map.setDataXML(Data);
}
}

 

2. Please pass new and unique chartId as a parameter to the updateConnectionMap() method when you are trying to update.

 

Ref. Code:

function updateConnectionMap(Data, uniqueChartId){
var map = getMapFromId("Map1Id");
if (map.hasRendered) {
	// insert code to modify the chartId here.
	map.setDataXML(Data);
}
}

 

Hope this helps !!

 

Happy FusionCharting

Edited December 21, 2011 by Bindhu

[MarkPetty]

Thanks for the response,

 

 

but #1 actually stops the firefox browser for updating, and doesn't resolve the issue for IE, and #2 doesn't do anything.