How to access values set in asp.net ajax updatepanel from jquery

Question

I set values (of server controls) in an update panel via code-behind, it must be using some javascript method to set those values. if i try to access them through jquery after this, it doesn't recognize anything set by asp.net ajax

asp.net:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<asp:Button ID="Button1" runat="server" Text="Set Label From Ajax" onclick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>


</ContentTemplate>
</asp:UpdatePanel>

Code behind:

protected void Button1_Click(object sender, EventArgs e)
{
    this.Label1.Text = "Hello, world";
}

After the button is clicked and Label1 is "Hello, world" - the following gets the html control correctly, but the text is emtpy:

jQuery:

var text = $("[id$='Label1']").text();
// text = ""; should be "Hello, World"

Answer 1

Did you check what html is actually sent to the browser? Keep in mind that JQuery knows nothing of ASP.NET - just HTML (with the JavaScript of course)

Answer 2

<script type=”text/javascript”>

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(panelLoaded);

function panelLoaded(sender, args){

    var text = $("label[id*='Label1']").text();

}

</script>

This will access the event handler for the PageRequestManager instance, add a function to the pageLoaded event and call that function when an update panel has finished loading. Because you are using ajax, the jquery code only gets run at the first load of the page before the value is set. This will assign text after the UpdatePanel loads and Label1 actually has text.