HTML templating using JQuery
JQuery is a preeminent library of Javascript that provides you robust methods to manipulate DOM. The main aim of this article to let you know the technique of manipulating DOM and provide a wonderful user interface experience.
JQuery templating let you render JSON to HTML elements. Suppose you have a video records having a title and image in your database and you want to show a video listing in your portal just like other video channels does. Here in this blog, I will show you how to make a template and render it using JSON without using any external library like handle.js
Below is the JSON response to my API http://ashok.webkul.com/vikash/video-list.php for video listings
[ { "title":"vidya vox jukebox 2017", "img":"https:\/\/i.ytimg.com\/vi\/QfpgUe7jsr0\/hqdefault.jpg?sqp=-oaymwEWCMQBEG5IWvKriqkDCQgBFQAAiEIYAQ==&rs=AOn4CLC69mA9WAL1i8K63zwiZSKOH1SKBg" }, { "title":"The Best Songs Of Spotify", "img":"https:\/\/i.ytimg.com\/vi\/hRgLyEPBxEc\/hqdefault.jpg?sqp=-oaymwEWCMQBEG5IWvKriqkDCQgBFQAAiEIYAQ==&rs=AOn4CLCHauwQWwhKmH_JOAIajWYHNmx4Tg" }, { "title":"10 PLANTS THAT EAT ANIMALS", "img":"https:\/\/i.ytimg.com\/vi\/oASwAfCsQEE\/hqdefault.jpg?sqp=-oaymwEWCMQBEG5IWvKriqkDCQgBFQAAiEIYAQ==&rs=AOn4CLCJbGlEDzRNebP7LjchnX_31ukBhw" } ]Here are two way to make an interactive template
1. Using script tag
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> //using bootrap just for design purpose <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="container"> <script id="blog" type="template"> <div class="col-md-3"> <div class="thumbnail"> <img src="{{image}}" class="img-rounded img-responsive" width="100%"></img> <div class="caption"> <p>{{title}}</p> </div> </div> </div> </script> </div> <script> $(function() { $.ajax({ url: 'http://ashok.webkul.com/vikash/video-list.php', success: function(content) { var temp = $.trim($('#blog').html()); $.each(JSON.parse(content), function(index, obj) { var x = temp.replace(/{{title}}/ig, obj.title).replace(/{{image}}/ig, obj.img); $('.container').append(x); }); } }) }); </script> </body> </html>I have written a thumbnail inside #blog script tag that will work as a template form me. I am using {{ }} for wild card varianbles, You may put your own wildcard like what ever you want.
Consider code in line 9-18 inside ajax success function I am calling my template using #id
var temp = $.trim($('#blog').html());replace all the wild card variables with its corresponding values from the javascript object
var x = temp.replace(/{{title}}/ig, obj.title).replace(/{{image}}/ig, obj.img);2. Using placeholder
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="container"></div> <script> $(function() { $.ajax({ url: 'http://ashok.webkul.com/vikash/video-list.php', success: function(content) { $.each(JSON.parse(content), function(index, obj) { $('.container').append( `<div class="col-md-3"> <div class="thumbnail"> <img src="${obj.img}" class="img-rounded img-responsive" width="100%"></img> <div class="caption"> <p>${obj.title}</p> </div> </div> </div>` ); }); } }) }); </script> </body> </html>Thanks to javascript’s template literal back-tick
(` `)and placeholder${ }that makes our task easier with respect to method 1. Here we just put our template thumbnail inside ajax success function and populate our placeholders with its corresponding values.
