在updatePanel部分回发之后，客户端pageLoad无法获得新的输入值

Question

I'm having trouble reading a server-side set value from an input, after an UpdatePanel partial postback

This is the simplest example I can use to reproduce the issue:

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

        <asp:Panel ID="pnlSrc" runat="server">
            <asp:TextBox ID="txtInput" runat="server" AutoPostBack="true" 
                 OnTextChanged="txtInput_TextChanged"></asp:TextBox>
        </asp:Panel>

        <asp:Panel ID="pnlDst" runat="server">
            <asp:TextBox ID="txtOutput" runat="server" />
            <a id="lnkTest" href="#" onclick="pageLoad();">check txtOutput</a>
        </asp:Panel>

    </ContentTemplate>
</asp:UpdatePanel>

<script type="text/javascript">

    var txtOutput = $('#<%=txtOutput.ClientID%>');

    function pageLoad() {    
        var exe = $(txtOutput).text();    
        alert(exe);
    }

</script>

Server side, I'm just putting txtInput text reversed into txtOutput:

protected void txtInput_TextChanged(object sender, EventArgs e)
{
    var txt = string.Empty;

    for (int i = txtInput.Text.Length - 1; i >= 0; i--)
    {
        txt += txtInput.Text[i];
    }

    txtOutput.Text = txt;
}

Client side, pageLoad() is executed after every partial postback, but txtOutput value is never updated: it's always the same of the first load (empty, in this case)

I tried also with getInstance().add_endRequest but no success

I would expect that 'exe' contains the actual value of txtOutput.Text, set server side, but it's not so

Clicking lnkTest, the same function is invoked with the expected result

Sorry if I'm doing something wrong, this is my first post

Thank you

Answer 1

I see a couple of issues.

First, you are doing the jQuery selector twice. Once when setting the var txtOutput and then again in the pageLoad method when setting exe. You only need one. The example below eliminates the second - you could go the other way and have txtOutput be just the control ID instead of the actual control object.

Second, you need to reference the value of the 1st element of the selected object.

<script type="text/javascript">

    var txtOutput = $('#<%=txtOutput.ClientID%>');

    function pageLoad() {
        var exe = txtOutput[0].value;
        alert(exe);
    }

</script>

Answer 2

your script should be like this

 <script type="text/javascript">
        function pageLoad() {
            alert($('#txtOutput').val());
        }
    </script>

Answer 3

@Karthik Ganesan put me in the right direction, I'll report the final code for convenience of others

function pageLoad() {

    var txtOutput = $('#<%=txtOutput.ClientID%>');
    var exe = $(txtOutput).val();

    alert(exe);
}

only if var txtOutput = $('#<%=txtOutput.ClientID%>') is inside the pageLoad body , it works even when invoked by ajax's lifecycle; I still don't get why, though

You can, of course, use static selectors like '#txtOutput', depending on clientIdMode and fx version, and leave it out