Results 1 to 1 of 1

Thread: Jquery datables not working afer adding modal boostrap

  1. #1

    Thread Starter
    Junior Member
    Join Date
    Sep 2020
    Location
    Kampala
    Posts
    24

    Jquery datables not working afer adding modal boostrap

    Name:  Screenshot 2022-04-16 at 08-42-56 Screenshot.jpg
Views: 41
Size:  64.7 KB

    Code:
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Dim cmd As New SqlCommand("SELECT  NAME, HOUSE, CLASS, STREAM, SEX, ADMNO, ACCOUNT, STATUS, STDTYPE,ACNOS FROM Student")
            StudentGrid.DataSource = Me.ExecuteQuery(cmd, "SELECT")
            StudentGrid.DataBind()
            'Required for jQuery DataTables to work.
            StudentGrid.UseAccessibleHeader = True
            StudentGrid.HeaderRow.TableSection = TableRowSection.TableHeader
        End If
    End Sub
     
    Private Sub StudentGrid_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles StudentGrid.RowDataBound
        If (e.Row.RowType = DataControlRowType.DataRow) Then
            Try
                Dim ddlCountries As DropDownList = CType(e.Row.FindControl("ddlSTDTYPE"), DropDownList)
                Dim cmd As New SqlCommand("SELECT DISTINCT STDTYPE FROM Student")
     
                ddlCountries.DataSource = Me.ExecuteQuery(cmd, "SELECT")
                ddlCountries.DataTextField = "STDTYPE"
                ddlCountries.DataValueField = "STDTYPE"
                ddlCountries.DataBind()
     
                'Add Default Item in the DropDownList
                ddlCountries.Items.Insert(0, New ListItem("Please select"))
     
                'Select the Country of Customer in DropDownList
                Dim country As String = CType(e.Row.FindControl("lblCategory"), Label).Text
                ddlCountries.Items.FindByValue(country).Selected = True
            Catch ex As Exception
     
            End Try
            'Find the DropDownList in the Row
            Try
                Dim ddlCountries2 As DropDownList = CType(e.Row.FindControl("ddlCLASS"), DropDownList)
                Dim cmd2 As New SqlCommand("SELECT DISTINCT CLASS FROM Classcontrol")
                ddlCountries2.DataSource = Me.ExecuteQuery(cmd2, "SELECT")
                ddlCountries2.DataTextField = "CLASS"
                ddlCountries2.DataValueField = "CLASS"
                ddlCountries2.DataBind()
     
                'Add Default Item in the DropDownList
                ddlCountries2.Items.Insert(0, New ListItem("Please select"))
                Dim country2 As String = CType(e.Row.FindControl("lblCategory2"), Label).Text
                ddlCountries2.Items.FindByValue(country2).Selected = True
     
            Catch ex As Exception
     
            End Try
     
            'Select the Country of Customer in DropDownList
            Try
                Dim ddlCountries3 As DropDownList = CType(e.Row.FindControl("ddlStream"), DropDownList)
                Dim cmd3 As New SqlCommand("SELECT DISTINCT STREAM FROM classcontrol")
     
                ddlCountries3.DataSource = Me.ExecuteQuery(cmd3, "SELECT")
                ddlCountries3.DataTextField = "STREAM"
                ddlCountries3.DataValueField = "STREAM"
                ddlCountries3.DataBind()
     
                'Add Default Item in the DropDownList
                ddlCountries3.Items.Insert(0, New ListItem("Please select"))
     
                'Select the Country of Customer in DropDownList
                Dim country3 As String = CType(e.Row.FindControl("lblCategory3"), Label).Text
                ddlCountries3.Items.FindByValue(country3).Selected = True
     
            Catch ex As Exception
     
            End Try
     
            Try
                Dim ddlCountries4 As DropDownList = CType(e.Row.FindControl("ddlSex"), DropDownList)
                Dim cmd3 As New SqlCommand("SELECT DISTINCT Sex FROM Student")
     
                ddlCountries4.DataSource = Me.ExecuteQuery(cmd3, "SELECT")
                ddlCountries4.DataTextField = "SEX"
                ddlCountries4.DataValueField = "SEX"
                ddlCountries4.DataBind()
     
                'Add Default Item in the DropDownList
                ddlCountries4.Items.Insert(0, New ListItem("Please select"))
     
                'Select the Country of Customer in DropDownList
                Dim country4 As String = CType(e.Row.FindControl("lblCategory4"), Label).Text
                ddlCountries4.Items.FindByValue(country4).Selected = True
     
            Catch ex As Exception
     
            End Try
     
        End If
    End Sub
     
    Private Function ExecuteQuery(ByVal cmd As SqlCommand, ByVal action As String) As DataTable
        'Dim conString As String = conString
        Using con As New SqlConnection(conString)
            cmd.Connection = con
            Select Case action
                Case "SELECT"
                    Using sda As New SqlDataAdapter()
                        sda.SelectCommand = cmd
                        Using dt As New DataTable()
                            sda.Fill(dt)
                            Return dt
                        End Using
                    End Using
                Case "UPDATE"
                    con.Open()
                    cmd.ExecuteReader()
                    con.Close()
                    Exit Select
            End Select
            Return Nothing
        End Using
    End Function

    html view
    Code:
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Search2.aspx.vb" Inherits="UNIFORMWEB2023.Search2" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .auto-style1 {
                width: 100%;
                border-style: solid;
                border-width: 2px;
            }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
     
        <script type="text/javascript">
            $(function () {
                $("[id*=StudentGrid]").DataTable(
                    {
                        bLengthChange: true,
                        lengthMenu: [[15, 20, -1], [15, 20, "All"]],
                        bFilter: true,
                        bSort: true,
                        bPaginate: true
                    });
            });
        </script>
    </head>
     
    <body>
        <form id="form1" runat="server">
            <div>
                <table class="auto-style1">
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>
                            <asp:Button ID="Button1" runat="server" Text="Submit Record" Width="156px" Height="34px" />
                        </td>
                        <td rowspan="2">&nbsp;</td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <asp:GridView ID="StudentGrid" runat="server" AutoGenerateColumns="False" ItemStyle-Width="Auto" CellSpacing="1" ClientIDMode="Static">
                                <Columns>
                                    <asp:CommandField ShowHeader="True" ShowSelectButton="True" />
                                    <asp:BoundField DataField="admno" HeaderText="Admno" SortExpression="account" />
                                    <asp:BoundField DataField="Name" HeaderText="Student Name" SortExpression="Name" />
                                    <asp:TemplateField HeaderText="Class">
                                        <ItemTemplate>
                                            <asp:DropDownList ID="ddlCLASS" runat="server" Height="22px" Width="74px">
                                            </asp:DropDownList>
                                            <asp:Label ID="lblCategory2" runat="server" Text='<%# Eval("Class") %>' Visible="False"></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Stream">
                                        <ItemTemplate>
                                            <asp:DropDownList ID="ddlStream" runat="server" Height="21px" Width="98px" OnSelectedIndexChanged="ddlStream_SelectedIndexChanged">
                                            </asp:DropDownList>
                                            <asp:Label ID="lblCategory3" runat="server" Text='<%# Eval("Stream") %>' Visible="False"></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Student Type">
                                        <ItemTemplate>
                                            <asp:DropDownList ID="ddlSTDTYPE" runat="server" Height="21px" Width="87px">
                                            </asp:DropDownList>
                                            <asp:Label ID="lblCategory" runat="server" Text='<%# Eval("STDTYPE") %>' Visible="False"></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Sex">
                                        <ItemTemplate>
                                            <asp:DropDownList ID="ddlSex" runat="server">
                                            </asp:DropDownList>
                                            <asp:Label ID="lblCategory4" runat="server" Text='<%# Eval("Sex") %>' Visible="False"></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:BoundField DataField="House" HeaderText="Colour" SortExpression="House" />
                                    <asp:BoundField DataField="ACNOS" HeaderText="ACNOS" SortExpression="ACNOS" />
                                    <asp:CommandField HeaderText="View Payment Details" SelectText="PayDetails" ShowSelectButton="True" />
                                </Columns>
                            </asp:GridView>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">&nbsp;</td>
                    </tr>
                </table>
            </div>
     
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" />
            <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
            <div id="myModal" class="modal fade" style="width: auto;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button style="padding: 0px" type="button" data-dismiss="modal">&times;</button>
                            <h4>Student's Details</h4>
                        </div>
                        <div class="modal-body">
                            <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                <div class="form-group">
                                    <asp:Label ID="lblId" runat="server" Text="Account"></asp:Label>
                                </div>
                                <div class="form-group">
                                    <asp:TextBox ID="txtName" runat="server" Text="Name"></asp:TextBox>
                                </div>
                                <div class="form-group">
                                    <asp:TextBox ID="txtclass" runat="server" Text="Class"></asp:TextBox>
                                </div>
                                <div class="form-group">
                                    <asp:TextBox ID="TextStream" runat="server" Text="Stream"></asp:TextBox>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-info" data-dismiss="modal">
                                Close</button>
                            <asp:Button ID="Button2" runat="server" Text="Submit Record" Width="156px" Height="34px" />
                        </div>
                    </div>
                </div>
            </div>
     
            <script type='text/javascript'>
                function openModal() {
                    $('[id*=myModal]').modal('show');
                }
            </script>
        </form>
    </body>
    </html>
    Last edited by si_the_geek; Apr 16th, 2022 at 08:11 AM. Reason: altered tags for readability

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width