Jquery: Trigger Embedded Object click by clicking a Div?

Question

Hi there!

I am trying to trigger an embedded object click by clicking on another div,

this is the code ive tried:

$('.action-upload').livequery(function()
{
 $(this).click(function()
 {
     $('#button').trigger('click');

 });

}); 

this is the code that comes up for the embedded object in firebug:

<object width="114" height="29" class="swfupload" data="js/swfupload/swfupload.swf?preventswfcaching=1285336584999" type="application/x-shockwave-flash" id="SWFUpload_0">(parameters)</object>

this is what the code is like in my html document

<input type="button" id="button" />

im not sure if im supposed to be trying to trigger the form button or the object, im guessing the object as it doesnt appear as a button when the page renders, it appears as an embedded object?

i used the code on a normal input button which works, but when i apply it to this it doesnt

anyone got any ideas how i would do this?

( the actions-upload div is just a normal div with a bg image )

thanks for your time ;)

edited for more info:

here is the script i use in the html

$('.action-upload').live(function()
{
    $(this).click(function()
    {
        $('#button').trigger('click');
    });         
});

here is the html:

<div class="action-upload">(bg image)</div>

<div id="swfupload-control">

<input type="button" id="button" />

    <ul id="log"></ul>

</div>

and this is what replaces the form button in the browser (got this from firebug)

<object width="114" height="29" class="swfupload" data="js/swfupload/swfupload.swf?preventswfcaching=1285348248401" type="application/x-shockwave-flash" id="SWFUpload_0"><param value="window" name="wmode"><param value="js/swfupload/swfupload.swf?preventswfcaching=1285348248401" name="movie"><param value="high" name="quality"><param value="false" name="menu"><param value="always" name="allowScriptAccess"><param value="movieName=SWFUpload_0&amp;uploadURL=%2Fupload-file.php&amp;useQueryString=false&amp;requeueOnError=false&amp;httpSuccess=&amp;assumeSuccessTimeout=0&amp;params=&amp;filePostName=uploadfile&amp;fileTypes=*.jpg%3B*.png%3B*.gif%3B*.pdf%3B*.html%3B*.ai%3B&amp;fileTypesDescription=Image%20files&amp;fileSizeLimit=5000&amp;fileUploadLimit=10&amp;fileQueueLimit=0&amp;debugEnabled=false&amp;buttonImageURL=%2Fjs%2Fswfupload%2Fwdp_buttons_upload_114x29.png&amp;buttonWidth=114&amp;buttonHeight=29&amp;buttonText=&amp;buttonTextTopPadding=0&amp;buttonTextLeftPadding=0&amp;buttonTextStyle=color%3A%20%23000000%3B%20font-size%3A%2016pt%3B&amp;buttonAction=-110&amp;buttonDisabled=false&amp;buttonCursor=-1" name="flashvars"></object>

i am using swfupload and am trying to trigger the embedded object "click" from the actions-upload div

Answer 1

If I understand correctly, you are trying to have an embedded Flash object trigger a click event on an HTML button (<input type="button" ...>).

You will not be able to accomplish this using jQuery alone. Clicks on the Flash object are handled by the Flash object. To do what you're asking, you would need to modify the Flash source to do an external call to the JavaScript. How you accomplish this is largely dependent on what version of Flash/ActionScript you're using to build the file.

ActionScript 3 has an ExternalInterface class which you can use to call external JavaScript functions. In the ActionScript 3 file, it would look something like the following...

Inside the element's click handler, call a JavaScript anonymous function:

ExternalInterface.call("function(){$('#button').trigger('click');}");

If you don't control the Flash object yourself, you may not be able to do what you're trying to do.