.footable jquery doest not work

Aug 26 2015 4:38 AM

i have page that uses .footable method to fit gridview in a div. It works in Mozilla and Chrome browser but it gives error Error: Object doesn't support property or method 'footable' in IE browser. I'm using IE11. I do want it to work in all IE version. below are my codes.

.aspx page

<%@ Page Title="" Language="C#" MasterPageFile="~/SiteTab.Master" AutoEventWireup="true" CodeBehind="Lecturer.aspx.cs" Inherits="studPort.Lecturer" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="css/styles.css" rel="stylesheet" />
<script> $(document).ready(function () {
$('a#btn-lecture').css('background-color', '#dedede');
$('a#btn-lecture').css('color', '#6F0000');
$('a#btn-lecture').css('border-style', 'solid');
$('a#btn-lecture').css('border-width', '1px');
$('a#btn-lecture').css('border-color', '#000000');
return false;
});</script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div class="columnsContainer" >
<div class="firstColumn"><div class="firstColumn1">
<div class="divtajuk" >
<div class="divtajukText" >
<h2 class="h2">College Timetable</h2>
</div>
<div class="divMenu" >

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="moduleID"
DataSourceID="SqlDataSource1" CssClass="footable" >
<Columns>
<asp:BoundField DataField="moduleID" HeaderText="moduleID" ReadOnly="True" SortExpression="moduleID" />
<asp:BoundField DataField="moduleDesc" HeaderText="moduleDesc" SortExpression="moduleDesc" />
<asp:BoundField DataField="systemID" HeaderText="systemID" SortExpression="systemID" />
<asp:BoundField DataField="statusMenu" HeaderText="statusMenu" SortExpression="statusMenu" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:studdbConnectionString %>" SelectCommand="SELECT [moduleID], [moduleDesc], [systemID], [statusMenu] FROM [Module]"></asp:SqlDataSource>

fdfdfdfdfd
</div>
</div>
</div><div class="firstColumn2Special">
<div class="divtajuk" >
<div class="divtajukText" >
<h2 class="h2">Individual Timetable</h2>

</div>
<div class="divMenu" >

fdfdfdfdfd
</div>

</div></div>
<div class="firstColumn3">
<div class="divtajuk">
<div class="divtajukText" >
<h2 class="h2"> Slips</h2>
</div>
<div class="divMenu" >

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataKeyNames="moduleID"
DataSourceID="SqlDataSource2" CssClass="footable">
<Columns>
<asp:BoundField DataField="moduleID" HeaderText="moduleID" ReadOnly="True" SortExpression="moduleID" />
<asp:BoundField DataField="moduleDesc" HeaderText="moduleDesc" SortExpression="moduleDesc" />
<asp:BoundField DataField="systemID" HeaderText="systemID" SortExpression="systemID" />
<asp:BoundField DataField="sort" HeaderText="sort" SortExpression="sort" />
<%--<asp:BoundField DataField="thcreate" HeaderText="thcreate" SortExpression="thcreate" />
<asp:BoundField DataField="modulePath" HeaderText="modulePath" SortExpression="modulePath" />
<asp:BoundField DataField="statusMenu" HeaderText="statusMenu" SortExpression="statusMenu" />
<asp:BoundField DataField="status_active" HeaderText="status_active" SortExpression="status_active" />--%>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:studdbConnectionString %>" SelectCommand="SELECT * FROM [Module]"></asp:SqlDataSource>

fdfdfdfdfd
</div>
</div></div>
</div>

<div class="secondColumn">
<div class="secondColumn1"> <div class="divtajuk">
<div class="divtajukText" >
<h2 class="h2"> Attendance</h2>
</div>
<div class="divMenu" >

fdfdfdfdfd
</div>
</div></div>
<div class="secondColumn2">
<div class="divtajuk">
<div class="divtajukText" >
<h2 class="h2">Course Registration</h2>

</div><div class="divMenu" >
fdfdfdfdfd
</div>
</div></div>
</div>
<div class="thirdColumn" >

</div>
<div class="fourthColumn">

</div>

</div>
</asp:Content>

SiteTab.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="SiteTab.Master.cs" Inherits="studPort.SiteTab" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(function () {

$('.footable').footable();

});
</script>

<html lang="en">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bootstrap Google Plus Theme</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/footable.min.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/jquery.min.js"></script>

<link href="css/styles.css" rel="stylesheet">
<link id="lnkCSS" href="css/Column2.css" rel="stylesheet" />

<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>
<style type="text/css">
.auto-style1 {
width: 27px;
height: 32px;

}
.auto-style2 {
width: 27px;
height: 32px;
}

#Text1 {
border:none;
}

.btnChooseTheme {
border: solid 1px #f0f0f0;
opacity:1;
border-radius: 3px;
-webkit-box-shadow: 2px 2px 0px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 2px 0px 0px rgba(50, 50, 50, 0.75);
box-shadow: 2px 2px 0px 0px rgba(50, 50, 50, 0.75);
height:40px
}

.btnlayout {
border: solid 1px #f0f0f0;
opacity:1;
border-radius: 3px;
-webkit-box-shadow: 2px 2px 0px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 2px 0px 0px rgba(50, 50, 50, 0.75);
box-shadow: 2px 2px 0px 0px rgba(50, 50, 50, 0.75);
height:40px
}
</style>
</head>
<body>

<nav class="navbar navbar-fixed-top header" style="opacity:0.5;">
<div class="col-md-12">
<div class="navbar-header" >

<a href="#" class="navbar-brand"><strong>UUM STUDENT PORTAL</strong></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse1">
<i class="glyphicon glyphicon-search"></i>
</button>

</div >
<div class="collapse navbar-collapse" id="navbar-collapse1">
<form class="navbar-form pull-left" >
<div class="input-group" style="max-width:470px;">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default btn-primary" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">

<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-bell"></i></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="badge pull-right">40</span>Link</a></li>
<li><a href="#"><span class="badge pull-right">2</span>Link</a></li>
<li><a href="#"><span class="badge pull-right">0</span>Link</a></li>
<li><a href="#"><span class="label label-info pull-right">1</span>Link</a></li>
<li><a href="#"><span class="badge pull-right">13</span>Link</a></li>
</ul>
</li>
<li><a href="#" id="btnToggle"><i class="glyphicon glyphicon-th-large"></i></a></li>
<li><a href="#"><i class="glyphicon glyphicon-user"></i></a></li>
</ul>
</div>
</div>
</nav>
<form runat="server">

<div class="navbar navbar-default" id="subnav" >

<div class="col-md-12">
<%--<div class="topMenu">
<table style="width: 100%;">
<tr align="right">

<td></td>
<td></td>
<td width = "150px"></td>
<td align="right" valign="middle"><a href="https://uummail2.uum.edu.my/owa" target="_blank"><img style="margin: 0px;" src="/image/Mail-Send-32.png" alt="email" width="20" height="20" /></a></td>
<td style="text-align: left;" align="right" width = "40px"><span style="color: #ffffff;"><a href="https://uummail2.uum.edu.my/owa" target="_blank" class="no_deco" ><font color="FFFFFF">Email</font></a></span></td>

<td align="right" valign="middle"><a href="http://learning2.uum.edu.my" target="_blank"><img style="margin: 0px;" src="/image/Library-Books-32.png" alt="University-32" width="20" height="20" /></a></td>
<td style="text-align: left;" align="right" width = "130px"><span style="color: #ffffff;">
<a href="http://learning2.uum.edu.my" target="_blank" class="no_deco" >
<font color="FFFFFF">UUM Online Learning</font></a></span></td>

