AJAX and 'Object doesn't support this property or...'

[zsoltiii]

Hi,

 

 

 

I know that this javascript error is common and has been answered many times in this forum, but my case is slightly different and someone may be able to help.

 

 

 

I'm using Fusioncharts' PHP API to render charts (the JS way), and also got an export button on the page which calls the JS function ExportMyChart() exactly as described here (https://www.cre8ivewebsites.com/js/3rdparty/PowerCharts/Contents/ECJavaScript.html).

 

 

 

It's all working like a charm in every browser when there is a single chart generated on a normal php page.

 

 

 

On the other hand, I've got another page, a dashboard with a number of charts loaded into div containers with AJAX. The AJAX response ($HTML) is the generated chart which is:

 

ob_start();    

DashboardgraphimgFC(parameters); //this is where the FusionCharts PHP API is generating the chart with $FC->renderChart(false, true);

$out1 = ob_get_contents();

ob_end_clean();

$HTML .= $out1;

echo $HTML;

 

 

 

The charts are displayed fine and you can export with the 'right-click on the chart' method.

 

 

 

When I call the same ExportMyChart_".$widget_id."() function on these charts (via clicking on individual buttons referring to a single chart), I get the error 'Object doesn't support this property or method' error on hasRendered() and exportChart() in Internet Explorer 6/7/8. Interesting thing is that it's working fine on Firefox.

 

 

 

I've went through all the suggestions in other topics relating to the same error message, most notably:

 

 

 

"1. Please make sure that you're using FusionCharts v3 charts, as the JavaScript API was introduced in this version. To check whether you're using v3, just match your SWF name with the names listed at http://www.fusioncharts.com/Docs/Contents/ChartList.html

 

2. Please ensure that you've set registerWithJS flag to 1. For more information on how to do this, please see http://www.fusioncharts.com/Docs/Contents/JS_Overview.html. Basically, you need to set the last parameter in the following code to 1:

 

var chart1 = new FusionCharts("FusionCharts/Column3D.swf", "chart1Id", "400", "300", "0", "1");

 

3. Please make sure that you're not placing the chart inside a FORM element. When the chart is inside a FORM element, the browser cannot access the chart using DOM.

 

4. Please make sure that you're not calling the setDataURL/setDataXML method before the chart has loaded and rendered. You need to use FC_Rendered function of chart to track the loading of chart as explained at http://www.fusioncharts.com/Docs/Contents/JS_Overview.html. The page's body onLoad event would NOT work, as the chart starts loading after the body has finished loading.

 

5. Please make sure that you're NOT running the chart from local file system (C: , D:). Instead, run the chart from behind a server (localhost - IIS, Apache etc.). This is because the Flash Player security settings do not allow Chart to JavaScript interaction, unless otherwise specifically set. "

 

 

 

Even when I try to run the export in FC_Rendered(DOMId), the same error comes up in IE.

 

I tried to move the ExportMyChart() and FC_Rendered() functions out of the AJAX response and hard code it into the dashboard page with a singe chart on the dashboard but still the same error.

 

The server is running on localhost and using FusionCharts v3.1.

 

There is no other div called the same as the chart object/container and there is no form tag either.

 

 

 

Can it be that the hasRendered() and exportChart() functions (which are spit out by the swf mysteriously, right?) are out of scope in IE when the flash object is generated by an AJAX call and then loaded on to the page as a HTML response?

 

 

 

I would really appreciate some help or any idea on this,

 

thank you in advance,

 

Zsolt

[zsoltiii]

Right, I've found the solution, it was a real pain to figure out. Huh!

 

 

 

So, the widgets on the dashboard were filled by a jQuery call .load().

 

FusionCharts didn't like this when running in IE, so had to try something that was mentioned in the forum before: proper jQuery ajax call with a callback function, settimeout and innerHTML insert.

 

 

 

Instead of

 

-------

 

jQuery('#widget_'+this.id).load(url);

 

-------

 

had to use:

 

-------

 

...

 

var ajaxurl = url;

 

getWidgetHTMLCall(ajaxurl, function(html)

 

{

 

setTimeout(function ()

 

{

 

...

 

$(el).innerHTML = html;

 

}, 3);

 

});

 

}

 

 

 

function getWidgetHTMLCall(ajaxurl, callback)

 

{

 

jQuery.ajax({

 

url: ajaxurl,

 

cache: false,

 

async: false,

 

dataType: "html",

 

success: callback

 

});

 

}

 

 

 

-------

Edited August 19, 2010 by Guest

[Sanjukta]

Hi,

Glad that your issue is resolved.

Thanks for sharing the idea.

Happy FusionCharting!