AS3 ExternalInterface call using jquery

Question

I'm calling into a flash app embedded in a html page using the ExternalInterface. The following code works fine (I'm using a button to test):

$(document).ready(function(){
    $("#button").click(function(){
        var app = document.getElementById('ApplicationID')
        console.debug(app)
        app.pageUnloading()
    })
})

So this calls into the flash app fine and prints:

<embed id="ApplicationID" width="600" height="400" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" allowscriptaccess="sameDomain" name="FlexMoeders" bgcolor="#cccccc" quality="high" src="ApplicationID.swf">

But when I use the jquery $# method of getting an element by id, I receive a different object back:

$(document).ready(function(){
    $("#button").click(function(){
        var app = $("#ApplicationID")
        console.debug(app)
        app.pageUnloading()
    })
})

When I use this I'm told:

app.pageUnloaded is not a function

and the following is printed:

[embed#ApplicationID]

I have also tried:

var app = $("#ApplicationID").val()

var app = $("#ApplicationID").get(0)

But still no success. Does anyone have any ideas here?

Answer 1

When you use $("#ApplicationID") you will get back a jQuery object.

That's why it doesn't work. But $("#ApplicationID").get(0) actually should work.

Answer 2

var app = $('#ApplicationID')[0]

or

var app = $('#ApplicationID').get(0)

should do the same thing as

var app = document.getElementById('ApplicationID')