ASP.Net AJAX UpdatePanel Fails to Trigger SelectedIndexChanged Event

cjo30080 picture cjo30080 · Oct 11, 2012 · Viewed 8.7k times · Source

I have an ASP.Net RadioButtonList control with AutoPostBack set to true. I also have an OnSelectedIndexChanged function that is called whenever a user changes the selection. Finally, the user is required to provide the information requested for this control, so I have a default selection when the user arrives on the page--

<asp:RadioButtonList ID="rblHighestDegree" runat="server" AutoPostBack="true"
        onselectedindexchanged="rblHighestDegree_SelectedIndexChanged">
   <asp:listitem Runat="server" Text="Master's Degree" Selected="True" />
   <asp:listitem Runat="server" Text="Doctorate" />
</asp:RadioButtonList>

In the code sample above, when the user switches from the default selection (e.g., "Master's Degree") to a different option (e.g., "Doctorate"), then the SelectedIndexChanged event is triggered. Then, if the user changes his mind, and subsequently selects the original default option, the SelectedIndexChanged event is triggered again. This works precisely as intended and expected.

I have a second control that I enable or disable, depending on the selection above, in the code-behind...

<asp:ScriptManager ID="scriptmanager1" runat="server" />
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<asp:RadioButtonList ID="rdlYearsOfStudy" runat="server" Enabled="false">
<asp:listitem Runat="server" Text="Less than 3 years" />
<asp:listitem Runat="server" Text="3 - 4 years" />
<asp:listitem Runat="server" Text="5 - 6 years" />
 </asp:RadioButtonList>
</ContentTemplate>
<Triggers>
  <asp:AsyncPostBackTrigger ControlID="rblHighestDegree" EventName="SelectedIndexChanged" /> 
</Triggers>
</asp:UpdatePanel>

The problem I'm having only occurs only after I placed this second control within an ASP.Net AJAX UpdatePanel to enable an asynchronous postback (as shown above). Once I did this, the original RadioButtonList control will only postback when I select a ListItem that was not selected by default when the user arrived on the page. If the user subsequently selects the original default selection, the postback does not occur.

To clarify, if I postback without placing the applicable second control in an ASP.Net AJAX UpdatePanel, then SelectedIndexChanged works no matter which RadioButtonList ListItem the user selects. On the other hand, after I place a control inside an UpdatePanel to apply the AsyncPostBackTrigger, then the postback only happens for selections of non-default ListItems.

More information that might be relevant is that I'm coding with Microsoft Visual Studio 2008, and the UpdatePanel control that I'm using is part of the Microsoft AJAX Libary (not the ASP.NET AJAX Control Toolkit).

I would appreciate any insight with how to get ASP.Net AJAX to work such that I can get the SelectedIndexChanged event to fire when a user selects either the default or non-default ListItems in the RadioButtonList. For the record, I tried setting the RadioButtonList default selection in the page_load event, but it didn't help.

Thanks in advance for any and all help!

Answer

Jeff Shepler picture Jeff Shepler · Oct 19, 2012

I had the same issue and found that the generated HTML did not have a click handler on the default selection. The other radio buttons in the list all have click handlers to call __doPostBack. So I added this bit of jQuery:

$("#rbl input[checked]").click(function (e)
{
    var id = e.target.id.replace('_', '$');
    setTimeout(function () { __doPostBack(id, ""); }, 0);
});

However, even though the ajax call was now working as expected, the server-side code was still not executing the selectedIndexChanged handler.

Thinking that it might be because the server knows what the default selection is (was) and sees that the posted selection is the same and so thinks the selected index was not changed and so didn't execute the handler.

Then I thought that when one of the other radios was selected, the server should have remembered that through the viewstate. Which caused me to remember that I had viewstatemode="Disabled" on the container of my radiobuttonlist. So I set viewstatemode="Enabled" on the radiobuttonlist and it's now working as expected.