How do I call a javascript function in addition to a server-side callback?

Question

I have some markup like this:

<form id="ddlSelections" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />

    <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="DDL3" EventName="SelectedIndexChanged" />
        </Triggers>
        <ContentTemplate>
            <asp:DropDownList ID="DDL3" OnSelectedIndexChanged="testFunc" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

<div id="placeholder"></div>

When the drop down list DDL3 changes, a callback to testFunc is performed. I want to add an additional event handler to this drop down box that will update placeholder div. For this I am trying to use jQuery . I tried this in the head tag:

$(function () {
       $("#DDL3").click(function () {
           alert("Clicked" + $("#DDL3").val());
       });
});

but jQuery is not catching these events. I am guessing this is because ASP is perhaps over-writing the event handlers.

Is there anyway to achieve this?

EDIT: What gets rendered:

<select id="DDL3" onchange="javascript:setTimeout('__doPostBack(\'DDL3\',\'\')', 0)" name="DDL3">

Answer 1

Since it's an ASP.NET control, you need to reference it by the ClientID :

Here is the test case:

<asp:UpdatePanel ID="pnl" runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="DDL3" runat="server">
            <asp:ListItem Text="Test" Value="1"></asp:ListItem>
            <asp:ListItem Text="Test 2" Value="2"></asp:ListItem>
        </asp:DropDownList>                    
    </ContentTemplate>                
</asp:UpdatePanel>                
<div id="placeholder">I'm here</div>

There are two ways to handle the selection change:

$(function() {
    $("#<%=DDL3.ClientID%>").change(function(e) {
        $("#placeholder").html("Hello world!");
    });
});

You can use this approach too if you prefer:

$(function() {
    $("#<%=DDL3.ClientID%> option").click(function() {
        $("#placeholder").html("Hello world!");
    });
});

If neither of the above work, another solution can be found here .

Answer 2

Your " issue " is the <asp:UpdatePanel> . UpdatePanels rewrite their contents when they update, so the <select> you're binding to probably isn't the <select> you're interacting with -- even if they look the same.

You can listen to Microsoft Ajax' events -- either endRequest or pageLoaded -- after which you can bind as you were:

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {
    $('#<%= DDL3.ClientID %>').click(function () {
        alert("Clicked " + $(this).val();
    });
});

Or, use jQuery's .live or .delegate :

$('#<%= DDL3.ClientID %>').live('click', function () {
    alert("Clicked " + $(this).val());
});