locked
Cascading dropdownlists in Accordion and tabs not working RRS feed

  • Question

  • User-2054142495 posted

    I have created a JQuery accordion of which I’m trying to implement a Cascading DropDownList (4 DropDowns).

    The initial dropdown is bound to a stored procedure in the Page_Load event. This populates and works fine.

    The other 3 dropdowns are also connected through stored procedures and are placed in their own SelectedIndexChanged events. The first dropdownlist (Page_Load event) also has a separate SelectedIndexChanged event. None of these seem to actually be firing.

    When I execute the stored procedures in MSSQL Management Studio they all output the correct result. However one thing I need to mention is the ID for each of the stored procedures is a varchar.

    This is from an old, non-relational, single distinct table in a database and not how I would have done it. But it holds too much data to correct.  

    I've cut the code down as there far too much for these pages

    <asp:ScriptManager ID="AccordionScriptManager" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpAccordionSearch" runat="server" ChildrenAsTriggers="false"
            UpdateMode="Conditional">
            <ContentTemplate>
    
    <div id="tabs-4">
                                        <div class="Table">
                                            <div class="Row">
                                                <div class="Cell">
                                                    One:
                                                </div>
                                                <div class="Cell">
                                                    <asp:DropDownList ID="ddl1l" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddl1_SelectedIndexChanged" />
                                                    
                                            
                                                </div>
                                            </div>
                                            <div class="Row">
                                                <div class="Cell">
                                                    Two:
                                                </div>
                                                <div class="Cell">
                                                    <asp:DropDownList ID="ddl2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddl2_SelectedIndexChanged" />
                                                    
                                                    </asp:DropDownList>
                                                </div>
                                            </div>
                                            <div class="Row">
                                                <div class="Cell">
                                                    Three:
                                                </div>
                                                <div class="Cell">
                                                    <asp:DropDownList ID="ddl3" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddl3_SelectedIndexChanged"  />
                                                    
                                                   
                                                </div>
                                            </div>
                                            <div class="Row">
                                                <div class="Cell">
                                                    Four:
                                                </div>
                                                <div class="Cell">
                                                    <asp:DropDownList ID="ddl4" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddl4_SelectedIndexChanged" />
                                                    
                                                    
                                                </div>
                                            </div>
                                            <div class="Row">
                                                <div class="Cell">
                                                </div>
                                                <div class="Cell">
                                                    <div class="Row">
                                                        <div class="Cell">
                                                            <asp:Button runat="server" ID="btn_Reset " Text="Reset" OnClientClick="this.form.reset();return false;" />
                                                        </div>
                                                        <div class="Cell">
                                                            <asp:Button ID="btnAccordion" runat="server" Text="Search" OnClick="btn_Click" />
                                                        </div>
                                                        
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
    </ContentTemplate>
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="btnAccordion" EventName="click" />
                                </Triggers>
                            </asp:UpdatePanel>
    
    Protected Sub ddl1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
    
            Try
                Using con As New SqlConnection(ConfigurationManager.ConnectionStrings("MyConn").ConnectionString)
                    Using cmd As New SqlCommand()
                        cmd.CommandType = CommandType.StoredProcedure
                        cmd.CommandText = "sp_1"
                        cmd.Parameters.AddWithValue("@one", ddl1.SelectedItem.ToString())
                        cmd.Connection = con
                        con.Open()
                        Dim da As New SqlDataAdapter(cmd)
                        Dim dt As New DataTable()
                        da.Fill(dt)
                        ddl2.DataSource = dt
                        ddl2.DataValueField = "Code2"
                        ddl2.DataTextField = "Name2"
                        ddl2.DataBind()
                        con.Close()
    
    ddl2.Items.Insert(0, New ListItem("Please select Name2", "0"))
    
                        
                        ddl3.Items.Clear()
                        ddl3.Items.Insert(0, New ListItem("Please select Name3", "0"))
                    End Using
                End Using
            Catch
            End Try
    
    
        End Sub
    
        Protected Sub ddl2_SelectedIndexChanged(sender As Object, e As EventArgs)
    
            Try
                Using con As New SqlConnection(ConfigurationManager.ConnectionStrings("MyConn").ConnectionString)
                    Using cmd As New SqlCommand()
                        cmd.CommandType = CommandType.StoredProcedure
                        cmd.CommandText = "sp_2"
                        cmd.Parameters.AddWithValue("@two", ddl2.SelectedValue.ToString())
                        cmd.Connection = con
                        con.Open()
                        Dim da As New SqlDataAdapter(cmd)
                        Dim dt As New DataTable()
                        da.Fill(dt)
    
    
                        ddl3.DataSource = dt
                        ddl3.DataTextField = "Name3"
                        ddl3.DataValueField = "Code3"
                        ddl3.DataBind()
                        con.Close()
                        ddl3.Items.Insert(0, New ListItem("--Select--", "0"))
    
                        If ddl3.SelectedValue = "0" Then
                            Ddl3.Items.Clear()
                            Ddl3.Items.Insert(0, New ListItem("--Select--", "0"))
                        End If
    
    
                    End Using
                End Using
            Catch
            End Try
    
    
        End Sub
    
        Protected Sub ddl3_SelectedIndexChanged(sender As Object, e As EventArgs)
    
    
            Try
                Using con As New SqlConnection(ConfigurationManager.ConnectionStrings("MyConn").ConnectionString)
                    con.Open()
                    Using cmd As New SqlCommand()
    
                        cmd.CommandType = CommandType.StoredProcedure
                        cmd.CommandText = "sp_3"
                        cmd.Parameters.AddWithValue("@three", ddl3.SelectedItem.Value)
                        cmd.Connection = con
    
                        Dim da As New SqlDataAdapter(cmd)
                        Dim ds As New DataSet()
                        da.Fill(ds)
    
                        con.Close()
                        ddl4.DataSource = ds
                        ddl4.DataTextField = "Name4"
                        ddl4.DataValueField = "code4"
                        ddl4.DataBind()
    
    
                    End Using
                End Using
            Catch
            End Try
        End Sub
    
    
    

    Sunday, August 16, 2015 5:08 AM

Answers

  • User1316246260 posted

    If your ID is a primary key it must be INT to function correctly.  Using Visual Studio 2013 you can update your ID to INT without disrupting your data when updating.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 19, 2015 9:31 AM

All replies

  • User-693045842 posted

    Hi  weedy ,

    Since you failed to bind your first dropdownlist in page_load event , you could post your cs code in page load event ,and also put a break point to where you got the data from database and confirm whether you got the correct data .

    lemo

    Wednesday, August 19, 2015 8:05 AM
  • User1316246260 posted

    If your ID is a primary key it must be INT to function correctly.  Using Visual Studio 2013 you can update your ID to INT without disrupting your data when updating.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 19, 2015 9:31 AM