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

Question

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

I guess when you make it invisible then that is not rendered as part of the DOM, thus, the JS Function doesn't exist. Whilst the user control refrence is actually calling that (I think) which causes the issue. Perhaps, if move you JS outside then it could help. Or try the Hidden work around — Ali, Jan 10 '18 at 22:55

score 0 · Accepted Answer · answered Mar 16 '18 at 23:30

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.

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

1 Answers1