I am using JQuery template feature to render my template in the html file. I have loaded the libraries by:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="../static/js/Dashboard.js"></script>
when i call the empty method on the element followed by $(...).tmpl(...).appendTo, it displays nothing and gives the error:
TypeError: $(...).tmpl(...).appendTo is not a function
However if i use innerHTML or manually set the variable as an empty string it shows the old data as well as the updated data.
Can you tell me whats wrong with my code:
(function(){
GetList();
$('#btnUpdate').click(function() {
$.ajax({
url: '/updateList',
data: {
title: $('#editTitle').val(),
description: $('#editDescription').val(),
id: localStorage.getItem('editId')
},
type: 'POST',
success: function(res) {
$('#editModal').modal('hide');
// Re populate the grid
GetList();
},
error: function(error) {
console.log(error);
}
});
});
});
function GetList() {
$.ajax({
url: '/getList',
type: 'GET',
success: function(res) {
var listObj = JSON.parse(res);
$('#ulist').empty();
// var list = '';
$('#listTemplate').tmpl(listObj).appendTo('#ulist');
},
error: function(error) {
console.log(error);
}
});
}
Upon entering the new data when the update button is clicked, this new data should be updated in the html template
Following an example from this documentation:
Essentially as an outline:
Where the first parameter is a template as a string, second param is your json object, and then the results are appended that way.