954,561 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Handling RadioButtonList SelectedIndexChanged event in ajaxToolkit ModalPopupExtender

In my form I am using a AjaxToolkit ModalPopupExtender. The PopupControlId has been set to a panel which has a RadioButtonList and a dropdownlist.The panel which pops up is something like this:

<asp:Panel ID="PopUpWindowPanel" runat="server" Visible="false" BorderStyle="Solid">
                <table cellpadding="2" cellspacing="0" width="100%" border="0" class="dataTbl">
                    <tr>
                        <td class="left">
                            <asp:RadioButtonList ID="RdBtnLstSortOptions" runat="server"  onclientclick="pageLoad();">
                                <asp:ListItem Text="No change." Selected="True"
                                    Value="None"></asp:ListItem>
                                <asp:ListItem Text="Some Change."
                                    Value="Existing"></asp:ListItem>
                            </asp:RadioButtonList>
                        </td>
                    </tr>
                    <tr>
                        <td class="left">
                            <asp:Label ID="lblList" runat="server">List:</asp:Label>&nbsp;
                            <asp:DropDownList ID="ddlList" runat="server" Visible="false">
                            </asp:DropDownList>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="3">
                            <div class="divBtn">
                                <asp:LinkButton ID="btnDone" class="button" runat="server" OnClick="btnDone_Click">OK</asp:LinkButton>&nbsp;
                                <asp:LinkButton ID="btnCloseProfile" class="button" runat="server">Cancel</asp:LinkButton>
                            </div>
                        </td>
                    </tr>
                </table>
            </asp:Panel>


Now, What I want is that when user selects the Listitem with Text="Some Change." and Value="Existing", then and only then will dropdownlist with id="ddlList" must show, otherwise it must be hidden. I am populating this list on server-side at page load. AS this is ajaxcontrol i do not want any postbacks, therefore I am trying to handle this with javascript/jquery. I am a beginner with Javascript/Jquery so don't know how to do this properly. I have written some JQuery which is something like this:

function pageLoad() {

    $find('<%= RdBtnLstSortOptions.ClientID %>').add_selectedIndexChanged(
    function (sender, args) {
        var selectedValue = $(this).val();

        if ($.trim(selectedValue) == 'Existing') {

            // show the dropdown list ddlList
        }

        else { //show the hide the dropdown list ddlList }

    });
}


My question is how can I write this jquery/javascript properly so that I can show the dropdownlist upon the selected radio button option. Thanks.

ebad.masood
Newbie Poster
1 post since Jan 2012
Reputation Points: 10
Solved Threads: 0
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: