My JavaScript code throws a SyntaxError (Unexpected token <)

Question

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..

Consider changing the title from "How to solve this issue" to something that describes the problem. — Jonast92
– Jonast92, Commented Apr 25, 2013 at 14:03
How about the in your HTML are you including some inline script tags? — shyam
– shyam, Commented Apr 25, 2013 at 14:03
Make sure that your indent is right, the debugger sometimes decides to come up with some non-sense-making errors if you're not indenting it equally everywhere. — Jonast92
– Jonast92, Commented Apr 25, 2013 at 14:04

Turnerj · Accepted Answer · 2013-04-25 14:27:23Z

2

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> <a href="#/edit/<%= user.id %>" class="btn">Edit</a></td>

You shouldn't need to wrap the entire thing in the <% and %> tags, just the part you want to output.

edited Apr 25, 2013 at 14:27

answered Apr 25, 2013 at 14:17

Turnerj

4,3085 gold badges39 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

3gwebtrain Over a year ago

I converted to like this: <td><%= <a hre="#/edit/<%= user.id %>" class="btn">Edit</a> %></td> but no luck..

Turnerj Over a year ago

Updated answer after looking at a few other examples of the templating online. Give that a shot.

Turnerj Over a year ago

Based on your Javascript code, it seems to be simply because user really isn't defined and your userModel doesn't have a property ID. Do you see how your other sections of the template use the straight property value? eg. firstName vs user.firstName

3gwebtrain Over a year ago

yes, you are correct, but i fixed that issue... here is my jsfiddle can you have a look...jsfiddle.net/kAWfW

Turnerj Over a year ago

Thanks for the jsFiddle, made it a lot easier to work out. I have done an update to it here: jsfiddle.net/kAWfW/1 What your code was doing was creating a new tbody for insertRows when you rendered the view. After looking at some examples online, if you pass a jQuery element in an object as "el" to usersview it will use that when it inserts. Minor update to the HTML as well so it doesn't double up on "tr" elements.

Collectives™ on Stack Overflow

My JavaScript code throws a SyntaxError (Unexpected token <)

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related