Uncaught TypeError: $.tmpl is not a function

Question

I am using JQuery template feature to render template in html page. I have loaded the libraries using

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

Now on a Button hit I am calling the function displayProducts() and using ajax calling backend Java Service to get data in JSON format. responseJson is the data that I am getting back from backend.

My Template file name is productList.html. And on success, I am calling the tmpl function of jquery. But it is showing the following error.

Uncaught TypeError: $.tmpl is not a function

Kindly suggest what's wrong in my code.

function displayProducts() {
    $.ajax({
                url : 'DisplayProducts',
                data : {
                    searchKey : $('#searchText').val()
                },
                success : function(responseJson) {
                    console.log(JSON.stringify(responseJson));
                    $.get('template/productList.html', function(htmlTemplate) {
                        $.tmpl(htmlTemplate, responseJson).appendTo('#container2');
                    });                     
                }
            });
}

EDITED:

When I am using

var blogPosts = [
             {
                 postTitle: "How to fix a sink plunger in 5 minutes",
                 postEntry: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.",
                 categories: ["HowTo", "Sinks", "Plumbing"]
             },
             {
                 postTitle: "How to remove a broken lightbulb",
                 postEntry: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.",
                 categories: ["HowTo", "Lightbulbs", "Electricity"]
             },
             {
                 postTitle: "New associate website",
                 postEntry: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna."
             }
         ];
         $.get('template/sample.html', function(template) {
             $.tmpl(template, blogPosts).appendTo('#container3');
         });

inside < script > tag. It is working fine. But when I am using the way I posted earlier it is showing the error.

Answer 1

just check the 'jquery.tmpl.min.js' reference must be added, here the link file. https://github.com/BorisMoore/jquery-tmpl

Answer 2

There was no problem at all with the version number in my code. There was a missing in the html template. That's why I was getting the error. Fixed it now.

Answer 3

我在项目中修复了此错误，我只是将此链接添加到jQuery资源中：

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>