RadioButtonList SelectedIndexChanged not working correctly in AJAX

[Andrew Jocelyn]

Hi

I'm using VS2005 and AJAX extensions. The SelectedIndexChanged fires when I
select ListItem TextBox2 but does not fire when I select TextBox1
afterwards. If I remove Selected="True" from the ListItem for TextBox1 the
event fires as expected. I need to have a default selected on first page
load. How do I do this?

<asp:RadioButtonList ID="RadioButtonList1" runat="server"
RepeatDirection="Horizontal"
RepeatLayout="Flow"
OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"
AutoPostBack="true">
<asp:ListItem Selected="True">TextBox1</asp:ListItem>
<asp:ListItem>TextBox2</asp:ListItem>
</asp:RadioButtonList>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RadioButtonList1"
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>

protected void RadioButtonList1_SelectedIndexChanged(object sender,
EventArgs e)
{
RadioButtonList radList = (RadioButtonList)sender;

if (radList.SelectedIndex == 0)
{
TextBox1.Visible = false;
TextBox2.Visible = true;
}
else
{
TextBox1.Visible = true;
TextBox2.Visible = false;
}
}


Thanks
Andrew

 

[Mark Moeykens]

Andrew, I may have this wrong, but from what I'm reading, you want to set a
default value for your radio buttons and have your SelectedIndexChanged event
fire when the page first loads? If so, here's what you could do:

1. In your Page_Load event, add some code that looks like this:
if (Page.IsPostBack == false)
{
// Set default values.
RadioButtonList1.SelectedIndex = 0;
RadioButtonList1_SelectedIndexChanged(sender, e);
}

2. I changed some of your code in your event handler:
protected void RadioButtonList1_SelectedIndexChanged(object sender,
EventArgs e)
{
if (RadioButtonList1.SelectedIndex == 0)
{
TextBox1.Visible = false;
TextBox2.Visible = true;
}
else
{
TextBox1.Visible = true;
TextBox2.Visible = false;
}
}

Unfortunately I don't have the AJAX extensions loaded on my computer at work
so I can't test it fully. Let us know if this helps!

Mark Moeykens

 

[Jialiang Ge [MSFT]]

Hello Andrew,

I have carefully tested your code on a computer with VS2005 and AJAX
extension 1.0, however, the SelectedIndexChanged event is fired as
expected:
when I click on <asp:ListItem Selected="True">TextBox1</asp:ListItem>, the
TextBox1 is invisible and TextBox2 shows.
When I click on <asp:ListItem>TextBox2</asp:ListItem>, the TextBox2 hide
itself and TextBox1 turns visible.
(In order to differentiate the two textboxes on the page, I set TextBox1's
text as "textbox1" and TextBox2's text as "textbox2")

I am not able to reproduce the issue on my side. Am I misunderstanding the
issue or can I send my test project to you (please let me know you email
address by sending a mail to (e-mail address removed), remove
'nospam.'), and see if it can work on your side? Have you ever debugged the
site, set a debug break in RadioButtonList1_SelectedIndexChanged method,
and see if it's stopped every time you changed the radio button list
selection?

Regards,
Jialiang Ge ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
For MSDN subscribers whose posts are left unanswered, please check this
document: http://blogs.msdn.com/msdnts/pages/postingAlias.aspx

Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications. If you are using Outlook Express/Windows Mail, please make sure
you clear the check box "Tools/Options/Read: Get 300 headers at a time" to
see your reply promptly.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Jialiang Ge [MSFT]]

Hello,

Thanks for the sample code. I have reproduced the issue on my side.

The underlying reason of the behavior when Selected="True" is attached to
one ListItem is:
-------------------------------------------
If we do not use AJAX:
The web page applies a full post back when the selected item is changed
(e.g. to 'TextBox2') in the RadioButtonList. After that, if we "View
Source" of the page, we will find that the checked="checked" is attached to
the currently selected item (e.g. 'TextBox2') <input
id="RadioButtonList1_0" type="radio" name="RadioButtonList1"
value="TextBox1"
onclick="javascript:setTimeout('__doPostBack(\'RadioButtonList1$0\',\'\')',
0)" /> <input id="RadioButtonList1_1" type="radio" name="RadioButtonList1"
value="TextBox2" checked="checked" /> When we click on the first radio
button again (onclick), it call __doPostBack, and reset the
checked="checked" to the first radio button.
Therefore, the whole process worked as expected.

