RadioButtonList SelectedIndexChanged not working correctly in AJAX

Discussion in 'ASP .Net' started by Andrew Jocelyn, Feb 6, 2008.

  1. 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
    Andrew Jocelyn, Feb 6, 2008
    #1
    1. Advertising

  2. 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


    "Andrew Jocelyn" wrote:

    > 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, Feb 6, 2008
    #2
    1. Advertising

  3. 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 , 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 (, 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], Feb 7, 2008
    #3
  4. 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 (, 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.
    Jialiang Ge [MSFT], Feb 8, 2008
    #4
  5. Hi Jialiang

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

    Thanks
    Andrew
    Andrew Jocelyn, Feb 11, 2008
    #5
  6. Andrew Jocelyn

    jfposadas

    Joined:
    May 12, 2008
    Messages:
    1
    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
    jfposadas, May 12, 2008
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mervin Williams

    RadioButtonList SelectedIndexChanged() not firing

    Mervin Williams, May 4, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    4,814
    Mervin Williams
    May 5, 2004
  2. Luis Esteban Valencia
    Replies:
    0
    Views:
    703
    Luis Esteban Valencia
    Jan 5, 2005
  3. Nathan Sokalski
    Replies:
    0
    Views:
    812
    Nathan Sokalski
    Oct 25, 2007
  4. Mervin Williams

    RadioButtonList SelectedIndexChanged() not firing

    Mervin Williams, May 4, 2004, in forum: ASP .Net Web Controls
    Replies:
    2
    Views:
    479
    DOKOM
    May 6, 2004
  5. Cath
    Replies:
    1
    Views:
    216
Loading...

Share This Page