Problems with jQuery templates. Object doesn't support this method error

Question

I am learning about template in jquery. And have get over some example code that I testing. But it doesn't seem to work.

<html>
<head>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js " type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript" />
</head>

<body>

    <h2>ViewPage1</h2>

    <script id="movieTemplate" type="x-jquery-tmpl">
        <li><b>${Name}</b> (${ReleaseYear})</li>
    </script>

    <div id="movieList"></div>

    <script type="text/javascript">
            var movies = [
                { Name: "The Red Violin", ReleaseYear: "1998" },
                { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
                { Name: "The Inheritance", ReleaseYear: "1976" }
                ];

            // Render the template with the movies data and insert
            // the rendered HTML under the "movieList" element
            $("#movieTemplate").tmpl(movies).appendTo("#movieList");
    </script>
</body>

When debugging I can see that the problem is with the .appendTo() method. And I can also see in intellisens that that method is not in there.

What have I done wrong?

What does $("#movieTemplate").tmpl(movies) return? The "tmpl" function may not be chain-able, so you're attempting to access a jQuery method on a non-jQuery object. A good way to debug is to break up chained calls into individual statements. That makes it easier to set breakpoints and see the return value of each function. — draeton
– draeton, Commented Jan 19, 2011 at 21:22

Jeff B · Accepted Answer · 2011-01-19 21:52:32Z

2

It seems to be a problem with the script definitions in the header:

<head>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js " type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript" />
</head>

The script tag needs to have a closing </script> tag. Essentially your tmpl script wasn't loading. I did notice this is a bug in the tmpl example, so not really your fault. If you change the second one to match the first, it works fine:

<head>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js " type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>
</head>

Example: http://jsfiddle.net/UZ62w/

edited Jan 19, 2011 at 21:52

answered Jan 19, 2011 at 21:43

Jeff B

30.1k7 gold badges64 silver badges91 bronze badges

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

Comments

Lance · Accepted Answer · 2011-01-19 21:30:52Z

1

I'm pretty sure it has to do with the tmpl not returning a jQuery object. Try modifying your js to resemble something like this

var movies = [
            { Name: "The Red Violin", ReleaseYear: "1998" },
            { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
            { Name: "The Inheritance", ReleaseYear: "1976" }
            ],
template = $("#movieTemplate").tmpl(movies);

$("#movieList").append(template);

edit: Here's a jsfiddle showing it works.

edited Jan 19, 2011 at 21:30

answered Jan 19, 2011 at 21:22

Lance

1,89714 silver badges13 bronze badges

2 Comments

Jeff B Over a year ago

The reason yours works and his doesn't has nothing to do with the modification here. It works because you changed how the library was loaded.

Lance Over a year ago

Thanks for clarifying and setting the record straight, sir. It is much appreciated. :-)

Collectives™ on Stack Overflow

Problems with jQuery templates. Object doesn't support this method error

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related