--------------------------------------------
If we use AJAX and Selected="True" is set on the first radio button:
The selected index of the radio button list is specified in its declaration
or initialization, because in ajax, we do not have a full post back, after
we change the selected item (e.g. to 'TextBox2'), we still have
checked="checked" on the first radio button:
<input id="RadioButtonList1_0" type="radio" name="RadioButtonList1"
value="TextBox1" checked="checked" /><label
for="RadioButtonList1_0">TextBox1</label>
<input id="RadioButtonList1_1" type="radio" name="RadioButtonList1"
value="TextBox2"
onclick="javascript:setTimeout('__doPostBack(\'RadioButtonList1$1\',\'\')',
0)" /><label for="RadioButtonList1_1">TextBox2</label>
Therefore, when we click on the first radio button again, no post back is
done, and no effect is reflected on the page.

--------------------------------------------
In order to work-around it, we need to remove the Selected="True"
attribute, and set the default selection of the radio buttons with client
side javascript code:
(I have tested Mark's suggestion of setting the selected index in the code
behind. Thank you, Mark, for the suggestion. However, it does not work for
the problem) We can put the following javascript code at the bottom of your
aspx page:

<script language="JavaScript" type="text/javascript">
document.getElementById('RadioButtonList1_0').checked = true; </script>
Where 'RadioButtonList1_0 is the client side ID of the radio button we need
to select by default. We can "View Source" and find its client ID.

Please have a try and let me know if it works for you.

If you have any other concern or questions, please feel free to let me know.
Regards,
Jialiang Ge ([email protected], remove 'online.')
Microsoft Online Community Support

=================================================
When responding to posts, please "Reply to Group" via your newsreader
so that others may learn and benefit from your issue.
=================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Andrew Jocelyn]

Hi Jialiang

Thanks for the explaination and suggestion. The application works fine now.

Thanks
Andrew

 

[jfposadas]

AJAX UpdatePanel and Radiobuttonlist

Hi, I've a problem with the updatepanel and a set of 3 radiobuttonlist. The panel/radiobuttons are posting back, but in the code behind i manipulate the selection of the non-selectionchanged radiobuttons and it is not reflecting the change in the clent side. When I debug it it goes tru the right case scenario. Any idea? Below is the code


<asp:radiobuttonlist id="Ever_Smoked" runat='server' CssClass='RadioButton' RepeatColumns='2'
RepeatDirection='Horizontal' AutoPostBack="true" OnSelectedIndexChanged ="Verify_SS_Selection" >
<asp:ListItem Value="1">Yes</asp:ListItem><asp:ListItem Value="0" >No</asp:ListItem></asp:radiobuttonlist>

<asp:radiobuttonlist id="Current_Smoker" runat='server' CssClass='RadioButton' OnSelectedIndexChanged ="Verify_SS_Selection"
RepeatColumns='2' RepeatDirection='Horizontal' AutoPostBack="True" Width="98px"><asp:ListItem Value="1">Yes</asp:ListItem><asp:ListItem Value="0" >No</asp:ListItem></asp:radiobuttonlist>

<asp:radiobuttonlist id="Former_Smoker" runat='server' CssClass='RadioButton' OnSelectedIndexChanged ="Verify_SS_Selection"
RepeatColumns='2' RepeatDirection='Horizontal' AutoPostBack="True"><asp:ListItem Value="1">Yes</asp:ListItem><asp:ListItem Value="0" >No</asp:ListItem></asp:radiobuttonlist>



<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"
ChildrenAsTriggers="False">
<Triggers >
<asp:AsyncPostBackTrigger ControlID ="Ever_Smoked" EventName ="SelectedIndexChanged" />
<asp:AsyncPostBackTrigger ControlID ="Former_Smoker" EventName ="SelectedIndexChanged" />
<asp:AsyncPostBackTrigger ControlID ="Current_Smoker" EventName ="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>



----------------- CODE BEHIND ---------------------


Sub Verify_SS_Selection(ByVal sender As Object, ByVal e As System.EventArgs) Handles Ever_Smoked.SelectedIndexChanged, Current_Smoker.SelectedIndexChanged


Select Case sender.id.ToString

Case "Ever_Smoked"
With Ever_Smoked
If .SelectedValue = 0 Then
Former_Smoker.SelectedIndex = 1
Former_Smoker.SelectedValue = 0
Current_Smoker.SelectedValue = 0
Else
Former_Smoker.SelectedIndex = -1
Current_Smoker.SelectedIndex = -1
End If
End With

Case "Current_Smoker"
If Current_Smoker.SelectedValue = 1 Then
Ever_Smoked.SelectedIndex = 0
Former_Smoker.SelectedValue = 0
End If

Case "Former_Smoker"

If Former_Smoker.SelectedValue = 1 Then
Ever_Smoked.SelectedIndex = 0
Current_Smoker.SelectedIndex = 1
Else
Ever_Smoked.SelectedIndex = 0
Current_Smoker.SelectedIndex = 1
End If



End Select


End Sub