How to make a JavaScript function available in a invisible user control

I have a JavaScript code in a user control, and it is working fine if the user control is visible at start.

Then, I add this user control to a panel on a page -> still working fine.

Next, I add this user control to a panel on a page and make panel invisible. (either set in aspx file or Page_Load in csfile)

The page will load with error: "JavaScript runtime error: 'myFunction' is undefined"

It is for OnClientUploadComplete from a AsyncFileUpload, so i can't pass any parameter.

The only work around i found is make the panel "hidden" instead of visible:"False" in the pages have this user control.

SomePanel.Attributes.Add("style", "visibility:hidden");

But this way will need to modify all pages using this user control orz.

Any thoughts would be much appreciated.

JavaScript code:

<script type="text/javascript">
    function myFunction() {
        var ButtonID = '<%=btnAddFile.ClientID%>';
        document.getElementById(ButtonID).click(); 
    }
</script>

It is used for "OnClientUploadComplete" in a AsyncFileUpload

  <cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnUploadedComplete="AsyncFileUpload1_UploadedComplete" OnClientUploadComplete="myFunction" OnUploadedFileError="AsyncFileUpload1_UploadedFileError" />

I will have issue with getting the ClientId if i move the JavaScript to master page or else where. I'd say it is best to handle everything inside the user control ....if possible

Link

Writing javascript in Page_PreRender will do the job.

At this stage, ClientID is ready.

The ClientID can be passed directly.

There is no need to use reference (<%=btnAddFile.ClientID%>) so the user control can be also used in a repeater or gridview.