ASP.NET controls won’t see value changes made client side

  ajax,, javascript, telerik,

I have the following code:

function OnClientLoad(sender, args) {

    $telerik.$(sender.get_inputElement()).on('keyup', function (e) {
        var autoComplete = $find("<%= RadAutoCompleteBox1.ClientID %>");
        var contents = autoComplete.get_inputElement();
        var oe = contents.value
        document.getElementById('hdnParameter').value = oe;

<telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox1" ClientID="RadAutoCompleteBox1" 
    DataSourceID="SqlDataSource1" DataTextField="edesc" DataValueField="ecode" InputType="Token" Width="100%" Visible="true"
    AllowCustomEntry = "false"

<asp:SqlDataSource runat="server" ID="SqlDataSource1" CancelSelectOnNullParameter="False"
ConnectionString="<%$ Myconnectionstring %>"
SelectCommand="exec MyStoredProcedure @parameter">
    <asp:ControlParameter ControlID="hdnParameter" Name="parameter" PropertyName="Value" />

<asp:hiddenfield id="hdnParameter" runat="server" ></asp:hiddenfield>

the SQLDataSource is used to fill the Telerik Ajax AutoCompleteBox dropdown list. So the idea is that when user types in the AutoCompleteBox the value typed be used to feedback the SQLDataSource itself. It’s not hard to do as I use the keyup event to capture what is typed and to send it to hidden field value so it SHOULD do the trick.

The problem is that because SqlDataSource and hidden field are runat="server" the updates made in client side will only be seen in client side: if I console.log the value of the hidden field the value is there, but the controls cannot see this. If instead I update the hidden field from code behind the controls see the changes without any problem.

There is a way of working around this?


Source: Ask Javascript Questions