i am getting this error on my JS error console:
DOMException
code: 8
message: "NOT_FOUND_ERR: DOM Exception 8"
name: "NOT_FOUND_ERR"
__proto__: DOMException
i am unable to render the json data on my template defined.
below is my code:
index.html
<!doctype html>
<html lang="en" ng-app="picsography">
<head>
<meta charset="utf-8">
<title>Picsography</title>
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet/less" href="lib/bootstrap/less/bootstrap.less">
<link rel="stylesheet/less" href="css/500.less">
</head>
<body>
<header class="navbar navbar-fixed-top" id="header">
<div class="navbar-inner">
<nav class="container">
<div class="brand">Picsography</div>
<div class="input-append pull-left">
<div class="input-append"><input type="text" id="search-field" data-provide="typeahead" placeholder="Search"><button class="btn btn-primary" style="margin-left: 0;" type="button">Search</button></div>
</div>
<div class="btn-group pull-right" id="user-menu">
<a class="btn" href="#/posts"><i class="icon-plus"></i><span> Share</span></a>
<a class="btn" href="#/view2"><i class="icon-inbox"></i><span> Inbox</span></a>
<a class="btn" href="#posts"><i class="icon-home"></i><span> Dashboard</span></a>
<a class="btn" href="#view2"><i class="icon-shopping-cart"></i><span> Marketplace</span></a>
<button class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i><span></span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Account Settings</span></a></li>
<li><a href="#">Privacy Settings</a></li>
<li><a href="#">Logout</a></li>
<li class="divider"></li>
<li><a href="#">Help</a></li>
</ul>
</div>
<div class="btn-group pull-right">
<a class="btn btn-mini" href="#"> 0 </span></a>
</div>
</nav>
</div>
</header>
<section class="container-fluid">
<div class="row-fluid">
<aside id="side-nav" class="well span2">
<ul class="nav nav-list">
<li class="nav-header"><i class="icon-star"></i>TRENDING NOW</li>
<li><a href="#"><i class="icon-arrow-up"></i>Animal Humor</a></li>
<li><a href="#"><i class="icon-arrow-down"></i>Movie Jokes</a></li>
<li><a href="#"><i class="icon-arrow-up"></i>Memes</a></li>
<li><a href="#"><i class="icon-arrow-down"></i>Celebrity Jokes</a></li>
<li><a href="#"><i class="icon-arrow-up"></i>Political Humor</a></li>
<li class="nav-header"><i class="icon-tags"></i>RECOMMENDED FOR YOU</li>
<li><a href="#"><i class="icon-tag"></i>Political Humor</a></li>
<li><a href="#"><i class="icon-tag"></i>Celebrity Jokes</a></li>
<li><a href="#"><i class="icon-tag"></i>Hollywood Humor</a></li>
<li><a href="#"><i class="icon-tag"></i>Animal Humor</a></li>
<li><a href="#"><i class="icon-tag"></i>Adult Humor</a></li>
</ul>
</aside>
<div ng-view class="row span10"></div>
</div>
</section>
<script src="js/less-1.3.0.min.js"></script>
<script src="lib/jquery/jquery-1.3.2.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/bootstrap/js/bootstrap-alert.js"></script>
<script src="lib/bootstrap/js/bootstrap-button.js"></script>
<script src="lib/bootstrap/js/bootstrap-carousel.js"></script>
<script src="lib/bootstrap/js/bootstrap-collapse.js"></script>
<script src="lib/bootstrap/js/bootstrap-dropdown.js"></script>
<script src="lib/bootstrap/js/bootstrap-modal.js"></script>
<script src="lib/bootstrap/js/bootstrap-popover.js"></script>
<script src="lib/bootstrap/js/bootstrap-scrollspy.js"></script>
<script src="lib/bootstrap/js/bootstrap-tab.js"></script>
<script src="lib/bootstrap/js/bootstrap-tooltip.js"></script>
<script src="lib/bootstrap/js/bootstrap-transition.js"></script>
<script src="lib/bootstrap/js/bootstrap-typeahead.js"></script>
</body>
</html>
partials/post-list.html
<div class="subnav span12" id="subnav">
<div class="btn-group pull-left" id="sort-nav">
<a class="btn active">Popular</a>
<a class="btn">Recent</a>
<a class="btn">Favorite</a>
</div>
<div class="btn-group pull-right " id="view-nav">
<a class="btn active" id="2col"><i class="icon-th-large"></i></a>
<a class="btn" id="3col"><i class="icon-th"></i></a>
<a class="btn" id="6col"><i class="icon-th-list"></i></a>
</div>
<div class="btn-group pull-right">
<a id="reload" class="btn"><i class="icon-refresh"></i></a>
<a class="btn"><i class="icon-random"></i></a>
</div>
<div class="row span12" id="img-container">
<ul class="unstyled row">
<li class="span3" ng-repeat="post in posts">
<img src="img/1.jpg">
<p>{{post.description}}</p>
</li>
<li class="span3">
<img src="img/1.jpg">
<p>Image Description</p>
</li>
<li class="span3">
<img src="img/1.jpg">
<p>Image Description</p>
</li>
<li class="span3">
<img src="img/1.jpg">
<p>Image Description</p>
</li>
</ul>
</div>
</div>
services.js
angular.module('picsographyServices', ['ngResource']).
factory('Post', function($resource){
return $resource('json/posts.json', {}, {
query: {method:'GET', isArray:true}
});
});
controllers.js
function PostListCtrl($scope, Post) {
$scope.posts = Post.query();
}
app.js
angular.module('picsography', ['picsographyServices']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/posts', {templateUrl: 'partials/post-list.html', controller: PostListCtrl});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: MyCtrl2});
$routeProvider.otherwise({redirectTo: '/posts'});
}]);
posts.json
[{
"url": "details",
"title": "Test Title",
"description": "Sample Description",
"image": "assets/images/1.jpg",
"tags": ["photo", "internet"],
"user": "hilarl",
"comments": ["sample comment"],
"likes": 23,
"dislikes": 100,
"resolution": { "x": 150, "y": 58 }
},
{
"url": "details",
"title": "Test Title",
"description": "Sample Description",
"image": "assets/img/2.jpg",
"tags": ["photo", "internet"],
"user": "hilarl",
"comments": ["sample comment"],
"likes": 23,
"dislikes": 100,
"resolution": { "x": 150, "y": 58 }
},
{
"url": "details",
"title": "Test Title",
"description": "Sample Description",
"image": "assets/img/3.jpg",
"tags": ["photo", "internet"],
"user": "hilarl",
"comments": ["sample comment"],
"likes": 23,
"dislikes": 100,
"resolution": { "x": 150, "y": 58 }
}]
When I upgraded to jQuery 1.8.0 this error went away for me.