asp.net usercontrol won't fire javascript inside updatepanel

Question

I've seen similar issues to this and answers but none seem to fix the issue.

I have a user control inside an update panel. Inside my user control I output javascript.

The javascript will not fire when triggered. If I move the javascript to the parent page outside of the usercontrol/updatepanels then it fires. This doesn't make sense to do this as I can't use this usercontrol on another page without either duplicating code...by either duplicating the entire javascript (different site) or adding references to a .js file in every page it's used on (same site). It's just less portable

I merely want to output the javascript with the control (inside the update panel).

The updatepanel is mentioned for accuracy of what I'm doing. It doesn't work even if I place the usercontrol outside of updatepanels.

Keeping it simple (This does not work for me):

USERCONTROL:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="_location.ascx.cs" Inherits="_location" %>
<script type="text/javascript">
    function test() {
        alert('Hello World!');
    }
</script>

<a href="javascript:void(0);" onclick="javascript:test();">
    Find For Me
</a>

PARENT:

<uc1:_location runat="server" ID="_location"  />

Debugging in chrome tells me "Uncaught ReferenceError: test is not defined"

If I add the javascript directly to the onclick as below, it works:

onclick="alert('Hello World!');"

And as stated above, moving the function to the parent page ALSO works.

It's as if the browser ignores the script output from the user control.

Any ideas?

Answer 1

When you have an UpdatePanel and that UpdatePanel updates it's content, it treats it's content as simple text/html (not code), it does not have any parser available to run the script and make it available for the page.

So this content,

<script type="text/javascript">
    function test() { alert('Hello World!'); }
</script>

<a href="javascript:void(0);" onclick="javascript:test();">
    Find For Me
</a>

after client side code of update panel runs and updates content of the page, the script part is not parsed - its simple text/html for the page.

This part however runs

<a href="javascript:void(0);" onclick="alert('Hello World!');">Find For Me</a>

because the parse of the onclick attribute is done when you click on it.

There are following workarounds available:

1. Move your javascript into external file
2. Move you script outside of the UpdatePanel
3. Register the script in the code behind with RegisterClientScriptBlock or alternative functions.