[RESOLVED]Using a combobox to update the content in another combobox.

I have been cracking my head for the last 4 days trying to get the comboboxes to work.  I’m trying to convert an existing client app into web and one of the feature of the client app is having a combobox to allow them to enter data that are not in the system. 
But if they select or entered an existing data then the system would populate another combobox with a set of relevent data pertaining to the initial data.  As aspx does not have combobox, has to use jquery.  Having lots of problem trying to do the postback. 
Managed to do the postback but doesn’t seems to be able to get the info populated to the other combobox.  Can some help? Please!

Hi,

Can you give a screenshot and how you wish your comboboxes to get work… It could make us all to understand your issue and help 

                    <asp:Panel runat="server" ID="pnlGeneral" CssClass="poContent" Visible="true" >
                        <div class="poTab">
                            <asp:BulletedList ID="ulGeneral" runat="server" BulletStyle="NotSet" DisplayMode="LinkButton" CssClass="ulGeneral" OnClick="ul_Click">
                                <asp:ListItem Text="General"></asp:ListItem>
                                <asp:ListItem Text="Billing"></asp:ListItem>
                                <asp:ListItem Text="Adjustment"></asp:ListItem>
                                <asp:ListItem Text="Cancellation"></asp:ListItem>
                            </asp:BulletedList>
                        </div>
                        <div class="poContentDetails">
                            <fieldset class="poGenFieldset">
                                <p>
                                    <asp:Label ID="lblClientPO" runat="server" Width="140" AssociatedControlID="txtClientPO">&nbsp;Client PO No.</asp:Label>
                                    <asp:RequiredFieldValidator ID="reqAE" runat="server" ControlToValidate="ddlAE" 
                                        CssClass="failureAsterix" ErrorMessage="Account Executive is required." ToolTip="Account Executive is required."
                                        ValidationGroup="POValidationGroup" InitialValue="">*</asp:RequiredFieldValidator>
                                    <asp:Label ID="lblAE" runat="server" Width="230" AssociatedControlID="ddlAE">Account Executive</asp:Label>
                                    <asp:TextBox ID="txtClientPO" runat="server" CssClass="textEntryShort" Width="135px" ></asp:TextBox>
                                    <span class="spnAE">
                                        <asp:DropDownList ID="ddlAE" runat="server" Width="227" DataSourceID="dsAE" DataTextField="Name"
                                            DataValueField="Name" ValidationGroup="POValidationGroup" MustSelect="true"></asp:DropDownList>
                                    </span>
                                 </p>
                                <p style="width:610px;">
                                    <asp:RequiredFieldValidator ID="reqClient" runat="server" ControlToValidate="ddlClient" 
                                        CssClass="failureAsterix" ErrorMessage="Client is required." ToolTip="Client is required."
                                        ValidationGroup="POValidationGroup" InitialValue="">*</asp:RequiredFieldValidator>
                                    <asp:Label ID="lblClient" runat="server" AssociatedControlID="ddlClient">Client</asp:Label><br />
                                    <span class="spnClient">
                                        <asp:DropDownList ID="ddlClient" runat="server" Width="586px" DataSourceID="dsClient" DataTextField="Name" 
                                            DataValueField="Name" ValidationGroup="POValidationGroup" MustSelect="true"></asp:DropDownList>
                                    </span>
                                </p>
                                <p>
                                    <asp:RequiredFieldValidator ID="reqContact" runat="server" ControlToValidate="txtContact" 
                                        CssClass="failureAsterix" ErrorMessage="Contact Person is required." ToolTip="Contact Person is required."
                                        ValidationGroup="POValidationGroup" InitialValue="">*</asp:RequiredFieldValidator>
                                    <asp:Label ID="lblContact" runat="server" AssociatedControlID="txtContact" Width="294px">Contact Person</asp:Label>
                                    <asp:RequiredFieldValidator ID="reqTel" runat="server" ControlToValidate="txtTel" 
                                        CssClass="failureAsterix" ErrorMessage="Telephone No. is required." ToolTip="Telephone No. is required."
                                        ValidationGroup="POValidationGroup" InitialValue="">*</asp:RequiredFieldValidator>
                                    <asp:Label ID="lblTel" runat="server" AssociatedControlID="txtTel" Width="148px">Telephone No.</asp:Label>
                                    <asp:RequiredFieldValidator ID="reqFax" runat="server" ControlToValidate="txtFax" 
                                        CssClass="failureAsterix" ErrorMessage="Fax No. is required." ToolTip="Fax No. is required."
                                        ValidationGroup="POValidationGroup" InitialValue="">*</asp:RequiredFieldValidator>
                                    <asp:Label ID="lblFax" runat="server" AssociatedControlID="txtFax" Width="148px">Fax No.</asp:Label>
                                    <asp:TextBox ID="txtContact" runat="server" CssClass="textEntry" Width="294px"></asp:TextBox>
                                    <asp:TextBox ID="txtTel" runat="server" CssClass="textEntryShort" Width="144px"></asp:TextBox>
                                    <asp:TextBox ID="txtFax" runat="server" CssClass="textEntryShort" Width="150px"></asp:TextBox>
                                </p>
                                <p>
                                    <asp:RequiredFieldValidator ID="reqProduct" runat="server" ControlToValidate="txtProduct" 
                                        CssClass="failureAsterix" ErrorMessage="Product is required." ToolTip="Product is required."
                                        ValidationGroup="POValidationGroup" InitialValue="">*</asp:RequiredFieldValidator>
                                    <asp:Label ID="lblProduct" runat="server" AssociatedControlID="txtProduct">Product</asp:Label>
                                    <asp:TextBox ID="txtProduct" runat="server" CssClass="textEntryLong" Width="606px"></asp:TextBox>
                                </p>
                            </fieldset>
                            <fieldset class="poGenFieldset">
                                <div style="float:left; width:570px;">
                                    <div style="float:left;margin: 2px 12px 5px 10px;">
                                        <div style="display:inline-block; width:170px;">
                                            <asp:RequiredFieldValidator ID="reqLang" runat="server" ControlToValidate="ddlLanguage" 
                                                CssClass="failureAsterix" ErrorMessage="Language is required." InitialValue="" 
                                                ToolTip="Language is required." ValidationGroup="JOValidationGroup">*</asp:RequiredFieldValidator>
                                            <asp:Label ID="lblLang" runat="server" AssociatedControlID="ddlLanguage" Width="128px">Language</asp:Label><br />
                                            <asp:DropDownList ID="ddlLanguage" runat="server" Width="130px" DataSourceID="dsLang" AutoPostBack="true"
                                                DataTextField="Lang" DataValueField="Lang" />
                                        </div>
                                        <div style="display:inline-block; width:120px">
                                            <asp:RequiredFieldValidator ID="reqDuration" runat="server" ControlToValidate="ddlDuration" 
                                                CssClass="failureAsterix" ErrorMessage="Duration is required." InitialValue="" 
                                                ToolTip="Duration is required." ValidationGroup="JOValidationGroup">*</asp:RequiredFieldValidator>
                                            <asp:Label ID="lblDuration" runat="server" AssociatedControlID="ddlDuration" Width="100px">Duration</asp:Label>
                                            <asp:DropDownList ID="ddlDuration" runat="server" Width="100px" DataSourceID="dsDuration" 
                                                DataTextField="Duration" DataValueField="Duration" AutoPostBack="true" >
                                            </asp:DropDownList>
                                        </div>
                                        <div style="display:inline-block; width:120px;">
                                            <asp:Label ID="lblRate" runat="server" AssociatedControlID="txtRate" Width="100px">&nbsp;Rate $</asp:Label>
                                            <asp:TextBox ID="txtRate" runat="server" CssClass="textEntryShort" Width="100px"></asp:TextBox>
                                        </div>
                                        <div style="display:inline-block; width:120px;">
                                            <asp:Label ID="lblQty" runat="server" AssociatedControlID="txtQty">Quantity</asp:Label>
                                            <asp:TextBox ID="txtQty" runat="server" CssClass="textEntryShort" Width="100px" Text="1"></asp:TextBox>
                                        </div>
                                    </div>
                                    <p>
                                        <asp:RequiredFieldValidator ID="reqJobDesc" runat="server" ControlToValidate="ddlJobDesc" 
                                            CssClass="failureAsterix" ErrorMessage="Job Description is required." ToolTip="Job Description is required."
                                            ValidationGroup="JOValidationGroup" InitialValue="">*</asp:RequiredFieldValidator>
                                        <asp:Label ID="lblJobDesc" runat="server" AssociatedControlID="ddljobDesc">Job Description</asp:Label>
                                        <asp:DropDownList ID="ddlJobDesc" runat="server" Width="540px"></asp:DropDownList>
                                    </p>
                                </div>
                                <div style="float:right;width:72px;margin: 10px 0px;">
                                    <asp:Button ID="btnJOAdd" runat="server" Text="Add" Width="60px" />
                                    <asp:Button ID="btnJOEdit" runat="server" Text="Edit" Width="60px" />
                                    <asp:Button ID="btnJODel" runat="server" Text="Delete" Width="60px" />
                                </div>
                                </span>
                            </fieldset>
                        </div>
                    </asp:Panel>