<td align="right" valign="middle"><a href="http://uum.edu.my" target="_blank"><img style="margin: 0px;" src="/image/University-32.png" alt="Identity-Card-32" width="20" height="20" /></a></td>
<td style="text-align: left;" align="right"width = "90px"><span style="color: #ffffff;"><a href="http://uum.edu.my" target="_blank"class="no_deco" ><font color="FFFFFF">UUM Website</font></a></span></td>

<td align="right" valign="middle"><a href="http://it.uum.edu.my" target="_blank"><img style="margin: 0px;" src="/image/icon-it2.png" alt="Identity-Card-32"width="20" height="20" /></a></td>
<td style="text-align: left;" align="right"width = "100px"><span style="color: #ffffff;"><a href="http://it.uum.edu.my" target="_blank"class="no_deco" ><font color="FFFFFF">UUMIT Website</font></a></span></td>

<td align="right" valign="middle"><a href="/map.aspx" target="_self"><img style="margin: 0px;" src="/image/Box-32.png" alt="Identity-Card-32" width="20" height="20" /></a></td>
<td style="text-align: left;" align="right" width = "85px"><span style="color: #ffffff;"><a href="/map.aspx" target="_self"class="no_deco" ><font color="FFFFFF">Campus Map</font></a></span></td>

<td align="right" valign="middle"><a href="http://it.uum.edu.my/index.php/wifi-coverage" target="_blank"><img style="margin: 0px;" src="/image/Icon-wifi.png" alt="Identity-Card-32"width="20" height="20" /></a></td>
<td style="text-align: left;" align="right" width = "90px"><span style="color: #ffffff;"><a href="http://it.uum.edu.my/index.php/wifi-coverage" target="_blank" class="no_deco" ><font color="FFFFFF">Wifi Coverage</font></a></span></td>

<td align="right" valign="middle"><a href="http://mybox2.uum.edu.my" target="_blank"><img style="margin: 0px;" src="/image/Box-32.png" alt="Identity-Card-32" width="20" height="20" /></a></td>
<td style="text-align: left;" align="right" width = "40px"><span style="color: #ffffff;"><a href="http://mybox2.uum.edu.my" target="_blank" class="no_deco" ><font color="FFFFFF">MyBox</font></a></span></td>

<td align="right" valign="middle"><a href="https://auth.uum.edu.my/sspr" target="_parent"><img style="margin: 0px;" src="/image/Signature-01-32.png" alt="Identity-Card-32" width="20" height="20" /></a></td>
<td style="text-align: left;" align="right" width = "120px"><span style="color: #ffffff;"><a href="https://auth.uum.edu.my/sspr" target="_parent" class="no_deco" ><font color="FFFFFF">Change Password</font></a></span></td>

<%--<td align="right" valign="middle"><a title="Logout" href="https://auth.uum.edu.my/sspr/public/Logout"><img style="margin: 0px;" src="/image/logout.png" alt="Identity-Card-32" width="20" height="20" /></a></td>
<td style="text-align: left;" align="right" width = "40px"><span style="color: #ffffff;"><a title="Logout" href="https://auth.uum.edu.my/sspr/public/Logout" class="no_deco" ><font color="FFFFFF">Logout</font></a></span></td>
<td align="right" valign="middle">
<asp:ImageButton ID="btnLogout" runat="server" ImageUrl="/image/logout.png"
width="20px" height="20px" onclick="btnLogout_Click" TabIndex="-1"/>
<img style="margin: 0px;" src="/image/logout.png" alt="Identity-Card-32" width="20" height="20" />--%><%--<td style="text-align: left;" align="right" width = "40px">
<asp:LinkButton ID="lnkLogout" runat="server" OnClick="lnkLogout_Click"
ForeColor="White" Font-Underline="false" TabIndex="-1">Logout</asp:LinkButton>
<%--<span style="color: #ffffff;"><a title="Logout" href="https://auth.uum.edu.my/sspr/public/Logout" class="no_deco" ><font color="FFFFFF">Logout</font></a></span>--%>

