Having trouble with Flash, Javascript and JQuery

Question

I'm using JQuery with the jQuery flash plugin and trying to send a JS call back to the flash, I keep running into "xxx is not a function" so apparently something is off. I'm new to JQuery and very new to this jquery flash plugin and just can't quite wrap my head around what I am doing wrong.

Here's where I'm lading up the flash:

<div id="tagimgback">
<script language="javascript">
$(document).ready(function(){
$('#tagflash').flash(
    {
      src: 'tagflash',
      width: 200,
      height: 200,
      flashvars: {theYear:'2010',theTagNumber:'123'}
    },
    { version: 8 }
);

});
</script>
</div>

And here's where I'm trying to call it:

$("#tagflash").gotoNewFrame(theTagNumber);

gotoNewFrame is an AS function within my flash. I know the function works as I've been able to test it prior to bringing jQuery into the mix.

Answer 1

$('#tagflash') returns a jQuery object set, rather than your element.

If you want to call a custom method on your object (instead of a method supported by the jQuery object), I think you need to first get your object via a call to the jQuery object Get method, like such:

var flashWrapper = $('#tagflash object');  // returns a jQuery object set
var flashObject = flashWrapper.get(0);     // should return your flash element object
flashObject.gotoNewFrame(theTagNumber);

Note that it looks like the jQuery Flash plugin injects an Object tag into the target div, so you actually need to use #tagflash object as your selector to access the flash object.

UPDATE: Make sure that you have published the method via a call to the ExternalInterface class in your action script too:

ExternalInterface.addCallback("gotoNewFrame", callFromJavaScript);

If all you are trying to do is call a method when your flash movie first loads, why not bind to the onLoad event and call gotoNewFrame within your action script? You've just passed the tagNumber in as a parameter when you called the flash method, so the value is already available..

Answer 2

Assuming #tagflash really exists (and you don't mean #tagimgback instead) you should try this.

document.getElementById("tagflash").gotoNewFrame(theTagNumber);

No need for jQuery here. As $("#tagflash") returns a jQuery object (wrapper around the real dom element) which is an unneeded wrapping here that only costs ;) cpu-time