any one help me to find our the issue, what is going on with my code..
i am getting the error as :
Uncaught SyntaxError: Unexpected token <
my code is here :
$(function() {
var userDetails=[
{firstName:'Lakshmi', lastName:'Narayanan',age:32},
{firstName:'Harish', lastName:'Manickam',age:28},
{firstName:'Madan', lastName:'Gopal',age:27}
]
var userModel = Backbone.Model.extend({
defaults:{
firstName:"",
lastName:"",
age:""
}
});
var userList = Backbone.Collection.extend({
model:userModel
});
var userView = Backbone.View.extend({
tagName:"tr",
className:"userList",
template: $("#listTempalate").html(),
render:function(){
var temp = _.template(this.template);
this.$el.html(temp(this.model.toJSON()));
return this;
}
});
var usersView = Backbone.View.extend({
el:"tbody",
initialize:function(){
this.collection = new userList(userDetails);
this.render();
},
render:function(){
var that = this;
_.each(this.collection.models, function(item){
that.$el.append(new userView({model:item}).render().el);
})
}
});
var Router = Backbone.Router.extend({
routes:{
'' : 'home'
}
});
var router = new Router();
router.on('route:home', function(){
var defaultUser = new usersView();
})
Backbone.history.start();
});
my HTML :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,Chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>User Manager</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>User Manager</h1>
<hr>
<div class="page">
<table class="table striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Edit</th>
</tr>
</thead>
<tbody id="insertRows">
</tbody>
</table>
</div>
</div>
<script id="listTempalate" type="text/template">
<td><%= firstName %></td>
<td><%= lastName %></td>
<td><%= age %></td>
<td><%= <a hre="#/edit/<%= user.id %>" class="btn">Edit</a></td>
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script type="text/javascript" src="js/userManager.js"></script>
</body>
</html>
Seriously i unable to find my issue here to fix it. as well any one suggest me to find the issue for backbone.js online..
so let me keep check my code..
Thanks in advance..
Pretty sure it is to do with this line in your HTML
<td><%= <a hre="#/edit/<%= user.id %>" class="btn">Edit</a></td>
You open the <%= and then open it again /edit/<%= which I think is causing the problem. Even if opening it twice is allowed, you haven't added a final %> to the line.
Play around with that and let us know how it goes.
EDIT
Try this instead
<td> Edit</td>
You shouldn't need to wrap the entire thing in the <% and %> tags, just the part you want to output.
Related
I have a list view that displays some contents from the api and along side a button that when clicked should show the details of the corresponding item from the list-view on another page, how to associate the button to the specific id and how to present a generic url that accepts these ids to route accordingly. I saw many similar posts but I didn't know how to route those or can't understand how each model is called at that route. Here's my current app, where I've not generalised the routing instead each button is associated to the first id and a route like /1 which takes it to a view to display details of the first element from the collection alone.
pollsscript.js
//defining the model
var QuestionModel = Backbone.Model.extend({
// urlRoot : "http://localhost:8000/polls/api/v1/question/",
});
//defining collection
var QuestionCollection = Backbone.Collection.extend({
url : "http://localhost:8000/polls/api/v1/question/",
model: QuestionModel
});
//list view of all the questions
var QuestionListView = Backbone.View.extend({
el: '.page',
render : function(){
var context = {};
this.questionCollection = new QuestionCollection();
this.questionCollection.fetch({
success: () => {
context['models'] = this.questionCollection.toJSON();
var template = _.template($('#question-list-template').html(),{});
this.$el.html(template(context));
}
})
return this;
}
});
//individual questions
var QuestionDetailsView = Backbone.View.extend({
el: '.page',
render : function(){
var context = {};
this.questionCollection = new QuestionCollection();
this.questionCollection.fetch({
success: () => {
context['model'] = this.questionCollection.get(1).toJSON();
var template = _.template($('#question-detail-template').html(),{});
this.$el.html(template(context));
}
})
return this;
}
});
var questionListView = new QuestionListView();
var questionDetailsView = new QuestionDetailsView();
var PageRouter = Backbone.Router.extend({
routes: {
'' : 'home',
'1' : 'details',
},
home : function(){
questionListView.render();
},
details: function(){
questionDetailsView.render();
},
});
//initializing router and setting up history for routing to work
var pageRouter = new PageRouter();
Backbone.history.start();
index.html
<html>
<head>
<title> </title>
</head>
<body>
<div class="container">
<h1>All polls</h1>
<div class="page"></div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- main page template -->
<script type="text/template" id="question-list-template">
<table class = "table table-striped">
<thead>
<tr>
<th>Question</th>
<!-- <th>Date Published</th> -->
<th>Votes</th>
<th>Popular responses</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<% _.each(models, function(model){ %>
<tr>
<td><%= model.question_text %></td>
<!-- <td><%= model.pub_date%></td> -->
<td><%= model.total_votes%></td>
<td><%= model.pop_response%></td>
<td>Show details</td>
</tr>
<% }); %>
</tr>
</tbody>
</table>
</script>
<script type="text/template" id="question-detail-template">
<div>
<div><%= model.question_text %><div/>
<div>
<% _.each(model.choices, function(choices){ %>
<div><%= choices.choice_text %></div>
<div><%= choices.votes %></div>
<% }); %>
</div>
</div>
</script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="backbone-min.js"></script>
<script type="text/javascript" src="pollsscript.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</script>
</body>
</html>
index.html
<html>
<head>
<title> </title>
</head>
<body>
<div class="container">
<h1>All polls</h1>
<div class="page"></div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- main page template -->
<script type="text/template" id="question-list-template">
<table class = "table table-striped">
<thead>
<tr>
<!-- <th> ID </th> -->
<th>Question</th>
<th>Votes</th>
<th>Popular responses</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<% _.each(models, function(model){ %>
<tr>
<!-- <td id="id"><%= model.id %></td> -->
<td><%= model.question_text %></td>
<td><%= model.total_votes%></td>
<td><%= model.pop_response%></td>
<td><a href="#<%= model.id %>" class="btn btn-info show-details">Show details</button></td>
<!-- <td><a href="#<%= model.id %>" class="btn btn-info show-details" data-id="<%= model.id %>">Show details</button></td> -->
</tr>
<% }); %>
</tr>
</tbody>
</table>
</script>
<script type="text/template" id="question-detail-template">
<div>
<div><%= model.question_text %><div/>
<div>
<% _.each(model.choices, function(choices){ %>
<div><%= choices.choice_text %></div>
<div><%= choices.votes %></div>
<% }); %>
</div>
</div>
</script>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="backbone-min.js"></script>
<script type="text/javascript" src="pollsscript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</script>
</body>
</html>
pollsscript.js
//defining the model
var QuestionModel = Backbone.Model.extend({
// urlRoot : "http://localhost:8000/polls/api/v1/question/",
});
//defining collection
var QuestionCollection = Backbone.Collection.extend({
url : "http://localhost:8000/polls/api/v1/question/",
model: QuestionModel
});
//list view of all the questions
var QuestionListView = Backbone.View.extend({
el: '.page',
template : _.template($('#question-list-template').html()),
render : function(){
var context = {};
this.questionCollection = new QuestionCollection();
this.questionCollection.fetch({
success: () => {
context['models'] = this.questionCollection.toJSON();
this.$el.html(this.template(context));
}
})
return this;
},
// events: {
// 'click .show-details' : 'viewDetails',
// },
// viewDetails : function(e){
// var id = $(e.currentTarget).data("id");
// var item = this.questionCollection.get(id);
// var questionDetailsView = new QuestionDetailsView({
// model: item
// });
// questionDetailsView.render(); //get and pass model here
// }
});
//individual questions
var QuestionDetailsView = Backbone.View.extend({
el: '.page',
template : _.template($('#question-detail-template').html()),
render : function(){
var context = {};
context['model'] = this.model.toJSON();
this.$el.html(this.template(context));
return this;
}
});
var PageRouter = Backbone.Router.extend({
routes: {
'' : 'home',
':id' : 'details'
},
home : function(){
var questionListView = new QuestionListView();
questionListView.render();
},
details : function(id){
//alert(id);
var context = {};
this.questionCollection = new QuestionCollection();
this.questionCollection.fetch({
success: () => {
var item = this.questionCollection.get(id);
var questionDetailsView = new QuestionDetailsView({
model: item
});
questionDetailsView.render();
}
})
}
});
//initializing router and setting up history for routing to work
var pageRouter = new PageRouter();
Backbone.history.start();
I tried this, later, I associated the data-id with the button and gave the model.id I fetched from the api and then got the id on click and then passed the model to be rendered on the detail-view.
Still this doesn't change the router in anyway so still looking for a better way to do it.
Edit
Updated the code and fixed by associating model id with href, and created routes to fetch and get the model from in the router function.
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl',['$scope',function($scope){
$scope.tableData = ['hello','blue','angular'];
//set ture ok but only first time
//设置 true 可以 但是 只有第一次可以
//$scope.selectClass = true;
$scope.reset = function(){
console.log('reset');
$scope.selectClass = false;
}
}]).directive('myTd',function(){
return {
restrict : 'A',
link : function(scope,elem){
$(elem).on('click',function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected')
}else{
$(this).addClass('selected');
}
})
}
}
});
.selected {background: #139029;}
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.3/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles/bootstrap.min.css">
<style>
.selected {background: #139029;}
</style>
</head>
<body ng-controller="myCtrl">
<div class="container-fluid">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>item1</th>
<th>item2</th>
<th>item3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in [1,2,3]">
<td ng-class="{'selected':selectClass}" ng-repeat="item in tableData" my-td >{{item}}</td>
</tr>
</tbody>
</table>
<button class="btn btn-danger btn-block" ng-click="reset();">重置表格</button>
</div>
</body>
<script src="lib/angular.1.5.5.min.js"></script>
<script src="lib/jquery.2.2.2.min.js"></script>
<script src="src/resetTable.js"></script>
</html>
i click button reset class not work, why? who can tell me. thanks very much!!
You don't need that directive (and you don't need to manipulate the DOM yorself). ng-class is itself a built-in directive that does just that.
Just delete your myTd directive and change your element to this:
<td ng-class="{'selected':selectClass}" ng-repeat="item in tableData" ng-click="selectClass = !selectClass" >{{item}}</td>
Actually what you want to do to achieve your requirement by preserving the directive is to remove the class selected from your table rows
To do that modify the reset function as follows
$scope.reset = function(){
$('.selected').removeClass('selected');
}
This function selects all the elements with class name selected and will remove the class from those elements
i am using angualr nvD3 directory for bullet chart. i want to dispaly the data in the form of bullet chart in a table.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope','$http', function ($scope, $http ) {
$scope.LoadInit = function () {
//alert('1');
$scope.jsondata = [{'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
]
$scope.transactionData= $scope.jsondata;
.finally(function(){
$scope.data1 = {
//"title": "Revenue",
//"subtitle": "US$, in thousands",
"ranges": [0,100,1300],
"measures": [record.actualVolume],
"markers": [record.expectedVolume]
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 1
}
};
};
$scope.LoadInit();
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td><nvd3 options="options1" data="data1"></nvd3></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
but i am not getting the data when i tried to use bullet chart, other wise i am getting data. when i am using http call for data rather than json object, following error is coming.click here for error page
Here is a simplified version of what I think you were trying to achieve. I don't quite get the .finally() function in your code, so what I do instead is map $scope.jsondata to $scope.transactionData, creating a chartData property within each item, so that when you ng-repeat over them, you can feed each of the nvd3 bullet charts its own data object.
I believe the errors you were getting were caused by the fact that you were trying to feed string values of actualVolume and expectedVolume to nvd3, so I fixed that by converting them to Number values instead:
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
See the rest below... Hope this helps you.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.jsondata = [
{
'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
];
$scope.transactionData = $scope.jsondata.map(function(record) {
return {
transactionName: record.transactionName,
actualVolume: record.actualVolume,
expectedVolume : record.expectedVolume,
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 500
}
};
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<link data-require="nvd3#1.8.1" data-semver="1.8.1" rel="stylesheet" href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" />
<script data-require="angular.js#1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script data-require="nvd3#1.8.1" data-semver="1.8.1" src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td class="table-cell-chart">
<nvd3 options="options1" data="record.chartData"></nvd3>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
My REST API returns hundreds rows of data that looks something like this:
[
{"roman_number":"I"},
{"roman_number":"II"},
{"roman_number":"III"},
{"roman_number":"IV"}
{"roman_number":"V"},
{"roman_number":"VI"},
{"roman_number":"VII"},
{"roman_number":"VII"},
...
{"roman_number":"MMI"}
]
I'd like to be able to display the data in table like so ...
<table border=1>
<tr><td>I</td><td>II</td><td>III</td><td>IV</td></tr>
<tr><td>V</td><td>VI</td><td>VII</td><td>VIII</td></tr>
<tr><td>IX</td><td>X</td><td>XI</td><td>XII</td></tr>
<tr><td>XIII</td><td>XIX</td><td>XX</td><td>XXI</td></tr>
<tr><td colspan=4> pagination here </td></tr>
</table>
I hope that I do this in angular as I am using angular HTTP to communicate with my REST API. Thanks.
Updated based on Partha Sarathi Ghosh suggestion.
I have this app file:
var app = angular.module("myApp", ['smart-table']);
angular.module('myApp').filter('chunkby', function() {
return function(input, chunk) {
var i,j,temparray=[];
if(! input ) { return; }
for (i=0,j=input.length; i<j; i+=chunk) {
temparray.push(input.slice(i,i+chunk));
}
return temparray;
};
});
... and I have this html ...
<table>
<tr ng-repeat="row in (all_types|chunkby:5)">
<td ng-repeat="col in row">{{col}}</td>
</tr>
</table>
... but I get this error in my console ...
Error: [$rootScope:infdig] ...
... but the data displays ok. I noticed that the plunker demo also gets this error too.
Try this custom filter
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = [0,1,2,3,4,5,6,7,8,9,10,11, 12,13,14,15];
});
angular.module('plunker').filter('chunkby', function() {
return function(input, chunk) {
var i,j,temparray=[];
for (i=0,j=input.length; i<j; i+=chunk) {
temparray.push(input.slice(i,i+chunk));
}
return temparray;
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table border=1>
<tr ng-repeat="row in (data|chunkby:4)">
<td ng-repeat="col in row">{{col}}</td>
</tr>
</table>
</body>
</html>
Plunker Here
I am trying to retrieve list of object from Server and render it on html using Backbone.js
But facing "- cannot be resolved" error.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter- bootstrap/3.2.0/js/bootstrap.min.js">
</head>
<body>
<div class="container">
<div class="page">
</div>
</div>
<script type="text/template" id="product-list-template">
<table class="table striped">
<thead>
<tr>
<th>Category</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<% _.each(products, function(product){ %>
<tr>
<td><%= product.get('category')%></td>
<td><%= product.get('description')%></td>
</tr>
<%}); %>
</tbody>
</table>
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"> </script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script type="text/javascript">
var Products = Backbone.Collection.extend({
url: '/VeggieFresh/veggie/product/1'
});
var ProductList = Backbone.View.extend({
el: '.page',
render: function(){
var that = this;
var products = new Products();
products.fetch({
success : function(products){
var template = _.template($('#product-list-template').html(), {products: products.models});
that.$el.html(template);
}
});
}
});
var Router = Backbone.Router.extend({
routes : {
'':'home'
}
});
var productList = new ProductList();
var router = new Router();
router.on('route:home', function(){
console.log('Backbone loaded.');
productList.render();
});
Backbone.history.start();
</script>
</body>
</html>
Error is as follows:
org.apache.jasper.JasperException: Unable to compile class for JSP:
An error occurred at line: 30 in the jsp file: /index.jsp
_ cannot be resolved
27: </tr>
28: </thead>
29: <tbody>
30: <% _.each(products, function(product){ %>
31: <tr>
32: <td><%= product.get('category')%></td>
33: <td><%= product.get('description')%></td>
An error occurred at line: 30 in the jsp file: /index.jsp
products cannot be resolved to a variable
27: </tr>
28: </thead>
29: <tbody>
30: <% _.each(products, function(product){ %>
31: <tr>
32: <td><%= product.get('category')%></td>
33: <td><%= product.get('description')%></td>
Any help/suggestion for this problem is highly appreciated.
It looks like you are mixing Java and Javascript. When you do something like:
<% _.each(products, function(product){ %>
in a JSP file, it gets treated as Java code. However, the code you have inside the <% %> block:
_.each(products, function(product){
is Javascript code.
Since you can't combine the two different languages of Java and Javascript you get a Java error (the JasperException).