I can’t paste an image so here’s part of the code.  Hope it helps.  There are actually a number of dropdownlist, all of which has been defined using the combobox.  Below is the javascript that convert it into combobox and the postback.

        $(function () {
            $("#<%=ddlAE.ClientID%>").combobox();
            $("#<%=ddlClient.ClientID%>").combobox();
            $("#<%=ddlLanguage.ClientID%>").combobox();
            $("#<%=ddlDuration.ClientID%>").combobox();
            $("#<%=ddlJobDesc.ClientID%>").combobox();
            $('#<%=ddlLanguage.ClientID.Replace("ddl","txt")%>').change( function() {
                __doPostBack("<%=ddlJobDesc.ClientID%>", "UpdateJobDesc");
                return false;
            });
            $('#<%=ddlDuration.ClientID.Replace("ddl", "txt")%>').change(function () {
                __doPostBack("<%=ddlJobDesc.ClientID%>", "UpdateJobDesc");
                return false;
            });
        });

The problem combobox is the Language, Duration and Job Description.  The Job Description info can be obtained from the database based on the selection of the Language and Duration.  I’ve also added the input trigger into the combobox jquery script for the
input.autocomplete change and select.

Hi Felix,

Are you looking to do something like this:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>fill the second drop down</title>
    <script type="text/javascript">
        function fillTheOtherDropDown(firstDropDownID)
        {
            var contentForDropDown="<select id='dropDown'>";
            var length=document.getElementById(firstDropDownID).length;
            var arrayForSecondDD=["test","has","been","completed"];
            for(var i=0;i<length;++i)
            {
                contentForDropDown += "<option value=" + arrayForSecondDD[i] + ">" + arrayForSecondDD[i] + "</option>";
            }
            contentForDropDown+="</select>";
            document.getElementById('dropDown').outerHTML=contentForDropDown;
        }


    </script>
</head>
<body>
    <form id="form1" runat="server">
     <select id="firstDropDown" onchange="fillTheOtherDropDown('firstDropDown')">
        <option value="this">This</option>
        <option value="is">is</option>
        <option value="A">A</option>
        <option value="Test">Test</option>
    </select>
    <select id="dropDown">
    </select>
    
    </form>
</body>
</html>

please try, hope it helps.

hello

you can create javascript function to populate data from database and call this function at the end of first function

Thanks Shivi but I managed to customized my combobox jquery to perform the necessary ajax postback.  But I’ve just found out that when I did a final postback, the entire combobox got reverted back to normal dropdownlist.  Search the entire net to find a
solution.  Advice give was to add pageload function but have no idea which code I should include in the pageload function.  Can someone help?

Hi FelixZcat,

For we didn’t know how did you to customize your combobox to perform the necessary ajax post.

I suggests that you create a simple project  with the only code which does not work and share it.

Best Regards,

Kevin Shen.

Hi Kevin,

Thanks for the response.  I’ve managed to resolved the issue by using the same methology as I had used for the calendar, ie by wrapping the codes as per below

        function pageLoad() {
            $(document).ready($(function () {
                Code goes here
            })
        )}

Regards,

Felix
 

Leave a Reply