How to create your own HTML template using jQuery?

This article is all about creating HTML template using jQuery.

Let’s know about the jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Let’s know about the jQuery Template

jQuery Template gives us an option or support to display and manipulation of the content on the browser. By using the jQuery Templating we can render JSON string to the HTML elements. Let us consider a simple example, we can use jQuery Template to display some set of records that we have got from an Ajax’s request.

A basic example of jQuery templates

Now we create a simple page using jQuery templates. We will only use the jQuery plugin. In this example, we will show you how to create a template and render the content from the JSON.

Requirement

Let’s us understand the requirement first.

Suppose we have to create a webpage like KnowBand website to sell the modules for the e-commerce platform like Opencart, Prestashop etc. We have some e-commerce modules or plugin that we want to list on KnowBand site. So, on the listing page, we will show the module’s name, image, and price.

We will use the below JSON string to list the data:

[
	{
		"name": "Product tabs- PrestashopAddons",
		"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Product-Tabs-logo-1000-x-1000.jpg",
		"module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs",
		"price": "$25"
	},
	{
		"name": "Prestashop Mobile App builder",
		"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Mobile-app-prestashop-plugin-500-X-500.jpg",
		"module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder",
		"price": "$30"
	},
	{
		"name": "Return Manager - Magento Extensions",
		"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/return-manager.png",
		"module_url": "https:\/\/www.knowband.com\/magento-return-manager",
		"price": "$50"
	},
	{
		"name": "Web Push Notification - PrestashopAddons",
		"image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg",
		"module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications",
		"price": "$43"
	}
]

We have two way to make a jQuery Template:

  1. By using the HTML Script Tag

    In this method, we will write HTML code in the script tag. The complete code is given below:

<html>
    <head>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot;>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script>
        </head>
        <body>
            <div class="container">
                <script id="blog" type="template">
                    <div class="col-md-3">
                        <a href="{{module_url}}">
                            <div class="thumbnail">
                                <imgsrc="{{image_url}}" class="img-rounded img-responsive" width="100%"></img>
                                <div class="caption">
                                    <p class="lead">{{price}}</p>
                                    <p>{{name}}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </script>
            </div>
            <script>
            $(function () {
                varknoband_data = [
                        {
                            "name": "Product tabs- PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Product-Tabs-logo-1000-x-1000.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs",
                            "price": "$25"
                        },
                        {
                            "name": "Prestashop Mobile App builder",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Mobile-app-prestashop-plugin-500-X-500.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder",
                            "price": "$30"
                        },
                        {
                            "name": "Return Manager - Magento Extensions",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/return-manager.png",
                            "module_url": "https:\/\/www.knowband.com\/magento-return-manager",
                            "price": "$50"
                        },
                        {
                            "name": "Web Push Notification - PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications",
                            "price": "$43"
                        }
                    ];
                var temp = $.trim($('#blog').html());
                $.each(knoband_data, function (index, obj) {
                    var x = temp.replace(/{{name}}/ig, obj.name);
                    x = x.replace(/{{image_url}}/ig, obj.image_url);
                    x = x.replace(/{{price}}/ig, obj.price);
                    x = x.replace(/{{module_url}}/ig, obj.module_url);
                    $('.container').append(x);
                });
            });
        </script>
        </body>
    </html>

We have created a thumbnail inside script tag i.e. #blog script tag and it was used as a template. In the above code, we have used {{ }} for wildcard variables.

Let’s understand actually what we have done in the above code:

var temp = $.trim($('#blog').html()); // It wil load all content of the #blog script tag in a temp variable.
var x = temp.replace(/{{name}}/ig, obj.name);       // Replaced the wildcard variable {{name}} with corresponding data from the JSON.
x = x.replace(/{{image_url}}/ig, obj.image_url);     // Replaced the wildcard variable {{image_url}} with corresponding data from the JSON.
x = x.replace(/{{price}}/ig, obj.price);                    // Replaced the wildcard variable {{price}} with corresponding data from the JSON.
x = x.replace(/{{module_url}}/ig, obj.module_url);  // Replaced the wildcard variable {{module_url}} with corresponding data from the JSON.
$('.container').append(x); // appended the content to the container div.
  1. By using the Placeholder technique

In this technique, we will append the content in the HTML after populating the data using the jQuery placeholder technique. The complete code is given below:

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot;>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script>
    </head>
    <body>
        <div class="container"></div>
        <script>
         $(function() {
             varknoband_data = [
                        {
                            "name": "Product tabs- PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Product-Tabs-logo-1000-x-1000.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs",
                            "price": "$25"
                        },
                        {
                            "name": "Prestashop Mobile App builder",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Mobile-app-prestashop-plugin-500-X-500.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder",
                            "price": "$30"
                        },
                        {
                            "name": "Return Manager - Magento Extensions",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/return-manager.png",
                            "module_url": "https:\/\/www.knowband.com\/magento-return-manager",
                            "price": "$50"
                        },
                        {
                            "name": "Web Push Notification - PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications",
                            "price": "$43"
                        }
                    ];
             $.each(knoband_data, function(index, obj) {
                $('.container').append(
                    `<div class="col-md-3">
                        <a href="${obj.module_url}">
                            <div class="thumbnail">
                                <imgsrc="${obj.image_url}" class="img-rounded img-responsive" width="100%"></img>
                                <div class="caption">
                                    <p class="lead">${obj.price}</p>
                                    <p>${obj.name}</p>
                                </div>
                            </div>
                        </a>
                    </div>`
                );
            });
         });
        </script>
    </body>
</html>

In the above example, we have used ` (back-tick) as template literal and ${ } as a placeholder. When we compare method 1 with method 2 we can easily say template literal and placeholder makes our task easier. In this example, we have written the template code in a loop and replaced our placeholders with its corresponding data.

Summary

To learn more about jQuery Templates, I recommend that you look at the documentation for jQuery Templates at the official jQuery website.

Sunny Saurabh

Sunny Saurabh

Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as expert as a PHP developer. He has also expert in database design, server maintenance and their security. He has achieved this goal only in the short span of 2yrs and still looking forward to achieve more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.

Leave a Reply

Your email address will not be published. Required fields are marked *