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

<script type="text/javascript" src=".4.4.js"></script> 
<script type="text/javascript" src=".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 modo 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 modo 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 modo 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.

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./ajax/jQuery/jquery-1.4.4.js"></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn./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 modo 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 modo 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 modo 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.

• javascript
• jquery
• ajax
• jquery-templates

• 2 Just FYI jQuery 1.4.4 is very outdated. I'd strongly suggest you update it – Rory McCrossan Commented Mar 16, 2017 at 10:16
• 2 Support for jquery.tmpl ended 5 years ago. There are forks out there that are somewhat supported, I suggest you either use those or switch to something newer altogether. – Dmitry Ponkin Commented Mar 16, 2017 at 10:18
• @ozil Tried your suggestion. Getting error Uncaught ReferenceError: jQuery is not defined – Swarup Saha Commented Mar 16, 2017 at 10:25
• @RoryMcCrossan I updated to jquery-3.1.1.min.js.. Still Same error. – Swarup Saha Commented Mar 16, 2017 at 10:29
• I suggest you to do 2 checks: Use browser built-in network capture to see if the libraries are loaded properly. Check if another library or script on the page overrides the $ variable. – jjj Commented Mar 16, 2017 at 10:29

3 Answers 3

I fix this error in my project, i just added this link to jQuery resource:

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

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

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.