bootstrapTable is not supported

0

I Have tables in my site that have to much columns and I found BootstrapTable so I have a function that uses the jquery resize event. when the window with is equal to or small then 887px it should change the tables to card view. but when I run the site I get an error telling me this

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'bootstrapTable'

Can anyone please explain why i'm getting this error and how I can fix it. Here is my code. Thanks

This code is in my master page This code is in the header tag

<link href="Styles/1Life/jquery-ui.min.css" rel="stylesheet" />
<link href="Styles/1Life/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../Styles/1Life/bootstrap-table.min.css" rel="stylesheet" type="text/css" />
<link href="Styles/1Life/1Life_StyleSheet.css" rel="stylesheet" type="text/css" />

This code is in the body tag

    <asp:ToolkitScriptManager ID="ToolScriptManager1" runat="server" EnablePageMethods="true" AsyncPostBackTimeout="0">
        <Scripts>
            <asp:ScriptReference Path="~/Scripts/JQuery/1Life/jquery-1.12.3.min.js" />
            <%--<asp:ScriptReference Name="jquery" Path="~/Scripts/jquery-2.2.3.min.js" />--%>
            <asp:ScriptReference Path="~/Scripts/JQuery/jquery-ui.min.js" />
            <asp:ScriptReference Path="~/Scripts/JQuery/jquery-migrate-1.3.0.js" />
            <asp:ScriptReference Path="~/Scripts/JQuery/animatedcollapse.js" />
            <asp:ScriptReference Path="~/Scripts/js/CommonFunctions.js" />
            <asp:ScriptReference Path="~/Scripts/js/bootstrap.min.js" />
            <asp:ScriptReference Path="~/Scripts/js/bootstrap-table.min.js" />
            <asp:ScriptReference Path="~/Scripts/js/InboundSales.js" />
        </Scripts>
    </asp:ToolkitScriptManager>

Here is the javascript

function changinggrvWorkbenchToCardView() {
if ($(window).width() <= 887) {
    $("#ContentPlaceHolder1_grvWorkbench").removeAttr("data-card-view");
    $("#ContentPlaceHolder1_grvWorkbench").attr("data-toggle", "table");
    $("#ContentPlaceHolder1_grvWorkbench").attr("data-card-view", "true");
    $("#ContentPlaceHolder1_grvWorkbench").bootstrapTable('resetView');
}
else if ($(window).width() > 887) {
    $("#ContentPlaceHolder1_grvWorkbench").removeAttr("data-toggle");
    $("#ContentPlaceHolder1_grvWorkbench").removeAttr("data-card-view");
    $("#ContentPlaceHolder1_grvWorkbench").attr("data-card-view", "false");
    $("#ContentPlaceHolder1_grvWorkbench").bootstrapTable('resetView');
}

}

Here is the table

<asp:GridView ID="grvDiaryEntries" runat="server" AutoGenerateColumns="False" Width="95%" GridLines="None" AllowPaging="True" CssClass="GridStyle marginLeft3 table grvRefresh" OnRowCommand="grvDiaryEntries_RowCommand" DataKeyNames="DiaryKey" OnPageIndexChanging="grvDiaryEntries_PageIndexChanging" PageSize="15" ClientIDMode="Static" CellPadding="4" ForeColor="#333333" data-card view="false">
<AlternatingRowStyle BackColor="White" />
                        <Columns>
                            <asp:TemplateField ShowHeader="true" HeaderText="Reference Number">
                                <ItemTemplate>
                                    <asp:LinkButton ID="lnkLeadNumber" runat="server" CausesValidation="False" CommandName="Select"
                                        OnClientClick='<%# "OpenDiaryEntry(\""+ Eval("DiaryKey")+"\",\""+ Eval("Operator")+"\"); return false;" %>'
                                        Text='<%# Eval("ReferenceNumber") %>' ToolTip="View diary entry details"></asp:LinkButton>
                                </ItemTemplate>
                                <ItemStyle Width="15%" />
                            </asp:TemplateField>
                            <asp:BoundField DataField="Operator" HeaderText="Operator" Visible="False" />
                            <asp:TemplateField HeaderText="Text">
                                <ItemTemplate>
                                    <asp:Label ID="lblText" runat="server" Text='<%# Eval("Text").ToString().Length < 50 ? Eval("Text") : Eval("Text").ToString().Substring(0,49) + "..." %>'>></asp:Label>
                                </ItemTemplate>
                                <ItemStyle Width="50%" />
                            </asp:TemplateField>
                            <asp:BoundField DataField="DiaryDate" HeaderText="Diary Date" />
                            <asp:TemplateField HeaderText="Options">
                                <ItemTemplate>
                                    <asp:LinkButton ID="lnkComplete" runat="server" CausesValidation="False" CommandName="Complete"
                                        Text='Complete' OnClientClick="return confirm('Are you sure you want to complete this Diary Entry?'); return false;"
                                        ToolTip="Mark this diary entry as complete" CommandArgument='<%# Eval("DiaryKey").ToString() %>'></asp:LinkButton>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="" Visible="False">
                                <ItemTemplate>
                                    <asp:LinkButton ID="lnkView" runat="server" CausesValidation="False" CommandName="Select"
                                        OnClientClick='<%# "OpenView(\""+ Eval("DiaryKey")+"\",\""+ Eval("Operator")+"\"); return false;" %>'
                                        Text="View" ToolTip="View"></asp:LinkButton>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                        <EditRowStyle BackColor="#2461BF" />
                        <EmptyDataRowStyle HorizontalAlign="Center" />
                        <EmptyDataTemplate>
                            <span style="color: red;">THERE IS NO DATA AVAILABLE TO DISPLAY</span>
                        </EmptyDataTemplate>
                        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                        <PagerStyle HorizontalAlign="Center" BackColor="#2461BF" ForeColor="White" />
                        <RowStyle BackColor="#EFF3FB" />
                        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                        <SortedAscendingCellStyle BackColor="#F5F7FB" />
                        <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                        <SortedDescendingCellStyle BackColor="#E9EBEF" />
                        <SortedDescendingHeaderStyle BackColor="#4870BE" />
                    </asp:GridView>
javascript
jquery
asp.net
twitter-bootstrap-3
bootstrap-table
asked on Stack Overflow May 11, 2016 by Thabo Mabote

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0