locked
Loop through Ajax Combobox items client side and retreive text and value RRS feed

  • Question

  • User1343581070 posted

    Hi,

           I need to loop through the AJAX Combobox client side and retreive the text and value of the items.  I have defined the combobox as

                        <ajaxToolkit:ComboBox ID="ajxCbxSuppName" ClientIDMode="Static" DataSourceID="SqlDataSource1"  RenderMode="Block" CssClass="txtBoxClass1 WindowsStyle" AutoPostBack="False" AutoCompleteMode="Suggest" runat="server" DataTextField="SUPPLIER_NAME" DataValueField="ID" MaxLength="0" AppendDataBoundItems="true" DropDownStyle="DropDown">
                        </ajaxToolkit:ComboBox>
                        <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:conString %>' SelectCommand="SELECT [SUPPLIER_NAME], [ID] FROM [SUPPLIER_MAST] ORDER BY [SUPPLIER_NAME]"></asp:SqlDataSource>
    

    I have used the following function to loop through the items

                                $(function () {
                                    alert("awit");
                                    $("<%=ajxCbxSuppName.ClientID%> option").each(function (i) {
                                        alert("awit888");
                                        alert($(this).text() + " : " + $(this).val());
                                    });
                                });
    

    But it doesn't enter the function at all. The combobox ID is not recognized . How else can i refer the ID to make it work.

    Please help

    Regards

    Sanjish

    Monday, March 5, 2018 5:12 AM

Answers

  • User-1838255255 posted

    Hi SANJISH KUMAR,

    According to your description, you could try the following code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            body {
                font-family: Arial;
                font-size: 10pt;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                debugger;
                $(".ajax__combobox_itemlist li").each(function () {
                    alert($(this).text());
                })
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server">
            </asp:ScriptManager>
            <ajaxToolkit:ComboBox ID="cbCustomers" runat="server" AutoCompleteMode="SuggestAppend">
            </ajaxToolkit:ComboBox>
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="Submit" />
        </form>
    </body>
    
    protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Name", typeof(string));
            dt.Columns.Add("CustomerId", typeof(string));
            dt.Rows.Add("Name1", "1");
            dt.Rows.Add("Name2", "2");
            dt.Rows.Add("Name3", "3");
    
            cbCustomers.DataTextField = "Name";
            cbCustomers.DataValueField = "CustomerId";
            cbCustomers.DataSource = dt;
            cbCustomers.DataBind();
        }

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 6, 2018 6:52 AM

All replies

  • User475983607 posted

    You forgot the ID (#) selector.

    $("#<%=ajxCbxSuppName.ClientID%> option").each(function (i) {

    See the jQuery docs.

    https://api.jquery.com/category/selectors/

    Monday, March 5, 2018 12:05 PM
  • User1343581070 posted

    Hi,

            Thanks for th reply , but i am still facing the same problem. I tried

    $(function () {

          $("#<%=ajxCbxSuppName.ClientID%> option").each(function (i) {

          alert("awit888");

          alert($(this).text() + " : " + $(this).val());

         });

    });

    But it still doesn't go inside the function . Am I missing some JQuery / Ajax files ?

    Regards

    Sanjish

    Monday, March 5, 2018 4:39 PM
  • User475983607 posted

    The ajax toolkit combo box does not have options.  the values are in a hidden table.  Use developer tools (F12) and/or read the docs.

    https://ajaxcontroltoolkit.devexpress.com/ComboBox/ComboBox.aspx

    Monday, March 5, 2018 6:43 PM
  • User1343581070 posted

    Hi,

          My basic problem is that if i set the combobox value client side then the selectedindex is always shown as -1 on the server even though the combobox shows the correct value.

          I set the combobox value client side by a value selected from a grid like

       $find("<%=ajxCbxSuppName.ClientID%>").get_textBoxControl().value = myCellData;

    Please help

    Regards

    Sanjish

    Tuesday, March 6, 2018 5:35 AM
  • User-1838255255 posted

    Hi SANJISH KUMAR,

    According to your description, you could try the following code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            body {
                font-family: Arial;
                font-size: 10pt;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                debugger;
                $(".ajax__combobox_itemlist li").each(function () {
                    alert($(this).text());
                })
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server">
            </asp:ScriptManager>
            <ajaxToolkit:ComboBox ID="cbCustomers" runat="server" AutoCompleteMode="SuggestAppend">
            </ajaxToolkit:ComboBox>
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="Submit" />
        </form>
    </body>
    
    protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Name", typeof(string));
            dt.Columns.Add("CustomerId", typeof(string));
            dt.Rows.Add("Name1", "1");
            dt.Rows.Add("Name2", "2");
            dt.Rows.Add("Name3", "3");
    
            cbCustomers.DataTextField = "Name";
            cbCustomers.DataValueField = "CustomerId";
            cbCustomers.DataSource = dt;
            cbCustomers.DataBind();
        }

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 6, 2018 6:52 AM
  • User1343581070 posted

    That was brilliant Eric. Thanks a lot

    Regards

    Sanjish

    Tuesday, March 6, 2018 3:02 PM