<div class="navbar-header" id="LinkTab" runat="server">

<a href="/Home.aspx" style="margin-left:15px;" class="navbar-btn btn btn-default btn-home dropdown-toggle" >
Home <small></small></a>
<a href="/Profile.aspx" style="margin-left:15px;" id="btn-profile" class="navbar-btn btn btn-default btn-profile dropdown-toggle" >
Profile <small></small></a>
<a href="/Academic.aspx" style="margin-left:15px;" id="btn-academic" class="navbar-btn btn btn-default btn-academic dropdown-toggle" >
Academic <small></small></a>
<a href="/Financial.aspx" style="margin-left:15px;" id="btn-financial" class="navbar-btn btn btn-default btn-financial dropdown-toggle">
Financial <small></small></a>

<a href="/Lecturer.aspx" style="margin-left:15px;" id="btn-lecture" class="navbar-btn btn btn-default btn-lecture dropdown-toggle">
Lecture <small></small></a>
<a href="/Activity.aspx" style="margin-left:15px;" id="btn-accom" class="navbar-btn btn btn-default btn-accom dropdown-toggle" >
Activity <small></small></a>
<a href="/Facility.aspx" style="margin-left:15px;" id="btn-facility" class="navbar-btn btn btn-default btn-facility dropdown-toggle">
Facility <small></small></a>
<a href="#" id="addTab" runat="server" style="margin-left:15px;" class="navbar-btn btn btn-default btn-add dropdown-toggle" >
Add Tab + <small></small></a><input id="btnAdd" type="button" value="+" class="auto-style1" runat="server" onclick="" /><input id="btnRemove" type="button" value="-" class="auto-style2" />
<ul class="nav dropdown-menu">

<li><a href="#"><i class="glyphicon glyphicon-user" style="color:#1111dd;"></i> Profile</a></li>
<li><a href="#"><i class="glyphicon glyphicon-dashboard" style="color:#0000aa;"></i> Dashboard</a></li>
<li><a href="#"><i class="glyphicon glyphicon-inbox" style="color:#11dd11;"></i> Pages</a></li>
<li class="nav-divider"></li>
<li><a href="#"><i class="glyphicon glyphicon-cog" style="color:#dd1111;"></i> Settings</a></li>
<li><a href="#"><i class="glyphicon glyphicon-plus"></i> More..</a></li>
</ul>
<%--<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>--%>
<input id="Text1" type="text" size="1" onkeyup="Expand(this);" style="display:none" />                 
<%-- <asp:Button ID="Button1" runat="server" Text="2Column" OnClick="ChangeCSS" CommandArgument="2Column.css" />
<asp:Button ID="Button2" runat="server" Text="3Column" OnClick="ChangeCSS" CommandArgument="3Column.css"/>
<asp:Button ID="Button3" runat="server" Text="4Column" OnClick="ChangeCSS" CommandArgument="4Column.css"/>--%>
<input id="txtColumn" type="text" runat="server" style="display:none" /></div>

<div class="btnThemeLayout">
<asp:Button ID="btnChangeTheme" runat="server" Text="Change Theme" CssClass="btnChooseTheme" OnClick="btnChangeTheme_Click" />   
<asp:Button ID="btnlayout" runat="server" CssClass="btnlayout" Text="Edit Layout" OnClick="btnlayout_Click"/>

</div>

</div>
</div>


<div class="container" id="main" >
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>


<div id="loginModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="text-center"><img src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=100" class="img-circle"><br>Logininput type="text" class="form-control input-lg" placeholder="Email"></h2>
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block">Sign In</button>
<span class="pull-right"><a href="#">Register</a></span><span><a href="#">Need help?</a></span>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>

</form>

