Using jQuery Templates 11th April 2020

In this blog we will see how to dynamically generate HTML code using template libraries.We will use jQuery Template engine in this blog.jQuery Templates enable you to display and manipulate data in the browser.

Imagine, on load of your HTML page(or in that matter on any event occurcence like click),you make a DB/REST call using AJAX and get a JSON response. You need to iterate over the JSON and display the result set on the UI. This is where templates come handy wherein you can just create HTML dynamcially

jQuery templating is a fast and efficient technique to render client-side templates using a JSON data source. Templates allow you to decouple Javascript and HTML code by allowing you to use "placeholders" inside your HTML string.

Let's take an EG and understand

JSON data

Assume, we make an AJAX call in our Index.html(can be any HTML) and get "peopleResults" data.This is the result set we need to iterate and display in the front end

Placeholder in our Index.html

We want to stick our result set (above peopleResults" JSON) into "peopleTable" table.

Create Template

Create a template. It can be in a separate file or the same Index.html. Upto you. I prefer to keep the template in a separate file (created commonDynamicTemplate.html) so it's easier to read(but then it's me)

Back to HTML

Back in Index.html, get the template using jQuery's get. In the below image, I have marked 3 points in red for your understanding

1. Load the script using jQuery "get" and store template data in a string (eg markup)

2. Compile markup string as a named template

3. Render the named template and append to the placeholder(#peopleTable) in html(index.html)

Result

Now, in the Index html will show the result of peopleResults JSON nicely in a table.Red marked in below image is coming from our dynamic template

Another scenario: How to group templates in a HTML file

Imagine you have a big application and you want to group templates, say based on the functionality. Eg, If your website is a shopping application, you may have Customer and Orders. All HTML which needs to be generated dynamically for customers can be kept it it's own file.Similarly, all related to Order's in it's own. Idea I want to convey is simple. i.e how to group multiple templates in a single file and then use it

JSON Data

Again, in this case we get JSON data "peopleResults" and "orderResults" as shown below

Placeholder in our html

HTML code where above data will stick in (IndexMultiTemplates.html)

Templates

File that holds multiple templates (We have two templates PEOPLEDATATEMPLATE and ORDERDATATEMPLATE

Back to HTML

Like we did earlier, on load of our HTML(IndexMultiTemplates.html) we get templates for both "PeopleData" (PEOPLEDATATEMPLATE) and "OrderData" (ORDERDATATEMPLATE)

In img below,marked 1 in red is the logic to see which template am retrieving and then stick the JSON result set we want

2. The "id" where data will be sticked in

Result

Final result will look like

Code is on Github   Git hub download

And that's it. Hope you undertood the ways to use jQueryTemplates.Email me at "thizismanju@gmail.com" incase you have queries or feedback. Alternatively, you can fill the "CONTACT" form or drop a comment below