Problems with forceIFrame attribute on IE8

[novito]

I have rendered some charts with the forceIframe attribute set to false, so the chart is rendered as SVG and I can add a listener whenever that SVG is clicked.  I do that because with the Iframe there is no way that I can listen for a click on all the chart (not just the elements) container.

However, when trying to use this attribute and rendering the charts on IE8, the chart is rendered within an Iframe, and therefore when I do this:

google.visualization.events.addListener(chart, 'ready', function() {

    document.getElementById('location_chart').getElementsByTagName('svg')[0].onclick = function() {

      drawCenteredChart();

    };

  });

It breaks, because there is no SVG element.  So my question is:  What would be a good solution for this?  Why is not rendering the SVG?

Thanks

[novito]

I have tried doing this:

 var iframeDoc = $('#location_chart iframe').contents().get(0);

     console.log(iframeDoc);

     $(iframeDoc).bind('click', function(event ){

      alert('hello world');

     });

But it seems is not binding correctly... Would this be a good approach?

[asgallant]

Try this:

$('#location_chart iframe').contents().find('#chartArea').click(function (event) {

    alert('hello world');

});

[novito]

I see the element in the console. I have even make sure the chart is ready, but it seems the click even is not firing.  Have you been able to reproduce this? 

[asgallant]

That should work, but I can see that it doesn't in IE.  This does:

$('#location_chart iframe').contents().find('div').click(function (event) {

    alert('hello world');

});

[novito]

Tried doing this in Chrome:

 google.visualization.events.addListener(chart, 'ready', function() {

    var location_chart_element = $('#location_chart iframe').contents().find('div');

      $(location_chart_element).click(function (event){

alert('hello world');

      })

    });

And even though I can see location_chart_element in the console log as an array of divs, the listener is not being triggered.

I don't know if I am missing something compared to what you suggested, but I have tried to isolate the chart in a single page and is happening the same.  Do you see what might I be wrong?

[asgallant]

Do you have forceIFrame set to false?  If so, the iFrame doesn't exist, so the selector doesn't find one.

Also, it seems that when working with SVG (as opposed to VML, which is what the charts use in IE < 9), you need to set the click handler on the 'svg' element, not the div, so use .find('svg') when the user is not using IE < 9, ie:

if ($.browser.msie && $.browser.version < 9) {

    var location_chart_element = $('#location_chart iframe').contents().find('div');
}

else {
    var location_chart_element = $('#location_chart iframe').contents().find('svg');
}​