HiddenField.ValueChanged Event not firing when changed from Javascript

Question

UPDATE I moved the Javascript to the ASPX site instead, and added a postback function for it. Now it works. Thanks to @orgtigger and especially @lucidgold for spending their time helping me!

Here is the update code that works!

<script type="text/javascript">
    function changevalue(katoid) {
        $('#<%=txtboxchosenkat.ClientID%>').val(katoid);
        __doPostBack('<%= updpnlgridview.ClientID %>', '');
    }
</script>

Code:

<asp:UpdatePanel ID="updpnlgridview" runat="server" UpdateMode="Conditional">        
    <ContentTemplate>
        <asp:TextBox ID="txtboxchosenkat" style="display:none;" runat="server" OnTextChanged="txtboxchosenkat_TextChanged" AutoPostBack="true"></asp:TextBox>
                <asp:GridView ID="gridview" runat="server"></asp:GridView>
    </ContentTemplate>
</asp:UpdatePane

Code-behind:

protected void hidfldchosenkat_ValueChanged(object sender, EventArgs e)
{
    SqlConnection cn2 = new SqlConnection("Server=**,***,***,**;Database=******;
      User Id=******;Password=******;");
    SqlCommand cmd2 = new SqlCommand("SELECT * FROM tblProducts where KatID='" +
      txtboxchosenkat.Text + "'", cn2);
    SqlDataAdapter da2 = new SqlDataAdapter(cmd2);

    da2.SelectCommand.CommandText = cmd2.CommandText.ToString();
    DataTable dt = new DataTable();
    da2.Fill(dt);

    gridview.DataSource = dt.DefaultView;
    gridview.DataBind();
}

The links (only part of code that makes links):

  string line = String.Format("<li><a href='#' onclick='changevalue(" + pid + ");'>{0}", 
  menuText + "</a>");

Old Post I need to update a GridView based on the value of a HiddenField. I am currently using a button to populate the GridView, but would like to do it automaticaly as soon as the value in the HiddenField changes.

But when I change the value with a javascript, then event doesn't fire.

(Same thing also happens in case of a TextBox and its OnTextChanged event.)

Not sure if this is way it's meant to work.

Answer 1

A Hidden field will not produce a postback (there is no AutoPostBack property), which means no postback will happen when the value of the hidden field has changed. However, when there is ANY postback from the page then OnValueChangd event will execute if a hidden field value has changed.

So you should try the following ideas:

1) Update your JavaScript for changevalue as follows:

function changevalue(katoid)
{
    document.getElementById('" + hidfldchosenkat.ClientID + "').value=katoid;
    _doPostBack();  // this will force a PostBack which will trigger ServerSide OnValueChange
}

---

2) Change your HiddenField to a TextBox but set the Style="display:none;" and set AutoPostBack="true":

<asp:TextBox runat="server" ID="hidfldchosenkat" 
             Value="" Style="display:none;" 
             AutoPostBack="true" OnTextChanged="hidfldchosenkat_TextChanged">
</asp:TextBox>

This example works great for me:

JavaScript:

function changevalue()
{
    $('#<%=hidfldchosenkat.ClientID%>').val("hi"); 
}

ASPX Code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:TextBox ID="hidfldchosenkat" runat="server" AutoPostBack="true" 
        ontextchanged="hidfldchosenkat_TextChanged"></asp:TextBox>
        <asp:Button ID="Button1"
        runat="server" Text="Button" OnClientClick="changevalue()" />
    </ContentTemplate>
</asp:UpdatePanel>

C# Code-Behind:

protected void hidfldchosenkat_TextChanged(object sender, EventArgs e)
{
    string x = "hi"; // this fires when I put a debug-point here.
}

---

Your issue could be with:

document.getElementById('" + hidfldchosenkat.ClientID + "').value=katoid

You may want to try:

$('#<%=hidfldchosenkat.ClientID%>').val(katoid);

Also you should PUT changevalue() inside your ASPX JavaScript tags and not register it for every LinkButton.... so instead try the following:

protected void lagerstyringgridview_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
       // Assuming the LinkButtons are on the FIRST column:
        LinkButton lb = (LinkButton)e.Row.Cells[0].Controls[0];
        if (lb != null)
            lb.Attributes.Add("onClick", "javascript:return changevalue(this);");
    }
}

Answer 2

You can have any event fire by doing a __doPostBack call with JavaScript. Here is an example of how I used this to allow me to send a hiddenfield value server side:

ASPX

<asp:HiddenField runat="server" ID="hfStartDate" ClientIDMode="Static" OnValueChanged="Date_ValueChanged" />

JavaScript

$('#hfStartDate').val('send this');
__doPostBack('hfStartDate');

This will call the OnValueChanged event and cause a postback. You can also set this is a trigger for an update panel if you would like to do a partial postback.