<div id="aboutModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="text-center">About</h2>
</div>
<div class="modal-body">
<div class="col-md-12 text-center">
<a href="http://www.bootply.com/DwnjTNuvVt">This Bootstrap Template</a><br>was made with <i class="glyphicon glyphicon-heart"></i> by <a href="http://bootply.com/templates">Bootply</a>
<br><br>
<a href="https://github.com/iatek/bootstrap-google-plus">GitHub Fork</a>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">OK</button>
</div>
</div>
</div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>

css file

.columnsContainer { position: relative; margin: .5em; padding-top:2em }

.firstColumn, .secondColumn, .thirdColumn { /*border: 1px solid #ccc;*/ padding: 1.25em; }

.firstColumn { margin-bottom: .5em; }

.secondColumn { margin-bottom: .5em; }

.right {
position: relative;
left: 270px;
font-size: 12.5px;
font-family: Helvetica Neue,Lucida Grande,Segoe UI,Arial, Helvetica, Verdana, sans-serif;
top: 0.5em;
}

/* MEDIA QUERIES */
@media screen and (min-width: 47.5em ) {
.firstColumn {
margin-right: 60em;
width: 26.6em;
}

.secondColumn {
position: absolute;
top: 2em;
right: 26.9em;
width: 26.6em;
}

.thirdColumn {
position: absolute;
top: 2em;
right: 0;
width: 26.6em;
}

.fourthColumn {display:none}

.footable>thead>tr>th,.footable>thead>tr>td{position:relative}
.footable{border-spacing:0;width:100%;border:solid #ccc 1px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;font-family:'trebuchet MS','Lucida sans',Arial;font-size:14px}
.footable.breakpoint>tbody>tr>td.expand{background:url(img/plus.png) no-repeat 5px center;padding-left:40px}
.footable.breakpoint>tbody>tr.footable-detail-show>td.expand{background:url(img/minus.png) no-repeat 5px center}
.footable.breakpoint>tbody>tr.footable-row-detail{background:#eee}
.footable>tbody>tr:hover{background:#fbf8e9}
.footable.breakpoint>tbody>tr:hover:not(.footable-row-detail){cursor:pointer}
.footable>tbody>tr>td,.footable>thead>tr>th{border-left:1px solid #ccc;border-top:1px solid #ccc;padding:10px;text-align:left}
.footable>thead>tr>th,.footable>thead>tr>td{background-color:#dce9f9;background-image:-webkit-gradient(linear,left top,left bottom,from(#ebf3fc),to(#dce9f9));background-image:-webkit-linear-gradient(top,#ebf3fc,#dce9f9);background-image:-moz-linear-gradient(top,#ebf3fc,#dce9f9);background-image:-ms-linear-gradient(top,#ebf3fc,#dce9f9);background-image:-o-linear-gradient(top,#ebf3fc,#dce9f9);background-image:linear-gradient(to bottom,#ebf3fc,#dce9f9);-webkit-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;box-shadow:0 1px 0 rgba(255,255,255,.8) inset;border-top:0;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.footable>thead>tr>th:first-child,.footable>thead>tr>td:first-child{-moz-border-radius:6px 0 0;-webkit-border-radius:6px 0 0;border-radius:6px 0 0}
.footable>thead>tr>th:last-child,.footable>thead>tr>td:last-child{-moz-border-radius:0 6px 0 0;-webkit-border-radius:0 6px 0 0;border-radius:0 6px 0 0}
.footable>thead>tr>th:only-child,.footable>thead>tr>td:only-child{-moz-border-radius:6px 6px 0 0;-webkit-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0}
.footable>tbody>tr:last-child>td:first-child{-moz-border-radius:0 0 0 6px;-webkit-border-radius:0 0 0 6px;border-radius:0 0 0 6px}
.footable>tbody>tr:last-child>td:last-child{-moz-border-radius:0 0 6px;-webkit-border-radius:0 0 6px;border-radius:0 0 6px}
.footable>tbody img{vertical-align:middle}

}

please anyone help me

Answers (5)

Access to elements of JSON array of objects

I want to zoom image in browser using cursor