Uncaught TypeError: Object [object Object] has no method 'DataTable'
Uncaught TypeError: Object [object Object] has no method 'DataTable'
gongdao
Posts: 2Questions: 0Answers: 0
my JSP file look like below:
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://java.sun.com/jsp/jstl/core" %>
<%@include file="/WEB-INF/views/template/header.jsp"%>
<script>
$(document).ready(function() {
var searchCondition = '${searchCondition}';
$('.table').DataTable({
"lengthMenu" : [[2,3,5,10,-1], [2,3,5,10,"All"]],
"oSearch" : {"sSearch" : searchCondition}
});
});
</script>
<div class="container-wrapper">
<div class="container">
<div class="page-header">
<h1>All Products</h1>
<p class="lead">Checkout all the awesome products available now!</p>
</div>
<table id="pages" class="table table-striped table-hover">
<thead>
<tr class="bg-success">
<th>Photo Thumb</th>
<th>Product Name</th>
<th>Category</th>
<th>Condition</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<c:forEach items="${products}" var="product">
<tr>
<td><img src="<c:url value="/resources/images/${product.productId}.png" />"
alt="image" style="width:20%" /></td>
<td>${product.productName}</td>
<td>${product.productCategory}</td>
<td>${product.productCondition}</td>
<td>${product.productPrice} USD</td>
<td><a href="<spring:url value="/product/viewProduct/${product.productId}" />">
<span class="glyphicon glyphicon-info-sign"></span></a>
</td>
</tr>
</c:forEach>
</table>
<%--<script src="<c:url value="/resources/js/jquery-1.12.0.min.js" /> "></script>
<script src="<c:url value="/resources/js/jquery.dataTables.min.js" /> "></script>--%>
<%@include file="/WEB-INF/views/template/footer.jsp"%>
THe header.jsp look like below:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
Created by IntelliJ IDEA.
User: zhaobin
Date: 3/23/2016
Time: 6:32 PM
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>eFlower Store</title>
<!-- Angular JS-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>-->
<!--<script src="<c:url value="/resources/js/angular.min.js" /> "></script>-->
<%--Jquery--%>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<%--Data Table--%>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="<c:url value="/resources/css/bootstrap.min.css" />" rel="stylesheet">
<!-- Carousel CSS -->
<link href="<c:url value="/resources/css/carousel.css" />" rel="stylesheet">
<!-- customized CSS -->
<link href="<c:url value="/resources/css/main.css" />" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Music Store</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="<c:url value="/"/>">Home</a></li>
<li><a href="<c:url value="/product/productList/all" />">Products</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<c:if test="${pageContext.request.userPrincipal.name != null}">
<li><a>Welcome:${pageContext.request.userPrincipal.name}</a></li>
<li><a href="<c:url value="/j_spring_security_logout" />">Logout</a></li>
<c:if test="${pageContext.request.userPrincipal.name != 'admin'}">
<li><a href="<c:url value="/customer/cart" />">Cart</a></li>
</c:if>
<c:if test="${pageContext.request.userPrincipal.name == 'admin'}">
<li><a href="<c:url value="/admin" />">Admin</a></li>
</c:if>
</c:if>
<c:if test="${pageContext.request.userPrincipal.name == null}">
<li><a href="<c:url value="/login" />">Login</a></li>
<li><a href="<c:url value="/register" />">Register</a></li>
</c:if>
</ul>
</div>
</div>
</nav>
</div>
</div>
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This discussion has been closed.
Replies
Can you link to a test case showing the issue, per the forum rules please. My guess is that jQuery is being loaded twice on the document, but I'm not certain.
Allan
You are right, I have assigned many different versions of jQuery, include 1.12.0, 1.12.1, 1.12.2, 2.2. Now I have deleted all of them but 1.12.0.
Eventually, the code works! Thank you my dear Allan!
Wow - four of them :-). Good to hear that you've got it working now! Thanks for posting back.
Allan