Get ASPNET Control Value Using jQuery and Update Panel

Question

I have an asp.net button and an asp.net label in an update panel and when I click the button it updates the text of the label in the code behind. However when I try to get the updated value it just returns an empty value.

How do I get the updated value after the asynchronous postback has completed. I have included my code below.

Many thanks

<script type="text/javascript">
    Sys.Application.add_init(function() {

        // Add ajax request handlers
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);

        // Raised after asynchronous postback has completed
        function EndRequest(sender, args) {
            var path = $('#<%=lblPath.ClientID %>').val();
            alert(path);
        }
    });
</script>

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
    <ContentTemplate>
        <asp:Panel ID="Panel1" runat="server">
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" 
                    OnClick="Submit_Click" UseSubmitBehavior="false" />
        </asp:Panel>
        <asp:Label ID="lblPath" runat="server"></asp:Label>
    </ContentTemplate>
</asp:UpdatePanel>

Answer 1

It seems you are using the .val() method incorrectly. The .val() method is primarily used to get the values of form elements.

Instead of .val() use .html()

var path = $('#<%=lblPath.ClientID %>').html();

or .text()

var path = $('#<%=lblPath.ClientID %>').text();