Question

I’m developing in Javascript with jQuery, using Chrome 23.0.1271.97. I have a Flex <object>, The HTML is as follows:

<div id="chartdiv" style="display:none;">
<object type="application/x-shockwave-flash" id="barchart" data="barchart.swf" style="width:100%;height:100%;">
<param name="movie" value="barchart.swf" />
<param name="quality" value="high" />
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
</object>
</div>

The div is normally hidden, but the object is initialized onLoad anyway. However, when the app is loaded, then this div is shown and everything works. The problem is if it is, from that point, hidden again (just hidden, like $div.hide(), not uninitialized) then later reshown, I cannot access the Flex objects methods.

I get Object #<HTMLObjectElement> has no method 'blah'. It appears to have been modified, but I’m not sure what’s causing it.

So what’s changing? Good question. On a successful load, the object works and looks like this in the console:

<object type=​"application/​x-shockwave-flash" id=​"barchart" data=​"barchart.swf" style=​"width:​100%;​height:​100%;​">​
</object>​

The object looks like this on an unsuccessful attempt (after showing, hiding, and coming back):

<object type=​"application/​x-shockwave-flash" id=​"barchart" data=​"barchart.swf" style=​"width:​100%;​height:​100%;​">​
<param name=​"movie" value=​"barchart.swf">​
<param name=​"quality" value=​"high">​
<param name=​"allowScriptAccess" value=​"always">​
<param name=​"wmode" value=​"transparent">​
</object>​

Which makes me thing maybe I am looking in the wrong place. I’ve stepped through my front end Javascript code, there don’t seem to be any calls to modify the object, other than hiding it via jQuery. I’m told the Flex object doesn’t know if it’s shown or not. Before I ask to see the code I want to be sure I’m on the right track.

Answer 1

I’ve been searching and it seems the flash object gets reset when hidden.

So my solution is to test the jQuery/DOM object, and to see if the method is defined:

function isFlashWorking()
{
    return ($chart && chart.blah)
}

Where blah is a known method in the object.